WAISTCOAT

by @Octavector

Download Waistcoat

Version 1.1.0

NEW

Waistcoat is a CSS framework for creating responsive websites and apps. Waistcoat was made for developers and designers who want a modern, flexible grid system without battling preset styles and classes.

Key features:

  • Based on a 16 column grid
  • Uses Flexbox
  • Uses data attributes, not classes
  • Extremely lightweight
  • No JavaScript
  • Provides virtually no visual styling by default

The Grid System

Waistcoat deliberately moves away from targeting common device media queries, instead opting to provide a spread of breakpoints that span the journey from mobile to desktop.

Breakpoint ID Width (em) Width (pixels)
Alfa al 0 0
Bravo br 25em 400px
Charlie ch 31.25em 500px
Delta de 43.75em 700px
Echo ec 56.25em 900px
Foxtrot fo 75em 1200px
Golf go 93.75em 1500px

Set up

To start using Waistcoat in your project. Simply link to the css file within the head of your document.

As with all responsive documents, you will also need to add the appropriate viewport meta tag.

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" media="all" href="waistcoat.min.css">

Back to top

Getting Started

Let’s jump right in a with a basic but functional example.

First we create a row which will hold all of our columns. We make a div and give it the data attribute data-layout="_r" this tells Waistcoat that this div will act like a row which is expected to contain and manage columns.

Within the row we add four column divs, each with the data attribute data-layout="de8 fo4". Let’s break down the components in this data attribute as a lot is going on:

The de8 is a responsive instruction, it tells Waistcoat that at breakpoint Delta ( 43.75em | 700px ), this column should be half the widths of its parent element (8 represents half within the 16 column grid).

The fo4 is another responsive instruction, it tells waistcoat that at breakpoint Foxtrot ( 75em | 1200px ), this column should be a quarter of the width of its parent element (4 represents a quarter within the 16 column grid).

Below is a live example, some additional aesthetic stylings have been added for presentation purposes.

<div data-layout="_r">
  <div data-layout="de8 fo4">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div data-layout="de8 fo4">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div data-layout="de8 fo4">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div data-layout="de8 fo4">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>

Back to top

Live example: getting started

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

A More Complex Example

Let’s look at another example that has more going on.

As per the previous example, First we create a row which will hold all of our columns. We make a div and give it the data attribute data-layout="_r" informing Waistcoat that this div will contain a number of columns.

Then we create six column divs within our row div. As you can see there are some differences in the properties of the data-layout attributes belonging to these six divs. First let’s look at the values they share.

All of the column divs have a al-half value. This tells Waistcoat that at breakpoint Alfa ( 0px | default ), this column should be half of the width of its parent element. al-half is an easier to use equivalent of al8 , they produce the same results. In this example we are telling Waistcoat that on the smallest screen sizes we want to start immediately with a 2 column grid.

All of the column divs have a ec-third value. This tells Waistcoat that at breakpoint Echo ( 56.25em | 900px ), this column should be a third of the width of its parent element.

At breakpoint Foxtrott some of the divs do different things. Some have the instruction fo-half This tells Waistcoat that at breakpoint Foxtrot ( 75em | 1200px ) this column should be half the width of its parent element. Some have the instruction fo4 which tells Waistcoat that at breakpoint Foxtrot, this column should be a quarter of the width of its parent element (4 represents a quarter within the 16 column grid).

Below is a live example, some additional aesthetic stylings have been added for presentation purposes:

An important observation from the above example, is that at breakpoint Foxtrot our row div actually contains two equal rows. They are equal because at point Foxtrot the width values of each row add up to 16:

Fo-half (8) fo-4 fo-4

<div data-layout="_r">
  <div data-layout="al-half ec-third fo-half">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div data-layout="al-half ec-third fo4">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div data-layout="al-half ec-third fo4">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div data-layout="al-half ec-third fo-half">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
    <div data-layout="al-half ec-third fo4">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div data-layout="al-half ec-third fo4">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>

Back to top

Live example: A More Complex Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Changing Column Order

You can change the order the columns appear at each breakpoint, look at the example below:

ch-third tells waistcoat that at breakpoint Charlie ( 31.25em | 500px ) this column should be a third the width of its parent element. Additionally the responsive instructions ch-o3, ch-o2 and ch-o1 dictate to waistcoat that these columns should be ordered dfferenty at breakpoint Charlie.

The two prefix letters represent the breakpoint ID (ch for Charlie) The -o signifies that we are dictating a new order The number immediately following -o is the new position number (1-16).

Then at Breakpoint Echo the ordered is restored to normal with the instructions ec-o1, ec-o2 and ec-o3

<div data-layout="_r">
  <div data-layout="ch-third ch-o3 ec-o1">
    <p>Column: 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div data-layout="ch-third ch-o2 ec-o2">
    <p>Column: 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div data-layout="ch-third ch-o1 ec-o3">
    <p>Column: 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>

Back to top

Live example: Changing Column Order

Column: 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Column: 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Column: 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Nudging

You can add nudges to columns to generate white space and gaps in your layout, look at the example below:

By adding ch-n4 to the layout data attribute, we are telling Waistcoat that at breakpoint Charlie (31.25em | 500px), we want this element to nudge its neighbouring elements to the left by 4 columns. This will generate white space between this element, and the element to its left.

To remove the nudge effect, we additionally add fo-n0 to the element's layout data attribute. This instructs Waistcoat that at breakpoint Foxtrott remove the nudging effect entirely. fo references the breakpoint ID and n0 specifies that we wish to apply 0 nudging to the element.

We could have used go-n0 and only have the nudge effect removed when breakpint Golf is reached (93.75em | 1500px).

<div data-layout="_r">
  <div data-layout="ch4 ">
    <p>Column: 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
    <div data-layout="ch4 ch-n4 fo-n0">
    <p>Column: 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
    <div data-layout="ch4 ">
    <p>Column: 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>

Back to top

Live example: Nudging

Column: 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Column: 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Column: 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.