fla

flex-layout-attribute

HTML layout helper based on CSS flexbox specification —

Showing:

Popularity

Downloads/wk

810

GitHub Stars

708

Maintenance

Last Commit

5yrs ago

Contributors

2

Package

Dependencies

0

Size (min+gzip)

1.4KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100