Using the grid
As I detailed in this article, what I learnt from the first incarnation of Interior — which was based on Bootstrap — is, I had
to walk away from what came before and embrace new CSS layout tools. Interior v.2 doesn't rely on floats for layout, it never will,
I just need to create a grid and gutters, flexbox does the rest. So that's how Interior v2. works you won't find any
.col-[whatever] classes or
.offset classes like you get in Bootstrap...
well you might but if they exist they'll be for baseline alignment.
I just need to create a grid and gutters, flexbox does the rest.Moi
Who knows what I will learn from the new Grid spec and what Interior v.3 will be, I'm guessing there may not be a need to use Interior for grid layout, yet there will be a benefit to automation using Scss — so it will live on — albeit in a state of evolution.
Columns & gutters
In an effort to reduce the markup I chose margin over padding to create the gutter width. This is combined with percentages and
calc() to create the overall gutter width — this approach allows mixed
units such as rems to be used instead of percentages for gutters;
feel free to inspect figure 1.
Keeping markup and presentation separate makes life easier going forward. There are many benefits, the primary benefit being that changes can be made using only CSS.
Don't set things in stone
Describing in markup the appearance of anything limits what may be altered later.
In figure 2 the classes are descriptive of how many columns they span. This is fine until something requires an update, if the width needs to change you have no choice — if you want your markup to be semantic — but to change the markup.
You could either change both HTML and CSS, change HTML only — but be limited by existing styles — or change CSS only.
If you keep your markup
generic this change could be a matter of updating the CSS only. In figure 3 the generic
<div> tag replaces the specific
<div class="col-4"> &
<div class="col-6"> tags.