HTML layout helper based on CSS flexbox specification —
CSS JavaScript
Permalink
Failed to load latest commit information.
css npm version fix/bump for cdnjs Jun 21, 2016
sass Initial release May 22, 2016
.gitignore Initial release May 22, 2016
LICENSE Initial release May 22, 2016
README.md Npm release May 31, 2016
gulpfile.js Initial release May 22, 2016
package.json npm version fix/bump for cdnjs Jun 21, 2016

README.md

Flex Layout Attribute (FLA)

Layout helper based on CSS flexbox specification designed to serve you as quick flexbox shorthand by using two custom html attributes — layout and self.

Basic example

Items distributed in a row and centered within container:

<div layout="row center-center">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

Try live — interactive demo

View demo

Benefits

  • Dedicated HTML attribute — separated layout markup, semantic & concise syntax.
  • Beyond grids — ratio relationships, element sizes based on a scale.
  • Rapid prototyping — design in browser, quick iterations, no need to write CSS for layout.
  • Solid base — ease to extend and customize.

Quick start

Several quick start options are available:

  • Download the latest release
  • Clone the repo: git clone https://github.com/StefanKovac/flex-layout-attribute.git.
  • Install with npm: npm install flex-layout-attribute.

Usage

1) Insert flex-layout-attribute.min.css in document HEAD:

<link href="path/to/css/flex-layout-attribute.min.css" rel="stylesheet">

2) Add layout attribute to html elements:

<div layout="row center-justify">
    ...
</div>

Development

  1. Clone the repo: git clone https://github.com/StefanKovac/flex-layout-attribute.git.
  2. Install dependencies: npm run setup.
  3. Build FLA: gulp or set watcher: gulp watch

Learn more

Interactive demo, documentation and snippets — http://progressivered.com/fla/


License

FLA is released under the MIT license.