Interior

Layout system

Method.

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 .push, .pull 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.

This is text is to demonstrate the padding applied to this column. This is text is to demonstrate the padding applied to this column.
Figure 1

Separation

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.

Example

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.

// 3 x columns
.col-4 {
  @include col(4);
}
// 2 x columns
.col-6 {
  @include col(6);
}
Figure 2
Choice

You could either change both HTML and CSS, change HTML only — but be limited by existing styles — or change CSS only.

Example

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.

// 3 x columns
.layout-1 > div {
  @include col(4);
}
// 2 x columns
.layout-1 > div {
  @include col(6);
}
Figure 3