Building Robust Layouts With Container Units

Russell Bishop

2019-03-05T15:00:17+01:00 2019-03-05T18:20:30+00:00

Container units are a specialized set of CSS variables that allow you to build grids, layouts, and components using columns and gutters. They mirror the layout functionality found in UI design software where configuring just three values provides your document with a global set of columns and gutters to measure and calculate from.

They also provide consistent widths everywhere in your document — regardless of their nesting depth, their parent’s width, or their sibling elements. So instead of requiring a repeated set of .grid and .row parent elements, container units measure from the :root of your document — just like using a rem unit.

container units measure from the root of your document just like using a rem unit — (Large preview)

What Makes Container Units Different?

Grids from popular frameworks (such as Bootstrap or Bulma) share the same fundamental limitation: they rely on relative units such as ‘percentages’ to build columns and gutters.

This approach ties developers to using a specific HTML structure whenever they want to use those measurements and requires parent > child nesting for widths to calculate correctly.

Not convinced? Try for yourself:

Open any CSS framework’s grid demo;
Inspect a column and note the width;
Using DevTools, drag that element somewhere else in the document;
Note that the column’s width has changed in transit.

Freedom Of Movement (…Not Brexit)

Container units allow you more freedom to size elements using a set of global units. If you want to build a sidebar the width of three columns, all you need is the following:

.sidebar {   width: calc(3 * var(--column-unit));   /* or columns(3) */ }

Your ...class="sidebar">... element can live anywhere inside of your document — without specific parent elements or nesting.

Measuring three columns and using them for a sidebar. — Measuring three columns and using them for a sidebar (Large preview)

Designers and developers have an excellent middle-ground that helps translate from design software to frontend templates: numbers.

Modular scales are exceptional not just because they help designers bring harmony to their typography, but also because developers can replicate them as a simple system. The same goes for Baseline Grids: superb, self-documenting systems with tiny configuration (one root number) and massive consistency.

Container units are set up in the same way that designers use Sketch to configure Layout Settings:

Any opportunity for designers and developers to build with the same tools is a huge efficiency boost and fosters new thinking in both specialisms.

Start Building With Container Units

Define your grid proportions with three values:

:root {   --grid-width: 960;   --grid-column-width: 60;   --grid-columns: 12; }

These three values define how wide a column is in proportion to your grid. In the example above, a column’s width is 60 / 960. Gutters are calculated automatically from the remaining space.

Finally, set a width for your container:

:root {   --container-width: 84vw; }

Note: --container-width should be set as an absolute unit. I recommend using viewport units or rems.

You can update your --container-width at any breakpoint (all of your container units will update accordingly):

@media (min-width: 800px) {   --container-width: 90vw; }      @media (min-width: 1200px) {   --container-width: 85vw; }      /* what about max-width? */ @media (min-width: 1400px) {   --container-width: 1200px; }

breakpoints — Breakpoints (Large preview)

You’ve now unlocked two very robust units to build from:

--column-unit
--gutter-unit

Column Spans: The Third And Final Weapon

More common than building with either columns or gutters is to span across both of them:

6 column span = 6 columns + 5 gutters (Large preview)

Column spans are easy to calculate, but not very pretty to write. For spanning across columns, I would recommend using a pre-processor:

.panel {   /* vanilla css */   width: calc(6 * var(--column-and-gutter-unit) - var(--gutter-unit));      /* pre-processor shortcut */   width: column-spans(6);   }

Of course, you can use pre-processor shortcuts for every container unit I’ve mentioned so far. Let’s put them to the test with a design example.

Building Components With Container Units

Let’s take a design example and break it down:

This example uses columns, gutters and column spans. Since we’re just storing a value, container units can be used for other CSS properties, like defining a height or providing padding:

.background-image {   width: column-spans(9);   padding-bottom: gutters(6);   /* 6 gutters taller than the foreground banner */ }  .foreground-banner {   width: column-spans(8);   padding: gutters(2); }  .button {   height: gutters(3);   padding: gutters(1); }

Grab The Code

CSS: container-units-css.css
SCSS Functions: container-units-css-fuctions.scss
Demos and Documentation: Container Units

:root {   /* Grid proportions */   --grid-width: 960;   --grid-column-width: 60;   --grid-columns: 12;    /* Grid logic */   --grid-gutters: calc(var(--grid-columns) - 1);    /* Grid proportion logic */   --column-proportion: calc(var(--grid-column-width) / var(--grid-width));   --gutter-proportion: calc((1 - (var(--grid-columns) * var(--column-proportion))) / var(--grid-gutters));    /* Container Units */   --column-unit: calc(var(--column-proportion) * var(--container-width));   --gutter-unit: calc(var(--gutter-proportion) * var(--container-width));   --column-and-gutter-unit: calc(var(--column-unit) + var(--gutter-unit));    /* Container Width */   --container-width: 80vw; }  @media (min-width: 1000px) {   :root {     --container-width: 90vw;   } }  @media (min-width: 1400px) {   :root {     --container-width: 1300px;   } }

Why Use CSS Variables?

“Pre-processors have been able to do that for years with $ variables — why do you need CSS variables?”

Not… quite. Although you can use variables to run calculations, you cannot avoid compiling unnecessary code when one of the variables updates it’s value.

Let’s take the following condensed example of a grid:

.grid {   $ columns: 2;   $ gutter: $ columns * 1rem;   display: grid;   grid-template-columns: repeat($ columns, 1fr);   grid-gap: $ gutter;    @media (min-width: $ medium) {     $ columns: 3;     grid-template-columns: repeat($ columns, 1fr);     grid-gap: $ gutter;   }      @media (min-width: $ large) {     $ columns: 4;     grid-template-columns: repeat($ columns, 1fr);     grid-gap: $ gutter;   } }

This example shows how every reference to a SASS/LESS variable has to be re-compiled if the variable changes — duplicating code over and over for each instance.

But CSS Variables share their logic with the browser, so browsers can do the updating for you.

.grid {   --columns: 2;   --gutter: calc(var(--columns) * 1rem);   display: grid;   grid-template-columns: repeat(var(--columns), 1fr);   grid-gap: var(--gutter);    @media (min-width: $ medium) {     --columns: 3;   }      @media (min-width: $ large) {     --columns: 4;   } }

This concept helps form the logic of container units; by storing logic once at the root, every element in your document watches those values as they update, and responds accordingly.

Give it a try!

New Web Design Trend: Exciting Websites with Split Layouts

by TBSCategories: News

As is often the case, some trends need time to take a run and make its presence felt. The split layout is one of those representatives. Being listed in a majority of articles dedicated to web design tendencies of 2015, only now it hits its stride.

The technique is pretty simple to reproduce since it is just a structure with two columns. Nevertheless, despite the apparent primitiveness it owns some significant advantages. For example, it lets you endow things with equal importance or promote several things simultaneously.

You can give a twist to sliders or inject some life into boring static structures by using individually scrollable parts. There are so many ways of deriving benefits from it, and today we are going to examine some of them.

Web Design Using Split Layout

The Square

The Square’s ‘welcome’ screen is broken into two equal parts. The left one features a slider with images whereas the right one shows an opening speech. The solution nicely plays with the square shaped logotype and boxy vibe that is prevalent on the website.

Begona Monasterio

This e-commerce website looks modern and stylish. The one screen homepage is created on top of a split layout that allows demonstrating two products at the same time and giving them the same degree of priority. What’s more, the inner product page has an identical organization.

Jan Dlugosz

The design owes its outstanding look to unbalanced structure and an asymmetrical layout. The page is broken into two pieces, yet they are uneven, and that adds some piquancy.

HireLevel

HireLevel meets the online audience with a visually separated ‘hero’ section. In such a way the team tries to pinpoint company’s two main areas: one is for the candidate and another one is for the employer. Each segment has its image background and primary color that do not compete.

Tanweer

Tanweer has a full screen multimedia slider that consists of two boxes. The author adopts a refreshing take on the component, giving it a modern facelift. Thus, one of the parts displays an excerpt and link for further reading, and the second one houses an accompanying image.

Bump

The desktop version of Bump features a slider that much like the previous example arranges the content into two carefully delineated unequal areas. As usual, the left one is reserved for an image and the right one is for text. The solution looks visually interesting and eye-catching.

Ana Vicente

The personal portfolio of Ana Vicente feels spacious and well-balanced. The artist embraces minimalism and instills a sense of personality and charisma to the home screen. The split layout creates a harmonious symbiosis of personal touch and an informative piece.

Brux

The team opts for an asymmetrical two-column ‘welcome’ screen that puts the image and title with logotype on the center stage. The solid area on the right looks like a relatively big sidebar that houses extra information. The rest of the design is merely typical: it is based on a traditional single column structure that professionally deals with all the content.

Family Park

The website needs to cover lots of graphical and multimedia stuff, and in this case, a modular approach paired with the split layout is a win-win solution. It enables avoiding a cluttered interface and provides readers with a comfortable environment full of bright and energetic visuals.

Nicolas Errera

The desktop version of the website is neatly torn into two columns. Each one houses an individual type of information. Thus, the one that is on the left occupies the bigger part and demonstrates images and posts dedicated to artist’s awards and achievements, whereas the right sidebar includes tweets.

FullBundle

To add some artistic touch and charisma to the interface the team behind FullBundle has come up with an original idea. They have divided the front page into two parts that form a single playground. In such a way, initially the ‘creativity’ is set apart from the ‘logic’ but visitors have a chance to mix them together with the help of the cursor.

Deezer Love Roulette

The portal’s amusement is constructed on the basis of a slot machine that creates the whole buzz. There are two reels. Each one features a half portrait of a famous music artist. Keep spinning in order to find a perfect match.

Guest List

Guest List is a microsite that maintains users’ focus on the page all the time. It consists of two blocks. One that features navigation is static and used as an anchor; and one that displays the image is dynamic and scrollable and used to reveal the content of the menu options. Thanks to such realization, users are able to get access to necessary information without leaving the homepage.

McKinney York Architects

The team places emphasis on the things that many potential clients find valuable when they are looking for an agency, namely works and staff. As a result, the landing page is constructed of two images that portray these two factors.

Media Monks

This is another example in our collection that gets its wow factor from a skillfully reimagined ‘slot machine’. There are also two reels that can be scrolled. As usual, try various combinations before proceeding further.

TropFest Watch

TropFest Watch is a content-intensive website that requires a reliable grid system to operate successfully. The data is organized into the two-column structure that has managed to cover a slider and a bulk of videos and images without upsetting the harmony. Everything looks clean, neat and systematized.

HKG

This website stands out from the crowd. Its wireframe-esque design bursts with originality. Each page has two scrollable parts that you can examine individually. Here split layout fits like a glove, finishing off the theme.

D’Addario Nickel Bronze

The team leverages the two fold arrangement of videos in order to indicate differences between their two main products. The solution is interactive; you can quickly switch between the strings just by dragging the button.

Eskor

Eskor employs a slider with a split layout that presents data in an engaging way. Thus, the accompanying text that as a rule is lost against a lavish background gets some visual weight becoming more prominent to the audience.

Camper SS 16

Camper SS 16 has an interactive campaign with an immersive experience. The split layout is used in inner pages as an instrument that combines product display and its corresponding storytelling.

Conclusion

The split layout is a special case of a modular approach. It looks fresh, interesting and original. As we have seen, it is capable of improving various projects. It enriches ‘welcome’ sections, gives equal priority to important things or goods, or serves as a medium to bring entertainments into life.

Tell us which example do you find the most impressive? Do you prefer such type of an arrangement?

Onextrapixel – Web Design and Development Online Magazine

Tag: Layouts