1.4.1 — 8kb minified. Supports IE8+ and all modern web browsers. Check it out on Github. Made by Sigur Digital Agency — Sigur.io

Download

Fluid Layout

Liquid or percentage based layout has quickly become the standard way of creating responsive web sites.

Mobile first

Overwriting or undoing styles for mobile devices feels unnatural so Fluidable puts mobile first.

Responsive

Fluidable comes with four configurable break-points. Adjust them or just ignore them.

Variable Columns

Use any number of columns you like. Fluidable does not force you to use a predefined number.

Nestable

Split and include columns inside other columns using as many levels as you need.

Fixed Gutters

An important requirement for Fluidable was to have fixed gutters set in ems that conform better with typographic rules.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Markup

<div class="col-group">
	<article class="col-8 col-dt-4 col-dt-offset-0">
		<div class="col-group">
			<div class="col-6">
				…
			</div>
			<div class="col-6">
				…
			</div>
		</div>
	</article>
	<aside class="col-4 col-dt-8">
		…
	</aside>
</div>

Each set of columns is wrapped with .col-group and can contain any number of columns. Columns now use the border-box box model for increased convenience. This means less HTML to write.

Remember to wrap nested columns with its own .col-group block.

Configuration

  • @columns
  • @maxWidth
  • @gutterWidth
  • @screenTablet
  • @screenDesktop

You have five options to adapt the grid to your needs: number of columns, max width of your site, and the gutter width set in ems. The @screen variables define the responsive break points.

You can configure Fluidable for any number of columns using the @columns variable.

Columns

  • .col-mb-x
  • .col-x
  • .col-dt-x
  • .col-ld-x

Fluidable has four sets of grid classes: Mobile .col-mb-x, tablet .col-x, desktop .col-dt-x and .col-ld-x for larger screens.

Since Fluidable is mobile first, columns defined for the smallest break point (Mobile) get inherited to next one above. Each column can be defined for multiple break points.

Offset

  • .col-offset-x
  • .col-dt-offset-x

A set of classes to push a column using its left margin. This is good to use instead of creating empty columns. Use .col-offset-0 to rest the offset.

Fixed aspect ratio

  • .col-fixed-hd
  • .col-fixed-landscape
  • .col-fixed-square
  • .col-portrait

Fix the hight of a column to a specific aspect ratio. For this to work, wrap the content of the column in an element with the class .col-content. This is great for displaying grid views where all the item should be the same height.

Source order

  • .col-pull-x
  • .col-push-x
  • .col-dt-pull-x
  • .col-dt-push-x

Change the display order of columns. You can play around with the order for different break points.

Containers

  • .container

Use a conainer to wrap your groups of columns to prevent scrollbars on small and mobile screens.