Orderly - A simple, flexible grid system built for Sass

Browser Width:

Incredibly Flexible

Smart default settings make Orderly great right out of the box, but all settings can be easily adjusted. You can make your grid fluid or fixed, fractional column widths or sub-column parts. And you're not limited to a set of predefined column widths—you can choose whatever column widths you'd like on the fly.

Built for Sass

Orderly uses Sass to keep your CSS simple, your HTML semantic, and give you an unbelievable amount of control over the layout of your site. Just add a line or two to your stylesheet and Orderly will do the rest.

Not sure how to use Sass in your project? Check out cinch.

Super Responsive

Orderly is built to adapt. Whether it's changing layouts at different browser sizes, making columns stack on small screens, or showing and hiding content on the fly, this grid can handle it. No matter the screen size, Orderly can make your content look good.

How to Use

Orderly is dead simple to use. Just upload Orderly to your site folder, link to it in your SCSS, and add a few lines of code to your styles.

To get something that looks like this:

Main Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.

Just write your HTML like normal:

<body>
  <div class="sidebar">
    <h1>Sidebar Content</h1>
  </div>
  <div class="main">
    <h1>Main Content</h1>
  </div>
  <div class="sidebar">
    <h1>Sidebar Content</h1>
  </div>
</body>

Link to Orderly in your SCSS, and start adding columns:

@import '_orderly.scss';

body {
  @include container();
}

.sidebar {
  @include column(25%);
}

.main {
  @include column(50%);
}

You could also use @include column(.5);, @include column(1/2);, or @include column(6); if you'd rather use a sub-column grid (the default grid is 12 sub-columns wide).

If you use whole numbers and default settings, Orderly assumes you are setting the width of your column in sub-columns. Otherwise, it will assume that the column width you set is a fraction of the total width of the container.

Examples

Here are a number of examples on how to further use Orderly. The sass required for each column block is located in the top-right corner of each block. If you want more, make sure to check out all of the settings in the API section below.

You can also try playing with these examples at this CodePen.

Columns

Orderly uses a sub-column and fraction-based grid system. In fact, you can mix and match them as much as you'd like and Orderly will have no problem keeping up.

sub-columns

Orderly uses 12-column grid by default, but this can be changed by adjusting the $total_columns Sass variable.

column(1);

column(12);

column(6);

column(8);

column(4);

column(3);

column(5);

column(7);

fraction-based columns

Or you can use fractions to determine the width of a column relative to the width of the container.
Orderly handles fraction (eg. 1/4), percentage (eg. 25%), and decimal (eg. 0.25) values.

column(1/3);

column(75%);

column(25%);

column(1/6);

column(0.4);

column(0.6);

whatever you want

Have an unconventional grid system in mind? Don't worry, Orderly can handle it.

column(1/8);

column(3/10);

column(2/5);

column(7/40);

mix and match

And it works even with columns of different types.

column(3);

sub-column

column(1/4);

fraction

column(0.25);

decimal

column(25%);

percentage

Shifting columns left and right

To add space between columns, use the push-left() and push-right() mixins.

column(1/6);

column(2/3);
push-left(1/6);

column(2/3);
push-right(1/6);

column(1/6);

Re-Ordering Columns

The swap() mixin will swap the order of columns relative to the order they appear in the HTML. That means that content will appear right-to-left instead of the default left-to-right. (Unless, of course, you've set the default text direction to be right to left. In that case, swap() will do the opposite.)

column(1/2);
swap();

appears first in html

column(1/2);
swap();

appears second in html

Responsive Stuff

Most functions can easily be adjusted to work at various breakpoints. One breakpoint value will apply that setting to all sizes below that breakpoint. Two will apply it within that range.

Note: Try resizing your browser to see how these responsive mixins work.

For instance, add a breakpoint or two to the column() mixin and Orderly will apply the width of that column once the browser width is within the stated breakpoint. You can use more than one column() entry if you want to control how the column works at several browser sizes.

column(1/4);
column(2/3, 'md', 'lg');
column(100%, 'sm');

column(1/4);
column(1/3, 'md', 'lg');
column(50%, 0, 'sm');

column(1/4);
column(2/3, 'md', 'lg');
column(100%, 'sm');

The same rules work for push-left() and push-right().

column(1/6);

column(1/3);
push-left(1/3);
push-left(1/6, 'md', 'lg');
push-left(0, 'sm');

column(1/3);
push-right(1/3);
push-right(1/6, 'md', 'lg');
push-right(0, 'sm');

column(1/6);

Plus, Orderly comes with the handy breakpoint() mixin to let you apply your own styles at various browser sizes.

breakpoint($md) {
background: $pink;
}

breakpoint($md, $lg) {
background: $pink;
}

breakpoint(0, $lg) {
background: $pink;
}

Nested Columns

No fancy tricks here. Just place your nested columns inside your parent columns in your HTML and Orderly will do the rest.

column();

column(1/3);

column(2/3);

column(1/2);

column(1/4);

Rows

If you need to keep your content on separate lines — even if the width of the columns doesn't add up to the full width of the container — row() will do the trick.

row();

column(1/3);

row();

column(1/2);

row();

column(2/5);

Showing/Hiding content

Some content should only be visible when the browser is at certain browser sizes. The show() and hide() mixins will allow you to control this by setting at which breakpoints the content should be shown/hidden.

this column appears at smaller screen sizes

this column disappears at smaller screen sizes

Settings

Below are all of Orderly's global settings, with their default values. These settings determine the default behavior of Orderly, unless otherwise overridden by the settings when using Orderly's mixins.

// Grid Settings
$total_width: 1024px;
$total_columns: 12;
$gutter: 0px;
$auto_responsive: true;
$go_to_fluid_breakpoint: true;
$fluid_width: 90%;
$go_to_single_column_breakpoint: $sm;
$text_direction: 'ltr';

// Responsive Breakpoints
$xs: 420px;
$sm: 568px;
$md: 768px;
$lg: 1024px;
$xl: 1280px;

To adjust settings globally, set the variable to the value you would like before you include Orderly in your SCSS file, like so:

// top of your .scss file

$total_width: 800px;
$gutter: 15px;

@import 'orderly';

// your CSS here
body {
  ...

Responsive Breakpoints

breakpoint	default size	default container settings	default column settings
$xs	< 420px	fluid width (90%)	100% width of container
$sm	< 568px	fluid width (90%)	100% width of container
$md	< 768px	fluid width (90%)	maintain their designated widths
$lg	< 1024px	fluid width (90%)	maintain their designated widths
$xl	< 1280px	fixed width (1024px)	maintain their designated widths

Grid Settings

These settings define the defaults for the grid itself. They can either be overwritten generally by modifying the variable values, as mentioned above, or you can adjust them on a case-by-case basis by adjusting the values in the mixins you use.

$total_width

Sets the maximum width of the container

default: 1024px

$total_columns

Sets the number of sub-columns in the grid

default: 12

$gutter

Sets the space between columns in the grid

default: 0px;

$auto_responsive

Use default breakpoint markers to control container and column width
Nutshell: container becomes fluid below $lg screen size and columns are full width below $sm screen size

default: true

$go_to_fluid_breakpoint:

The size/breakpoint at which the layout should become fluid
NOTE: This value only works when $auto_responsive is set to true.

default: $lg

$fluid_width:

The width of the container when it becomes fluid
NOTE: This value only works when $auto_responsive is set to true.

default: 90%

$go_to_single_column_breakpoint

The size/breakpoint at which columns should stack on top of one another
NOTE: This value only works when $auto_responsive is set to true.

default: $sm

$text_direction

The direction in which text content flows in the browser. Changing this from 'ltr' (left-to-right) to 'rtl' (right-to-left) will flip the order in which the columns appear on the page.

default: 'ltr'

$width_indicator

Adds a handy little indicator, like the one in the top right of the screen, to help you see how wide your browser window is with respect to orderly's built-in breakpoints.

default: false

API

These are the core mixins that make Orderly do what it do. All parameters are optional, and the defaults were designed to work well for most uses.

container($width, $max)

container($width, $min, $max)

Sets properties on container elements

$width: width of the container

default: full container width

$min: minimum browser size at which $width will be applied

default: none

$max: maximum browser size at which $width will be applied

default: none

NOTE: Multiple container() functions can be used to change widths at various browser sizes. For instance:

.container {
    @include container(960px);
    @include container(700px, 'lg');
    @include container(100%, 'sm', 'xl');
}

column($width, $max)

column($width, $min, $max)

Sets properties on column elements

$width: number of columns to fill

default: full container width

$min: minimum browser size at which $width will be applied

default: none

$max: maximum browser size at which $width will be applied

default: none

NOTE: Multiple column() functions can be used to change widths at various browser sizes. For instance:

div {
    @include column(3);
    @include column(6, 'lg');
    @include column(12, 'md', 'xl');
}

push-left($width, $max)

push-left($width, $min, $max)

Adds margin to the left of a column

$width: width of margin to apply to left side of column

default: one sub-column width

$min: minimum browser size at which margin will be applied

default: none

$max: maximum browser size at which margin will be applied

default: none

NOTE: Similar to column(), push-left() can be used multiple times with different breakpoints

div {
    @include push-left(3);
    @include push-left(6, 'lg');
    @include push-left(12, 'md', 'xl');
}

push-right($width, $max)

push-right($width, $min, $max)

Adds margin to the right of a column

$width: width of margin to apply to right side of column

default: one sub-column width

$min: minimum browser size at which margin will be applied

default: none

$max: maximum browser size at which margin will be applied

default: none

NOTE: Similar to column(), push-right() can be used multiple times with different breakpoints

div {
    @include push-right(3);
    @include push-right(6, 'lg');
    @include push-right(12, 'md', 'xl');
}

swap()

Swaps the position of this column with the column that comes after it in your HTML

div {
    @include swap;
}

row()

Encloses columns in a wrapper prevent other columns from sitting on the same line

.container {
    @include row;
}

breakpoint($max) { /* styles */ }

breakpoint($min, $max) { /* styles */ }

Applies styles at specified breakpoint(s)

$min: minimum browser size at which styles will be applied

default: none

$max: maximum browser size at which styles will be applied

default: none

div {
    // This will be applied to all screens no bigger than $md
    @include breakpoint($md) {
    	margin: 3em;
    }

    // This will be applied to all screens at least as big as $md and no bigger than than $lg
    @include breakpoint($md, $lg) {
    	margin: 2em;
    }
}

hide($max)

hide($min, $max)

Hides an element at a certain breakpoint

$min: minimum browser size at which element will be hidden

default: 0

$max: maximum browser size at which element will be hidden

default: $go_to_single_column_breakpoint

div {
    @include hide('sm');
}

show($max)

show($min, $max)

Displays an element at a certain breakpoint

$min: minimum browser size at which element will be shown

default: 0

$max: maximum browser size at which element will be shown

default: $go_to_single_column_breakpoint

div {
    @include show('sm');
}

Other Notes

Orderly uses box-sizing: border-box to keep grid elements properly aligned. This could potentially affect (mess up) some layouts if Orderly is being added to an already styled page that depends on another form of box-sizing.
If you use a fraction-based system, be careful not to use fractions that evaluate to "1" (eg. 5/5 or 12/12). The column will probably be very short instead of the full width like you might be expecting. This is because any widths given to column() that are equal to '1' or more are evaluated as a sub-column width instead of a fraction.

In order to make a full-width column set the width to 100% (eg. '@include column(100%)').
To make images responsive, just add the column() mixin directly to an image's CSS selector and Orderly will resize it for you.