Wondering what’s next for npm?Check out our public roadmap! »

    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.

    Install

    npm i flex-layout-attribute

    DownloadsWeekly Downloads

    995

    Version

    1.0.3

    License

    MIT

    Last publish

    Collaborators

    • avatar