Flexible CSS layout models for Rails using Polyfills

Polyfills for various HTML 5 "more flexible" layout models.

• Flexie.js (Flex box layout)
• Regions.js (CSS Regions)
• CSS Multi-column
• CSS Template layout

Flexie.js is a polyfill for the CSS3 Flexbox module from W3C.

CSS Template Layout is an implementation of CSS Template Layout Module from W3C. Currently 2 different implementions are packaged in this gem.

Regions.js is the first implementation for the CSS3-Regions in the real world.

These polyfills are all packaged for use with the Rails asset pipeline. This lets you use and experiment with the new HTML5 CSS layout model in order to simplify and improve your HTML grids and layout :)

In addition a stylesheet called flexlayout.css is included, which wraps the Flex layout model in order to provide some nice utility CSS classes. See the examples in spec/flexlayout for a usage demo.

• Wookmark-jQuery
• FT-column-flow

html5_script folder = nil

<!--[if lte IE 8]><script src=\"html5-forms/html5.min.js\" type=\"text/javascript\"><![endif]-->

No args:

"<!--[if lte IE 8]><script src=\"http://html5shim.googlecode.com/svn/trunk/html5.js\" type=\"text/javascript\"><![endif]-->"

script_src_tag src

Renders fx:

<script src=\"html5-forms/html5.min.js\" type=\"text/javascript\">

gem 'flexlayout-rails'

//= require flexie

Flexie usage

var box = new Flexie.box({
    target : document.getElementById("foo"),
    orient : "horizontal",
    align : "stretch",
    direction : "normal",
    pack : "start",
    flexMatrix : [1, 1, 1, 1],
    ordinalMatrix : [0, 0, 0, 0]
});

The function flexiebox wraps this to support are more intuitive DSL, using jQuery to select the element to use as the target:

var box = flexiebox('#foo', options);

Defaults options:

DEFAULTS = {
  orient    : "horizontal",
  align     : "stretch",
  direction : "inherit",
  pack      : "start"
}

Note: Flexbox comes in different syntaxes as described here. The latest flex- syntax is only supported by Chrome 21+ as shown here. Hence you need fallback in your CSS:

selector 
{ display: flex }

.no-flexbox selector 
{ display: box }

= flexie_script

Renders:

<!--[if lte IE 8]><script src="js/flexie.js"></script><![endif]-->

The following stylesheets with CSS helper classes are included.

• flexlayout.css
• flex-box-helpers.css

Also SCSS mixins at flex-layout.scss

Better yet to use Compass box mixins

@import "compass/css3"

.example {
  @include display-box;
  @include box-orient(horizontal);
  @include box-align(stretch);

  ...
  .content {
    @include box-flex(1);
  }  
} 

Or fx Preboot if using LESS.

.content {
  .box-flex(1);
}

Flexbox Articles

• Flexbox quick guide
• Flexible box layout explained
• Understanding flexbox

Critiques:

• Why Flexboxes Aren't Good for Page Layout
• Flexbox vs Princess Bride

Conclusion: As is almost always the case, they are good only if used in the right context to solve the right problem ;)

If you find this interesting, just try this script!

Regions.js requires jQuery and Lettering.js in order to work.

//= require jquery
//= require lettering.jquery
//= require regions.jquery.min

The feature-detects/cssregions Modernizr detection included is part of Modernizr 2.6+ and supplied by Adobe.

if (!Modernizr.cssregions) {
  // use regions polyfill
}

Regions.js API usage

$(function(){ // When DOM is Loaded
    $("#article-flow").regions(".article-region");
});

You can also pass a jQuery Object or a list of jQuery Objects / jQuery Selectorstring to the function :

$("#content-source-element").regions($(".content-target-elements"));

// or

$("#content-source-element").regions(["#article-region-1", "#article-region-2", "#article-region-3"]);

// or

$("#content-source-element").regions([$("#article-region-1"), $("#article-region-2"), $("#article-region-3")]);

// even mixed

$("#content-source-element").regions([$("#article-region-1"), "#article-region-2", $("#article-region-3")]);

//= require template_layout/templateLayout

Not sure how/if to use the template generator and compiler!?

//= require template_layout/jquery/jquery.tpl_layout1.1.16.min

Alexis Deveria version, see repo css-template-layout and these demos :)

Pablo Escalada version, see repo at cssTemplateLayout and test folder for examples.

See Multi-column

Example:

<div class="multi-column">
  <div class="column">hello</div>
  ...
</div>

Note: Use the multi-column.css included as well ;)

//= require jquery.wookmark.min

See Wookmark-jQuery for examples and demos.

//= require FT-colum-flow.min

• Configurable column widths, gutters and margins
• Fixed-position elements
• Elements spanning columns
• Keep-with-next to avoid headings at the bottom of a column
• No-wrap class to avoid splitting elements across columns
• Grouping of columns into pages
• Horizontal or vertical alignment of pages
• Standardised line height to align text baseline to a grid
• Rapid reflow as required by events such as device orientation or font-size change

See FT-column-flow for examples, demos and usage guide etc.

See fx Basic usage example

• Check out the latest master to make sure the feature hasn't been implemented or the bug hasn't been fixed yet.
• Check out the issue tracker to make sure someone already hasn't requested it and/or contributed it.
• Fork the project.
• Start a feature/bugfix branch.
• Commit and push until you are happy with your contribution.
• Make sure to add tests for it. This is important so I don't break it in a future version unintentionally.
• Please try not to mess with the Rakefile, version, or history. If you want to have your own version, or is otherwise necessary, that is fine, but please isolate to its own commit so I can cherry-pick around it.

Copyright (c) 2012 Kristian Mandrup. See LICENSE.txt for further details.