Skip to content

Documentation

Layout is a mobile-first responsive CSS framework built with a focus on less bloat and sensible default styles that are easy to learn, use, and customize. Instead of being a bloated static layer beneath your project, Layout is meant to be a dynamic organized starting point that can grow with your project. Layout's total footprint, minified and gzipped, is only about 4.5 KB and doesn't require any dependencies. It uses the SCSS version of Sass and some of the latest features CSS has to offer such as Flexbox. It's also tested to be compatible with the latest versions of Chrome, Firefox, Safari, Edge, and Opera web browsers.

Grid

You can position elements using a grid based on flexbox with the .row, .col, .col-b1, .col-b2, and .col-b3 classes. The b stands for breakpoint. The .col and .col-* classes will automatically size any number columns equally, but all have different breakpoints. The .col class works on any screen size, .col-b1 works from breakpoint 1 and larger, .col-b2 works from breakpoint 2 or larger, and .col-b3 works on breakpoint 3 and larger. You can also add more breakpoints as needed.

.col
.col
.col-b1
.col-b1
.col-b1
.col-b2
.col-b2
.col-b2
.col-b2
.col-b3
.col-b3
.col-b3
.col-b3
.col-b3

Your content should always be within a column, and that column should always be within a row. You can also responsively define the column size based on a 12-column grid. You can make any class responsive just by adding *-b1, *-b2, or *-b3 to the class name, but before a number if it contains one.

.col-6
.col-6
.col-b1-5
.col-b1-7
.col-b2-4
.col-b2-8
.col-b2-3
.col-b2-9
.col-b3-2
.col-b3-10

Containers are optional and can be added when needed. You can also add a .gap to containers or rows, .align rows to containers, responsively offset columns by a specified amount with the .off-* class, embed rows within rows, and add a grid .outline for development or debugging purposes.

.off-4
.row
.col-b1-4
.off-b1-4
.off-b2-4
.col-b2-2
.off-b3-2
.off-b3-4

You can even .reverse columns, reorder columns to be .first or .last in a row, and change the row alignment or distribution of columns.

1
2
3
1
2
3
4
.center
.end
just
some
content
.middle
some
more
content
.bottom
.around
.around
.around
.between
.between
.between

Type

Headings are some of the most important elements thoughout your page. A page should contain only a single h1 element, which is given the most importance. Headings should be used like a heirarchy defining the sections thoughout your page.

1st Level Heading

2nd Level Heading

3rd Level Heading

4th Level Heading

5th Level Heading
6th Level Heading

Horizontal lines also have a nice default style:


You can use inline elements to markup your text including:

anchor, strong or bold, emphasis or italics, insert or underline, delete or strike, abbr or definition, sub or sup, small, and mark.

Use blockquote elements for something someone once said. Someone

Here's a few more paragraphs with some lorem ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam risus lorem, efficitur malesuada magna vel, pretium blandit diam. Morbi quis porttitor justo, quis condimentum dolor.

Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse vitae purus sit amet mauris commodo sagittis mattis vitae mi. Cras ultrices metus at ligula congue tempor.

Donec sit amet eleifend massa, quis porttitor mi. Phasellus sed urna ante. In hac habitasse platea dictumst. Integer porttitor lacus ante, ac tristique tortor ultrices a. Fusce at venenatis massa.

Use code elements to automatically highlight inline code alert('Hello, world!'); or use a code element wrapped inside of a pre element for blocks of code.


function sayHello(hello) {
  hello = hello === undefined ? 'Hello, world!' : hello;
  alert(hello);
}
sayHello();

Lists

Lists are not used for site navigation, and instead work like regular lists by default. This is an unordered list of items.

  • Item
    • Item
    • Item
    • Item
  • Item
  • Item

Ordered lists work much like unordered lists except they're numbered.

  1. Item
    1. Item
    2. Item
    3. Item
  2. Item
  3. Item

This is a definition list.

Term
Definition
Term
Definition
Term
Definition

Tables

The styles for the native table, tr, thead, th, tbody, td, and tfoot elements have clean minimal look by default.

Title 1 Title 2 Title 3 Title 4
Data 1 Data 2 Data 3 Data 4
Data 1 Data 2 Data 3 Data 4
Data 1 Data 2 Data 3 Data 4
Total 1 Total 2 Total 3 Total 4

Make tables responsive by adding the .table-b1, .table-b2 or .table-b3 class. You can also use the data-th attribute to create responsive table headings.

Title 1 Title 2 Title 3 Title 4
Data 1 Data 2 Data 3 Data 4
Data 1 Data 2 Data 3 Data 4
Data 1 Data 2 Data 3 Data 4
Total 1 Total 2 Total 3 Total 4

Forms

Consistent styles are applied to native input, select, and textarea elements by default. Use the grid to help position form elements. You can use the .error class to highlight fields with errors. The .help and .help-error class can be used to add extra help text to fields as well.

This field is required.
Select one of the above options.
Choose one
Check all that apply

Use the .alert class or a combination with .alert-success, .alert-warning, .alert-error, or .alert-info for different alert messages.

.alert
.alert-success
.alert-warning
.alert-error
.alert-info

All button and input elements of type button, submit, and reset are automatically styled by default. You can change the default button styles by using any combination of the btn-* classes below. The .btn class can even be used on anchor elements.

Anchor
Grid Type Lists Tables Forms GitHub