progressivered/fla

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

Proudly used on websites like:

origami.design •

facebook.design •

foliodot.com

Direction:

row column rows columns

Vertically:

top center bottom stretch

Horizontally:

left center right spread justify stretch

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:

layout — use it on container(parent) element to set layout of its children elements
self — use it on container/child element to set size or align for element itself

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

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

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

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

<div layout="row center-spread">
    <div self="top">1</div>
    <div>2</div>
    <div self="bottom">3</div>
</div>

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

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

<div layout="column justify-stretch">
    <div>1</div>
    <div self="size-x1">2</div>
    <div>3</div>
</div>

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

<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