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

Option one Option two

Option three (error state)

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" }) %>