What are Layout Spacers?
An Introduction to layout spacers
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the Composing Layouts in React course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Composing Layouts in React, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:10] What's up guys, Travis here with another lesson in composing layouts in React. In this module, we'll be learning about layout primitives.
[00:11 - 00:22] In the previous module, we learned about compositional layout and how to use encapsulate CSS to achieve that. I also introduced you to the concept of layout primitives, like stacks and splits.
[00:23 - 00:29] Layout on the web is not that unique. We can break down most of the things we do into a handful of patterns.
[00:30 - 00:46] By codifying these patterns, we now have a set of layout primitives that we can use to build the solutions we need. Over the following two modules, we will be rebuilding most of the layout prim itives found at bedrock layout primitives.
[00:47 - 00:59] In this module, we'll be building what I like to call spacers. Spacers are layout primitives that have a common goal of creating consistent space between elements on the page.
[01:00 - 01:10] Up until this point, I have avoided using any tools. I've wanted to show you how to apply encapsulate CSS to build compositional layout using just the core technologies.
[01:11 - 01:23] In practice, however, most real-world apps use some form of tooling to make maintenance of CSS style sheets easier to manage. In the rest of this course, I will be using styled components.
[01:24 - 01:42] Style components is a library, specifically the CSS and JS library, explicitly built to enhance CSS and React applications. This is the same technology that bedrock layout primitives is built upon, and I highly recommend using it personally.
[01:43 - 01:55] That said, nothing in the following lessons will be dependent on styled components themselves. One will be able to adapt them into SAS, less or even vanilla CSS if needed.
[01:56 - 02:00] So let's get learning about the stack component, our first layout primitives.