flex-layout-attribute

1.0.3 • Public • Published

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">
  1. 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.

Package Sidebar

Install

npm i flex-layout-attribute

Weekly Downloads

470

Version

1.0.3

License

MIT

Last publish

Collaborators

  • stefankovac