Splendid Layouts
Splendid Layouts is a library designed to help you create layouts easily.
There are five kinds of layouts in this library — Shell, Macro, Micro, Positioning, and Component-based layouts.
Shell Layouts
Shell layouts are used to create the application or website shell. These contain the navigation, content, sidebar, and footer.
Examples of Shell Layouts
Create a single-column shell with Header, Content, and Footer
Create layouts with Header, Content, and up to two Sidebar.
Shell layouts are quite challenging to build because you gotta be mindful of the height of the viewport. But we’ve done it for you so you don’t have to worry about them!
Macro Layouts
Macro Layouts are used to create the general structure of the site. The classes here take you beyond 12-columns to create flexible layouts which can include Masonry and even Subgrids.
Examples of Macro Layouts
Creates a CSS Grid with any number of columns
Make a masonry grid with items of uneven height
Most people think of macro layouts as the 12-column grid, but you and I both know there are more ways to layout!
Micro Layouts
Micro layouts are used within components. They help you arrange content, create sections, and divide things up for clear visual hierarchy.
Examples of Micro Layouts
Let elements flow from one line to another.
Horizontal and vertical dividers made extremely easy to use
Positioning layouts
Positioning layouts help you place elements on any side, any edge, any corner, and even in the center with a single class.
Examples of Positioning Layouts
Position your element on any side or corner.
Put your element on any edge — even in the corners
You can further customize the position of your items if these aren’t enough! 😉
Component Based Layouts
There are components with predefined patterns. When we notice them, we’ll build them — so you can use them instead of reconstructing everything from scratch.
Examples of Component Based Layouts
Make simple or complex cards by just writing some markup
Create hero elements with eyebrows with lesser effort
Eyebrow A Typical Heading
Use these components when you can! They are your friends!