Home / W1N style guide

The Grid

This template system uses a fluid, mobile-first grid system powered by flexbox and based on simple fractions—halves, thirds, and fourths. It supports nesting, and includes special classes for offsets and content choreography.

The Base Grid

The .container class centers content on the page and restricts it to a maximum width.

To create a grid, add a div with a .row class. You can create grids within a row by creating div elements with the .grid-$size class. The .grid-auto class will scale the content to fit whatever space is available.

Offsets

Push grids to the right by adding an .offset-$size class.

Alignment

Align content at the beginning of the row by adding the .row-start class, to the end of the row by adding the .row-end class, and in the center by adding the .row-center class.

Align content at the top by adding the .row-top class, in the middle with the .row-middle class, and at the bottom with the .row-bottom class.

Grids on Small Screens

The grid activates on medium-sized screens by default. You can toggle the grid on smaller screens by adding a simple.row-start-xsmallor .row-start-small to the desired .row element.

Extra Small Screens

Small Screens

Content Choreography

You can flip the order of grid items on bigger screens with a series of helper classes. Add the .grid-first class to move content to the beginning of a row, and the .grid-last class to move it to the end. Add the .row-reverse class to reverse the entire order of content in a row.

Wrapping Grids

You can create grids that dynamically wrap content based on available spacing by adding the .row-wrap class and using the .grid-auto class. The content inside each grid also needs to have a width or max-width assigned to it.

Typography

This template system uses relative sizing (ems and %, not pixels) for everything.

The body has a base font-size of 100%, which is 16px on browsers with default font settings. All other sizes are in ems. Changing the font-size on the body element will adjust the typographical scale for the entire site.

Text Basics

Default text
Muted text
Small text
Large text
Hyperlinks
Bold, italics, and strikethrough
Highlighted text

Because this template system uses relative sizing, you should always apply .text-tall and .text-small classes to a element and not directly to a p. Otherwise, your spacing will get all messed up. The .text-* classes can be found in _overrides.scss for better cascade inheritance.

Lists

This template system includes styling for ordered, unordered, unstyled, inline, and definition lists.

Definition List

Encloses a list of pairs of terms and descriptions. Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).

Here’s another term

And here’s the definition that would go with it.

For semantic reasons, .list-unstyled and .list-inline should only be applied to unordered lists.

You can also include superscripts¹ and subscripts_xyz.

Headings

This template system includes styling for h1 through h6 headings.

h1. Heading 1

h2. Heading 2

h3. Heading 3

Semantic Heading Classes

All heading values can also be applied as classes. For example, if a heading should be an h1 element semantically, but you would like it to be styled as an h4 element, you can apply class="h1" to the h3 element.

This is an h3 that's styled as an h1 heading.

Quotes & Citations

Someone once said something so important, it was deemed worthy of repeating here in the form of a blockquote. This is that blockquote. —Someone Important

Lines

Add lines to your markup using the hr element.

Colors

Site brand

State colors (used primarily for form validations)

Greyscale

Buttons

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only a, button, and input type="submit" elements for the best rendering.

Basic Buttons

Active and Disabled Buttons

Use the .active class and [disabled] attribute to change the appearance of buttons—useful for creating apps.

Tables

This template system includes simple, easy-to-read table styling.

Condensed Table

Add the .table-condensed class for more compact tables.

Zebra Striping

Add zebra striping for easier readability with the .table-striped class.

Forms

Labels, legends and inputs are styled as full width block elements (with the exception of checkboxes and radio buttons).

Basic Forms

Wrap checkboxes and radio buttons inside a to make them easier to click.

Condensed & Inline Inputs

For smaller forms, add the .input-condensed class to your input fields. For inline form elements, add the .input-inline class.

Search Forms

Apply special styling to search form elements using the .input-search and .btn-search classes. You'll also need to use the .input-inline class.

Alignment, Spacing & Visibility

You can adjust text alignment, spacing, and visibility using a few simple CSS classes.

Text Alignment

Floats

Clear floats by wrapping floated content in a div with the .clearfix class.

Margins

Padding

Visibility

Hide content using the [hidden] attribute.

If you have text that you don’t want displayed on screen, but that should still be in the markup for screen readers (for example, a search form label), simply apply the .visually-hidden class.