BETA This is a new service - your feedback will help us to improve it.

Style Guide

Layouts

This page is using the default application layout.

There is also a full screen map layout that is used for numerous services.

Containers

The .page-container class is used to horizontally constrain content at the highest level. It has an exact width of 990px at its smallest breakpoint, and 1020px at the largest. This includes a 15px outer margin for smaller screens and 30px for other devices.

Breakpoints

Styles are written mobile-first, use the breakpoint mixin @include breakpoint { ... } to apply styles to tablet and up.

Box Container

The .box-container class is used to surround the content with a border with a 15px indent.

Columns

Use the mixin @include column-{1,2,3}-of-6 to define how many columns the element should span across. Ensure that a containing element uses Susy's @include container mixin to correctly align rows.

Example: 6 column layout

@include container;
@include column-1-of-6;
@include column-1-of-6;
@include column-1-of-6;
@include column-1-of-6;
@include column-1-of-6;
@include column-1-of-6;

Example: 3 column layout

@include container;
@include column-2-of-6;
@include column-2-of-6;
@include column-2-of-6;

Example: 2 column layout

@include container;
@include column-3-of-6;
@include column-3-of-6;

Typography

Headings

Heading 1

Heading 1 (.h1-constant)

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fugiat similique consequuntur iusto voluptatem esse provident. Inventore aperiam reiciendis alias porro rem assumenda voluptates cumque nobis aspernatur distinctio pariatur, dignissimos!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi neque quas, reiciendis distinctio fugiat modi officia accusamus vel reprehenderit, aliquid excepturi, architecto labore amet a tempora minima quod libero officiis eligendi deserunt repudiandae placeat similique! Cumque excepturi, veniam officiis, a magnam voluptatibus quo, tenetur velit enim nostrum minima quis. Animi modi delectus, architecto nulla vero eveniet quidem accusantium, excepturi debitis et autem id sit mollitia, molestiae dolores dicta eos eaque aperiam dolorem quia! Nam.

Links

Link
Visited link
Link in hover state
Link in focused state

Buttons

Link Disabled Link

Fields

Text input fields

File input field

Textarea

Select boxes

Radio buttons

Forms

Inline

Integrated

Breadcrumbs

Use the BreadcrumbHelper to generate a breadcrumb navigation. Breadcrumbs should not include the current page as this will be shown in the page heading.
<%= breadcrumbs(
  { title: "Home",             url: "/" },
  { title: "School Directory", url: "/schools" }) %>

Boxed sections

Title of service

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, nulla, possimus. Ab nisi, saepe itaque esse ut beatae ea fuga. Quam eius blanditiis veniam voluptates, cupiditate dicta vel. Earum, fuga.

Title of service

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, nulla, possimus. Ab nisi, saepe itaque esse ut beatae ea fuga. Quam eius blanditiis veniam voluptates, cupiditate dicta vel. Earum, fuga.

Title of service

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, nulla, possimus. Ab nisi, saepe itaque esse ut beatae ea fuga. Quam eius blanditiis veniam voluptates, cupiditate dicta vel. Earum, fuga.

Boxed sections (alert)

Title of service

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, nulla, possimus. Ab nisi, saepe itaque esse ut beatae ea fuga. Quam eius blanditiis veniam voluptates, cupiditate dicta vel. Earum, fuga.

Boxed sections (flat)

Title of service

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, nulla, possimus. Ab nisi, saepe itaque esse ut beatae ea fuga. Quam eius blanditiis veniam voluptates, cupiditate dicta vel. Earum, fuga.

Tabs

Catchment areas:
Infant - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi dolores suscipit magnam laudantium vel, eveniet, vero aspernatur maxime debitis consectetur fugit minus hic similique tenetur inventore alias esse praesentium consequatur.
Junior - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis eveniet tempora neque molestias impedit numquam libero inventore dicta unde, blanditiis, voluptate, delectus cumque totam praesentium rem voluptas. Hic, a dolores?
Secondary - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, et esse inventore. Sit quibusdam provident rerum assumenda vel at, magni asperiores nobis. Voluptatibus, officiis odit nobis. Laboriosam rerum tempore, ipsam!