Flex Layout Attribute

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

<div layout="direction vertically-horizontally reverse">
    <div self="size align"> ... </div>
</div>
Interactive demo

Download v1.0.3 View on GitHub

Items size:
default wide tall custom
w:
h:
Items number:
- 1 +
<div layout="row top-left"> ... </div>

Note: This demo features limited number of FLA options! To try all FLA options, use CodePen demo.

Tip:  To share/bookmark your FLA settings, copy full url after you make adjustments in demo — layout sample.

02. Features & benefits Link

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.

Shameless plug:
FLA is the base code I've used to build custom layout helper for foliodot websites.

03. DocumentationLink

UsageLink

Download latest release from GitHub and include flex-layout-attribute.min.css in your HTML document:

<!-- 1) insert FLA css in document HEAD -->
<link href="css/flex-layout-attribute.min.css" rel="stylesheet">

<!-- 2) now you are ready to use layout & self attributes -->
<div layout="row center-justify">
    ...
</div> 

BuildLink

SASS files are provided in 'sass' directory (see project on GitHub) for further customization. FLA is built with Gulp but you can download and include 'sass' folder in your preferable build setup (grunt, webpack etc.)

AttributesLink

FLA is defined with two custom HTML attributes:

SyntaxLink

Overview of FLA syntax with available values:

<div layout="direction vertically-horizontally reverse">
    <div self="size align order display">
        ...
    </div>
</div>

NOTE: Vertical and horizontal distribution values MUST be conected with single dash "-".

Direction: Link
row horizontal flow of items forced into single row
rows horizontal flow of items and can be wrapped in multiple rows
column vertical flow of items forced into single column
columns vertical flow of items and can be wrapped in multiple columns
Responsive prefixes
Conditionally switch FLA direction based on viewport width. Example:
<div layout="row md-column">...</div>
No prefix by default. Direction not scoped.
sm- Scoped, (max-width: 40em)
md- Scoped, (max-width: 52em)
lg- Scoped, (max-width: 64em)
Vertically: Link
top items are placed toward the top of the container
center items are placed toward the vertical center of the container
bottom items are placed toward the bottom of the container
justify items are vertically evenly distributed.
spread space between vertical items is evenly distributed.
stretch items are stretched evenly (to the sam height) to occupy whole height of the container
Horizontally: Link
left items are placed toward the left side of the container
center items are placed toward the horizontal center of the container
right items are placed toward the right side of the container
justify items are horizontally evenly distributed.
spread space between horizontal items is evenly distributed.
stretch items are stretched evenly (to the same width) to occupy whole width of the container
Reverse: Link
reverse appearance order of items is reversed
Size: Link
Item proportional size
Amount of the available space inside the container the item should take up regard to smallest sibling
size-x1 equal or maximum space
size-x2 2 times larger
size-x3 3 times larger
size-x4 4 times larger
size-x5 5 times larger
size-x6 6 times larger
size-x7 7 times larger
size-x8 8 times larger
size-x9 8 times larger
Item width in percents Item width relative to container width
size-1of5 width: 20%
size-1of4 width: 25%
size-1of3 width: 33.33%
size-2of5 width: 40%
size-1of2 width: 50%
size-3of5 width: 60%
size-2of3 width: 66.66%
size-3of4 width: 75%
size-4of5 width: 80%
size-1of1 width: 100%
Item width in pixels Fixed maximum width
size-xxsmall max-width: 240px
size-xsmall max-width: 360px
size-small max-width: 480px
size-smaller max-width: 600px
size-medium max-width: 720px
size-larger max-width: 840px
size-large max-width: 960px
size-xlarge max-width: 1200px
size-xxlarge max-width: 1440px
Two responsive sizes
Set item size to match viewport full width (100%) or half width (50%). Media-query prefixes**:
  • sm- (max-width: 40em)
  • md- (max-width: 52em)
  • lg- (max-width: 64em)

Examples:
<div self="size-x1 sm-full">...</div>
<div self="size-1of3 lg-half">...</div>
<div self="md-full">...</div> 
**-full {width: 100%; max-width: 100%; flex: 1 1 100%;}
**-half {width: 50%; max-width: 50%; flex: 1 1 50%;}
Align: Link
top Aligned toward the top of the container.
left Aligned toward the left side of the container.
center Aligned to the center of container.
right Aligned toward the right side of the container.
bottom Aligned toward the bottom of the container.
stretch Stretch item in opposite direction across whole container.
Order: Link
first First in the stack
order-1 Order position 1
order-2 Order position 2
order-3 Order position 3
last Last in the stack
Responsive order
Item order based on viewport width. Media-query prefixes**:
  • sm- (max-width: 40em)
  • md- (max-width: 52em)
  • lg- (max-width: 64em)

Examples:
<div self="size-x1 sm-last">...</div>
<div self="md-first">...</div> 
**-first
**-last
Display: Link
show display : inherit;
hide display : none;
Responsive display
Item display based on viewport width. Media-query prefixes**:
  • sm- (max-width: 40em)
  • md- (max-width: 52em)
  • lg- (max-width: 64em)

Example:
<div self="sm-hide">...</div>
**-show
**-hide

04. Snippets Link

Single layout container

1
2
3
<div layout="row center-center">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
1
2
3
<div layout="column center-center">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
1
2
3
<div layout="row center-justify">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
1
2
3
<div layout="row center-spread">
    <div self="top">1</div>
    <div>2</div>
    <div self="bottom">3</div>
</div>
1
2
3
<div layout="row top-stretch">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
1
2
3
<div layout="row stretch-center">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
1
2
3
<div layout="column justify-stretch">
    <div>1</div>
    <div self="size-x1">2</div>
    <div>3</div>
</div>
1
2
3
<div layout="row stretch-stretch">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
1
2
3
4
5
<div layout="row center-spread">
    <div>1</div>
    <div self="stretch">2</div>
    <div>3</div>
    <div self="stretch">4</div>
    <div>5</div>
</div>

Nested layout containers Link

See the Pen Flex Layout Attribute — responsive/nested containers by Foliodot (@foliodot) on CodePen.

Ready to try?

Download v1.0.3 View on GitHub
Other projects:
Portfolio website template

Foliodot

Minimal, versatile website template

Features: Simplest document structure. Minimal input. Pre—configured elements. Template engine. Code generation. Transitions. Keyboard shortcuts. Minimal user interface. API. Responsive. Touch gestures. Global & local configuration. Style & layout helpers.

URL: foliodot.com