Reflex Layout Demos

Github Repo CSS Source CSS File CSS Minified File

CSS grid layout and responsive breakpoints using flexbox. Ability to change columns to rows, and vise versa, using attribute values. Mobile first responsive design, meaning it starts at the smallest viewport first and builts up.

The above attributes can also be applied only to certain viewport sizes by using specific media query sizes. For example, layout-md would only be active when the medium media query is active.

Horizontal and Vertical Layouts

A layout contains cells, and a layout determines if its cells should line up horizontally or vertically. In the "Layout A" example they'll always be horizonal. In the "Layout B" example they'll always be vertical. In "Layout C" it vertical when the viewport is small, and horizontal when larger.

Flex Cells

Child cells of layout elements can use the flex attribute to fill the available space.

Layout Padding

This layout has padding, or gutters, between each cell by adding the layout-padding attribute. The previous examples added in their own margins/padding manually, whereas the layout-padding attribute spaces it all out evenly.

Layout Padding with Available Space Percents

Cells can be given integers to represent the percentage of the available space it should take up. Note that cells which are not given a percentage still fill up the available area.

Layout Padding with Offsets

Cells can be offset from the left, but still allow the gutters to line up correctly.

Header, Menu, Main, Footer, no padding

This layout lets each of the header and footer tracks height be the size of their respective content, and the middle track (menu and main) flex vertically to fill the space of the entire layout. This is also an example of nested layouts, where the entire body is a vertical layout (header/content/footer), and the content row is its own layout (menu/main), and each layout has their own settings.

The body element has the layout="vertical" attribute. By default the middle track has the menu and main cells stacked vertically. However, the cells line up horizontally starting at the "small" size, which is determined by the media query.

Item Alignment: stretch (default)

Be default child cells in a horizontal layout will "stretch" the height of the layout.

Item Alignment: center

The center attribute will center the cell across the main axis. For example, on a horizontal layout the center attribute will center it vertically within the layout. On a vertical layout, the cell will be aligned center horizontally.

Item Alignment: start

The start attribute will position the cell at the top for a a horizontal layout, and to the left for a vertical layout.

Item Alignment: end

The end attribute will position the cell at the bottom for a a horizontal layout, and to the right for a vertical layout.

Justify Content: start-justified

Justify Content attributes help distribute extra free space when either all the cells on a line are inflexible, or are flexible but have reached their maximum size.

The start-justified attribute packs up all the cells at the start line.

Justify Content: end-justified

The end-justified attribute packs up all the cells at the end line.

Justify Content: center-justified

The center-justified attribute puts all of the cells in the center.

Justify Content: space-between-justified

The space-between-justified attribute will evenly distribute the cells, with the first cell is aligned at the start, and the last cell aligned at the end.

Justify Content: space-around-justified

The space-around-justified attribute will evenly distribute the cells, all with equal space between them.

Utility Attributes