For the longest time, CSS floats were a go to way to put two things next to each other on the web. Unfortunately, because this is not what CSS floats were designed to do, this usually created just as many problems as we were trying to solve.
Conversation
Replying to
With React components, modern web design has evolved to solve problems like these:
youtu.be/ZOsA9-NI49w
Since most web layouts are not unique, we can reduce them to a handful of reusable layout patterns.
1
My friend Travis Waith-Mair (), teaches these principles in his all new tutorial series on CSS for React:
youtu.be/ZOsA9-NI49w
Travis is a senior front-end developer and the creator of the Bedrock Layout Primitives, a component library for React.
1
The library gives you a set of utility components that can be composed together to create complex web layouts. Because the building blocks are isolated and flexible, you are not tied into the conventions of a monolithic library like Bootstrap or Foundation.
1
Each component represents a smaller layout called a CSS layout primitive.
CSS layout primitives are the building blocks of web layouts.
CSS layout primitives adhere to the two principles of Encapsulated CSS.
1
These principles determine how elements are styled to ease refactoring and composition:
1. Elements do not lay themselves out.
2. Elements style themselves and lay out only their immediate children.
1
To see why developers adopted CSS layout primitives for building web layouts, let's try to break down this grid of cards, which can be found on many modern e-commerce websites, with CSS layout primitives:
1
We can quickly break down this layout with just four CSS layout primitives:
* Frame
* PadBox
* Stack
* Grid
1
Wrapper components like Frame and PadBox are single purpose, doing things like cropping content to a desired aspect ratio or applying fixed padding.
Spacer components like Grid and Stack apply pre-defined gutter sizes to children elements to create consistency in spacing.
1
Now try breaking down the following dialog box with CSS layout primitives:
1
We can quickly compose this layout with just three CSS layout primitives, two of which we just used in the first example:
- InlineCluster
- PadBox
- Stack
1
Much like design patterns, CSS layout primitives are generalized, reusable solutions that solve common problems found in web layouts.
CSS layout primitives simplify and bring consistency to large, complex web layouts.
1
For hands on practice, follow this tutorial as Travis () explains how layout primitives work, and guides you in building your own Stack CSS layout primitive using the Styled Components library.
1
To master CSS for React, check out Travis's () full course, Composing Layouts in React. The course teaches a ton of practical CSS layout primitives and techniques for building reusable, complex layouts in React.
