====================================
====================================
Creatives don't like being dictated to or told how many columns their layout has to have or having a whole bunch of other junk CSS that you have to load and overload. Flux layout solves this - it's a fully dynamic responsive layout system with extensive built-in media queries and logically named CSS classes.
Use either the static CSS version, or the PHP version if you wish to generate your own grid system and media queries. Change on the fly on a per view basis, create and minify your own static CSS file... it's the responsive layout system built to be as flexible as possible!
It includes normalise.css along with a small amount of other general rules (including all WordPress core required CSS) - no other button styling (who wants the same looking buttons as everyone else?!), cruft or junk to clutter up your files. Lean and mean - if you minify the file & enable server compression you can get it down to less than 5k - light enough for you?!
Download, unzip if required and take a close look at:
examples/01-basic-responsive.htm
this file contains lots of comments and demonstrations of use Flux Layout.
You have 3 options on how to use Flux Layout:
- Flux Layout CSS - uncompressed development version (readable)
Change Flux Layout stylesheet path to:
"../lib/flux-layout-static.css"
Flux Layout CSS - compressed production version
Change Flux Layout stylesheet path to:
"../lib/flux-layout-static-min.css"
Flux Layout Dynamic - Dynamic PHP generated responsive grid system
Change Flux Layout stylesheet path to: "../lib/flux-layout-dynamic.php?wu=percent&w=80&p=middle&sbp=left&c=16&r=2-4-10&g=2&mqmin=y"
Use the following URL parameters to generate your custom responsive grid system:
- wu = Unit (percent, pixels - default: percent)
- w = Width of main container (number - default: 80, max: 100% or max: 4000px)
- p = Position of main container (left, middle, right - default: middle)
- sbp = Sidebar position (left, right - default: left)
- c = Number of columns (number - default: 16, max = 100)
- r = Range of additional column setups - defined as a hyphen (-) separated list of numbers (2-4-5-12, default: none)
- g = % gutter between columns (number - default: 2, max: 25)
- mqmin = Remove rarely used rules in media queries - recommended - reduces output by over 50%! (y, n, default: y)
This project is in a flux of development (apologies for the corny joke!) - so ALL suggestions/bug swattings welcome - just leave an issue ticket on Github! In it's current form it's fully functional without bugs and there are a couple of ideas for additional functionality that I'm trying out and a-little work to do on columns.
Flux Layout has been developed as part of the free, Open Source Wonderflux Theme Framework for WordPress - http://wonderflux.com