Browser Width:

orderly

the world's best,
easiest, most flexible *
How flexible?

Orderly is able to make grid systems as complex as these colorful bars without any special code—right out of the box.


grid system

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(1);
column(1);
column(1);
column(1);
column(1);
column(1);
column(1);
column(1);
column(1);
column(1);
column(1);
column(12);
column(6);
column(6);
column(8);
column(4);
column(3);
column(3);
column(3);
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(75%);
column(25%);
column(1/6);
column(1/6);
column(1/6);
column(1/6);
column(1/6);
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(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.

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(2/3);
column(1/2);
column(1/4);
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();
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

column(1/2);
hide('md');

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

breakpointdefault sizedefault container settingsdefault column settings
$xs< 420pxfluid width (90%)100% width of container
$sm< 568pxfluid width (90%)100% width of container
$md< 768pxfluid width (90%)maintain their designated widths
$lg< 1024pxfluid width (90%)maintain their designated widths
$xl< 1280pxfixed 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