Building a Layout
Sections
Figure 1. Animation demonstrating state layer implementation.
Sections are the primary building block of your layout.
They always take up the full available width of the viewport.
And they have padding.
Overview
Sections are the most essential building block of a page. There are 5 default utility categories for them.
You may notice that there’s more variance in top-and-bottom padding than left and right padding. That’s simply because I’ve never had a use case where I needed a least-padding section that had the default left-and-right padding. If user feedback indicates this is a stupid way to do it, I’ll gladly change it.
.section__leastPadding {
padding: 1.618em 4.235em;
}
.section__lessPadding {
padding: 2.618em 4.235em;
}
.section__default {
padding: 4.235em;
}
.section__morePadding {
padding: 6.852em 4.235em;
}
.section__mostPadding {
padding: 11.087em 4.235em;
}
@media screen and (max-width: 991px) {
.section__lessPadding {
padding: 2.618em 1.618em;
}
.section__default {
padding: 1.618em;
}
.section__morePadding {
padding: 4.235em 1.618em;
}
.section__mostPadding {
padding: 6.852em 1.618em;
}
}Recommended Usage
Customization
Resources that mention this topic
No items found.
Give Us Feedback
Click or tap to reveal form.