Fluidable

Markup

<section class="col-group">
	<article class="col-4 offset-4">
		<div class="col-content">
			…
		</div>
	</article>
	<article class="col-4">
		<div class="col-content">
			…
		</div>
	</article>
</section>
							

Each row or set of columns is wrapped with .col-group and each columns content should be wrapped with .col-content. Fluidable markup structure makes heavy use of the content wrapper to get fixed gutters, inset columns, and other features without resorting to any selectors that lack support in older browsers.

Configuration

• @columns
• @maxWidth
• @gutterWidth

You have three options to adapt the grid to your needs: number of columns, max width of your site, and the gutter width set in ems.

Columns

• .col-1
• .col-2
• .col-3
• .col-4
• .col-5
• .col-6
• .col-7
• .col-8
• .col-9
• .col-10
• .col-11
• .col-12
• .col-13
• .col-14
• .col-15
• .col-16
• .col-17
• .col-18

Fluidable comes configured for up to 18 columns using the @columns variable. It is also easy to add support for any other number of columns you may need for your design.

Nested

• .col-full
• .col-half
• .col-third
• .col-fourth
• .col-fifth
• .col-sixth

The width of a nested group is always set at a 100%. This is why the numbered column classes above might give unexpected results when doing nested columns. These fractional classes work for both nested and top level columns.

Golden Ratio

• .col-golden-a
• .col-golden-b

Special classes for using the golden ratio, .col-golden-a gives you the larger quantity, 61.803399%, while the smaller .col-golden-b is 38.196601%.

Offset

• .offset-1
• .offset-2
• .offset-3
• .offset-4
• .offset-5
• .offset-6
• .offset-7
• .offset-8
• .offset-9
• .offset-10
• .offset-11
• .offset-12
• .offset-13
• .offset-14
• .offset-15
• .offset-16
• .offset-17

A set of classes to push a column using its left margin. This is good to use instead of creating empty columns.

Inset

• .col-inset

Use the .col-inset class when you want your column to be inset and have some extra weight in your design.

Center

• .center-block

A simple shortcut for centering a container horizontally using margin: 0 auto;