Flux Layout demonstration

A responsive layout demo for the Flux Layout CSS framework

Download from GitHub or visit the project page

Introduction

Flux Layout can be used in a number of different ways:

  1. As a static CSS file.
  2. Dynamically generated on every page visit, with your own custom (multiple!) grid configration.
  3. By creating a child theme using the free Wonderflux theme framework.

First things first...

Wrap your content in two block level elements - like <div> or <section> as below. The first has a class of wrapper, the second has a class of container.

<div class="wrapper">
 <div class="container">
  ... content goes here ...
 </div>
</div>

Optionally, you can add an additional block level element inside these (see the note on columns below), with a class of row to keep rows of elements together in a row. This is essentially a 100% width container (of the parent container).

<div class="wrapper">
 <div class="container">
  <div class="row">
   ... content goes here ...
  </div>
 </div>
</div>

Media queries naming convention

With the standard Flux Layout configuration you get 4 breakpoints aimed at a broad screen types/user experiences, rather than individual devices.

All media query specific CSS classes start with:
.mq-tiny- Very small screens like portrait phones
.mq-small- Lower spec landscape phones and some portrait tablets
.mq-medium- Standard computers and landscape tablets
.mq-large- Large, high resolution computer screens (like retina) and HD TV's

Media Query visibility

The section below demonstrates basic show and hide classes. By using the classes indicated we can also see the breakpoints in action.

> ACTIVE <

 

TINY

> ACTIVE <

 

SMALL

> ACTIVE <

 

MEDIUM

> ACTIVE <

 

LARGE

> > SHOW FOR TINY < <

.mq-tiny-show

.mq-tiny-hide

HIDE FOR TINY

> > SHOW FOR SMALL < <

.mq-small-show

.mq-small-hide

HIDE FOR SMALL

> > SHOW FOR MEDIUM < <

.mq-medium-show

.mq-medium-hide

HIDE FOR MEDIUM

> > SHOW FOR LARGE < <

.mq-large-show

.mq-large-hide

HIDE FOR LARGE

Columns demo

There are 2 kinds of column system in Flux layout - they begin with either box- or column-

NOTE: Column classes currently do not have responsive equivalents, they are a work in progress. The issue is that when they hit breakpoints and reflow, you need different gutters (spacing) between the columns.

Column system 1: box- class variable widths

By combining core box- classes with media query sizes gives you a powerful responsive system. You should note the classes that contain -min- these will retain this size at all lower media query sizes.

1) A row of two responsive divs

All divs have the same CSS classes applied: box-1-2 mq-small-min-box-1-1

1.1) I am 1-2 size until the screen gets small, then I go to full width.

1.2) I am 1-2 size until the screen gets small, then I go to full width.

2) A row of four responsive divs

All divs have the same CSS classes applied: box-1-4 mq-small-box-1-2 mq-tiny-1-1

2.1) I am 1-4 size, at small I go to half size and at tiny I go full width.

2.2) I am 1-4 size, at small I go to half size and at tiny I go full width.

2.3) I am 1-4 size, at small I go to half size and at tiny I go full width.

2.4) I am 1-4 size, at small I go to half size and at tiny I go full width.

3) A row of eight responsive divs

All divs have the same CSS classes applied: box-1-4 mq-large-box-1-8 mq-tiny-box-1-2

3.1) I am 1-4 size, at large I go to 1-8 size and at tiny I go half width.

3.2) I am 1-4 size, at large I go to 1-8 size and at tiny I go half width.

3.3) I am 1-4 size, at large I go to 1-8 size and at tiny I go half width.

3.4) I am 1-4 size, at large I go to 1-8 size and at tiny I go half width.

3.5) I am 1-4 size, at large I go to 1-8 size and at tiny I go half width.

3.6) I am 1-4 size, at large I go to 1-8 size and at tiny I go half width.

3.7) I am 1-4 size, at large I go to 1-8 size and at tiny I go half width.

3.8) I am 1-4 size, at large I go to 1-8 size and at tiny I go half width.

Traditional mixed width columns (with gutter) - 16 columns

Basic, non-responsive demo

1-1

13-16

2-16

3-16

9-16

4-16

5-16

5-16

6-16

Traditional mixed width columns (with gutter) - 10 columns

Basic, non-responsive demo

1-10

7-10

2-10

3-10

3-10

4-10

Responsive images

To make images scale to their containers rather than overflow, just add the css class: fluid-content to the image.

Responsive containers

Or you can add the css class: fluid-content to the container (no additional image classes required).