Text utilities

Some helper utilities are included for decorating and laying out text.

Icons

By default, a set of icons from IcoFont is included (there are more than shown here). Replace this with something else if you want. For more documentation on these icons, see here, and refer to reset/icons.

Colors

A set of all available color palettes can be found in config/colors, including grey palettes for warm, neutral, or cool tones. The color system is meant to hold multiple possible color palettes at a time, and switch between palettes by changing a variable, which points to a color palette map. You can use as much or as little of this system as you like, but if you are starting a new project, at a minimum, you should make sure that in config/colors you have a "primary" color set.

Here are the colors included in the current color palette.

Color names and values are then mapped to semantic labels. Here is the current set of mappings.

Modules like Blocks can be styled using these colors, either by thier explicit names (blue, red, teal), or semantic names (primary, secondary, warning).

Greys

Greys use the neutral grey palette by default, this can be changed in config/colors. There are 3 different grey palettes available.

Buttons

The following elements will all trigger button styles to be applied: .button, input[type='submit'], input[type='button'], button. Below are some examples of the different options available for buttons. A .button-row component is also available in reset/forms for composing rows of buttons.

Buttons can also have icons.

Buttons can use the bordered style.

Buttons can have their color explicitly defined.

Or you can use the semantic color names.

Button classes can be combined in many different ways.

Forms

Forms should be composed using the column system. label should wrap both the input and a div.label. This attempts to be a starting point, not a monolithic CSS framework for styling forms.

Different styles of forms can be composed using the column system. You can inspect these example forms to see the HTML markup recommended.

Select box plugins

Basic implementations of chosen.js and select2.js select box plugins.

Viewports

Inside config/viewports there is a map containing information about the current viewport set, and some helper shorthand functions: above(), below(), and between() which simply abstract away media query syntax into something more readable. There is also a v() function, which looks up a viewport from the viewport map.

Your current active viewport is just above the "" viewport. To target this size using the shorthand functions, you would write @include above(v('')).

Here is the current list of viewports:

Margin and padding

Generally, elements should have an appropriate amount of space in between each other by default. However, utility classes exist to set margin/padding on a per-element basis without writing custom CSS rules for a simple margin fix.

For example, applying the class .mb-2 to an element will give it a bottom margin of increment "2" (this is the $baseline variable multiplied by 2 or bl(2)). Steps exist at 0.25 increments between 0 and 3 for all directions of margin and padding using this syntax.

Here are some further examples:

Columns

Percentage based column system using floats. Supports any division of columns from 1/12 to 1/2. Wrap columns in a .column-row. Syntax for individual columns is natural and readable. Gutters can be set using CSS classes, or manually with the make-gutters mixin. Some basic styling for making this a responsive system exists, but each layout is different and should be tweaked accordingly (do this globally within reset/layout, or at the level of individual modules).

            
// These columns all go to full width below 'small'
@include below(v('small')) {
  .one-third,
  .one-half,
  .one-fourth,
  .three-fourths,
  .two-thirds {
    width: auto;
    float: none;

    &:not(:last-child) {
      margin-bottom: $bl;
    }
  }
}
            
          

Collapsing hamburger navigation

This is an example module demonstrating a hamburger icon and attached sidebar navigation. When your viewport is below a certain size, you will see the hamburger icon: otherwise you see a plain navigation strip.

This is a basic implementation with animation, a sliding right nav, and underlay. You will need to customize global/collapsing-nav with project-specific customizations you would like to make (for example making the menu icon a fixed-position element).

To show the navigation, add the class .collapsing-navigation-is-active to the body element. There is a small bit of javascript on this page to do this for you, but you should customize this for your own project.

Modals

This is an example module demonstrating a modal component. Modal should scroll when content is too tall for the the viewport height. This is meant to be a basic implementation, you should customize global/modals on a per-project basis according to your needs.

To show the modal, add the class .is-active to the .modal-wrapper element (in the DOM currently, it is right below this paragraph). There is a small bit of javascript on this page to do this for you, but you should customize this for your own project.

Show modal with example form Show scrolling modal

Tooltips

Padded box

This is a simple module for creating padded boxes around content.

This module can be purposed to create inline alerts, banners, etc.

Blocks

Blocks are strips of content that run across the full width of the page, with an inner container at a default maximum width of (configurable in config/layout). Every block has a .block-wrap surrounding a .block-inner. Options are available to control the padding and background colors of a block, or add photographic backgrounds and overlays.

Composed layouts

Below are some live examples of layouts composed with columns and blocks. You can inspect the examples here to see the markup and CSS used to compose these layouts.