css3-box

The CSS3 flexbox layout model implemented as a set of LESS mixins


Keywords
CSS3, box, flexbox, LESS, mixins, web, app, layout
License
MIT
Install
bower install css3-box

Documentation

Intro

CSS3-BOX implements the CSS3 flexible box layout mode (draft) as a set of LESS mixins.

Use css3-box to build web applications that don't take "a page" but "a screen" as their primary layout reference, and that need to behave predictably across different screen sizes and different display devices.

Quick start

Install with Bower: bower install css3-box

The package includes:

  • A set of LESS mixins that make implementing flexbox dead simple
  • Backward compatibility for older versions still supported in browsers like IE10
  • An additional set of LESS mixins to easily build a layered app

Demo/scaffold

Fork/download the demo to see CSS3-BOX in action or use it as a scaffold for your next rich web application.

Do notice the slide-out navigation and adapted bootstrap modal dialog--for a truly responsive user experience!

Any comments/suggestions/tips are of course more than welcome ;-)

Sources

http://dev.w3.org/csswg/css-flexbox/

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

http://css-tricks.com/using-flexbox/

http://css-tricks.com/snippets/css/a-guide-to-flexbox/