the stackable main building blocks
<body>
<section></section>
<section class="pad-y-m"></section>
<section class="pad-b-m row-center"></section>
<section class="row-right"></section>
</body>
this is the markup for freely stackable containers
Sections are the containers for all column arrangements of the grid. Actually pretty straightforward, the idea of 12 columns with gutters and margins of the same width works really well – unless you use vw and all 100 of them. This means overflow and rewrapping of columns when someone chooses to "display scrollbars: always" on a desktop machine.
Why would anyone do that?
So the right margin was excluded from the section dimensions, and just margin-left: var(--g); remains for the default <section>. Now there is 4% wiggle room on the right for the browser to do scrollbar stuff if it feels like it. As long as there are no scrollbars the outcome is indistinguishable form the "complete" grid.
with left margin 4vw, fluid width 92vw and empty space of ~4% (or vw) on the right
<section>
<div class="co-2"> </div>
<div class="co-2"> </div>
…
</section>
Excellent question. All the sections mentioned above stay within the 12-column layout grid, but they are only 96vw (or 96%) wide. Remember all the fun we had with scrollbars…
But since the sections are self-contained and don’t rely on a wrapper structure to align or stretch, we can simply wrap each individually in a <div class="fullbox"> which has almost no own features… except 100% width. Not 100vw… sigh. Simple background images and background color is applied to the wrapper inline – like so:
<div class="fullbox" style="background-color: var(--accent); color: var(--wht);">
Emphasis here on simple background images – if you want more control over aspect-ratio and resolution there is a responsive solution over at images with <section class="img-fill">
Same section in 100% wrapper .fullbox with solid background
<div class="fullbox">
<section>
<div class="co-2"> </div>
<div class="co-2"> </div>
…
</section>
</div>
Fluid layout grids work best from small to mid-sized screens and even up to 1500-ish points viewport width. Beyond that, the precious background graphics, edge-to-edge coloured boxes and fluid type sizes usually begin to fall apart and achieve an undesirable zoom effect.
If we don‘t want the grid to extend to infinity, we can switch form the standard _sizing.scss to an alternate _sizing-semifluid.scss file, which stops all columns at a certain width (1500px as an example), but lets containers stretch to full width. My favourite.
Alternatively, _sizing-boxed.scss clamps the whole page and leaves empty (or illustrated, coloured…) margins.
!important Replace all dynamic sizing for content like font-size, border-radius etc. beyond this point with static values — like in _sizing-semifluid.scss
So, how do we switch?
Via the central styles.scss file, where we comment out the ones we don‘t need:
/res/scss/styles.scss
∞ fluid
@import 'sizing';
// @import 'sizing-semifluid';
// @import 'sizing-boxed';
fluid containers, fixed columns
// @import 'sizing';
@import 'sizing-semifluid';
// @import 'sizing-boxed';
boxed > 1500px
// @import 'sizing';
// @import 'sizing-semifluid';
@import 'sizing-boxed';
Sections are resized vertically by adding padding-classes. They are controlling top t, bottom b or both y vertical paddings in 4 increments. Which you can change, of course.
The root class name is .pad- for padding, an extension for t-, b- and y- and a factor s, m, l and xl which stands for 1, 2, 4 and 6 times --v, the default variable for vertical spacing.
Yes, very good! You don‘t actually need to use .pad-y-s, because padding: var(--v) 0; is the standard for all sections. It's here just for completionist reasons.
Bonus: you can use all .pad-x-x classes on prargraphs, columns and actually all div-containers, too.
.pad-t-s 1x padding-top
.pad-t-m 2x padding-top
.pad-t-l 4x padding-top
.pad-t-xl 6x padding-top
.pad-y-s 1x padding vertical
.pad-y-m 2x padding vertical
.pad-y-l 4x padding vertical
.pad-y-xl 6x padding vertical
.pad-b-s 1x padding-bottom
.pad-b-m 2x padding-bottom
.pad-b-l 4x padding-bottom
.pad-b-xl 6x padding-bottom
Transparent sections (or ones with the same background) usually start with vertical padding and then continue with just bottom-padding. A.k.a. the "start with -y, continue with -b" rule.
Alternating solid (and also solid and transparent) sections should most likely use a symmetrical vertical spacing. It doesn't have to be the same for an entire page, though.
There are no hard rules on how to combine paddings, so we can use for example two medium paddings (bottom/top) on adjacent sections to achieve the same optical gap as the surrounding large paddings
Sections default to flex-direction: row, so the 90° axis uses align-items to align items vertically. .col {flex-direction: column} turns the main axis by 90° and is used for columns. Here alignment works horizontally left/center/right
Note that all "un-aligned" elements strech to full height or width, depending on flex-direction and the default align-items: stretch. In order not to have hard-to-guess classnames, we keep top, center and bottom for the row-containers and use align-s, -c and -e for column purposes; the values are the same.
Also note the unassuming .row-rev which is very useful for alternating left-right / right-left combinations of images and text. If you build a two-column layout and actually alternate them in HTML, they will look as intended on large displays, but will end up in the wrong order on top of each other on mobile. If you give every other row row-rev instead, it will appear alternating on the desktop, but in single-column display will run in the correct order.
We don‘t spell out all possible combinations of CSS flex, and you can just add more variations on the go. But maybe that‘s already Tailwind territory and you should give that a try…
.row flex-direction: row
.row-center justify-content: center
.row-right justify-content: flex-end
.row-apart justify-content: space-between
.row-rev flex-direction: row-reverse
.col flex-direction: column
.top, .align-s align-items: flex-start
.center, .align-c align-items: center
.bottom, .align-e align-items: flex-end
.base align-items: baseline
…but there are always exceptions. The more elements you put into a container, the more likely a single element wants to behave diefferently. Like buttons in cards for example.
To move a single element we have three additional helper classes which use align-self to escape the alignment of the parent container. Since these are "overrides" they have to be !important. But they work both in column and row directions.
.self-s align-self: flex-start !imoprtant
.self-c align-self: center !imoprtant
.self-e align-self: flex-end !imoprtant
Disclaimer: Everything here is free to use, but no responsibility is taken for any outcome. Questions & Suggestions: ak at alexkoch dot net (you‘re not a robot, I know). And I don‘t use cookies. Version history