There are a few components that I use almost every day in development. They are used for layouts and are made from flexbox and css grid. On this site I pass both of these down with the MdxProvider so all my pages and posts have access to them easily.
What We’re Using TL;DR
I had used a column component that accepted different span amounts, but I ended up not using it as much. I tend to add
span to the children through the
sx prop or extending with styled components.
This one is by far my favorite. 90% of the time it works perfectly with the props given. It can easily be extended through styled components, emotion’s
css prop, or Theme UI’s
sx prop for those few cases where I need something extra.
This is definitely an opinionated way to build a Flexbox component. The idea is to have booleans for certain aspects of the spec to help speed up composition.
Here’s a list of the current props for it:
Here is some example usage. See the CodeSandbox down below for more.
Grid is another one of my favorites and it’s also very opinionated to suit my needs. The idea is to use CSS grid to create layouts. Depending on the project it can align with a design grid.
This can be paired with Flexbox for some powerful layouts. Add the
sx prop from Theme UI for some wonderful breakpoint awesomeness.
Let’s take a look at the props.
Here’s an example of using it. See more examples in the CodeSandbox.