Flexboss Flexbox Grid System

What can I build with it?

Anything web (for modern browsers) - although the flexbox grid is intended to be used for building HTML blocks for/and single-page web applications (SPAs) with, as you can demand a little more from your audience (browser-wise) for SPAs compared to regular websites (in my opinion).

Once you get familiar with the syntax and the interfaces, you'll be able to use the grid system for rapid prototyping which will help you to quickly create flexible layouts and components for your SPAs, some of which you would have had to use JavaScript for in the olden days.

To learn more, check out the resources on this page and head over to github to download the source code.

Additional Resources: Test page: Full overview of interfaces and functionality.; Prototype: Single-Page Application boilerplate; Prototype: Modal boilerplate

So what can it do?

Below are various (basic) examples which showcase the capabilities of the Flexboss grid. For an extensive overview, please refer to the test page.

Note: All of the examples on this page have gutters between the grid-cell elements. Gutters are optional and are applied by adding (one or more) modifier classes to the grid elements. Hence, you can easily avoid the gutters by omitting the modifier classes. For more information, please refer to the gutters section on the test page.

Note: Most of the examples on this page display the grid functionality/behavior in an x-axis (horizontal) grid, but for the most part the same functionality/behavior applies to y-axis (vertical) grids. Please refer to the test page for a full overview of the options.

Horizontal/X-Axis Grids

1st

This is the second cell

3rd cell

Vertical/Y-Axis Grids

1st

This is the second cell

3rd cell

Nested Grids

1st grid-cell child of the main grid

1st grid-cell child of a nested grid

2nd grid-cell child of a nested grid

1st grid-cell child of the main grid

1st grid-cell child of a nested y-axis grid

2nd grid-cell child of a nested y-axis grid

Fitted and width-spanning elements (X-Axis Grid)

Fitted

Auto

Relative Sizing (X-Axis Grid)

1 of 6

1 of 5

1 of 4

1 of 3

1 of 2

2 of 3

3 of 4

Auto

1 of 3

Auto

1 of 3

Auto

1 of 5

Auto

1 of 5

1 of 3

1 of 5

Main-Axis Alignment (X-Axis Grid)

Start (auto)

Center

End

Cross-Axis Alignment (X-Axis Grid)

Start

Stretch (auto)

Center

Baseline

Baseline 2

End

Scrollable Cells

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae felis in leo sollicitudin dapibus. Cras eget porta sem. Vivamus venenatis quam eget orci aliquet consequat. Donec feugiat pretium diam, non consectetur purus dignissim eget. Quisque ac nisl laoreet, auctor nisl ac, commodo sapien. Integer at dui sed ligula sollicitudin auctor et at diam. Integer dolor nulla, rhoncus tristique nunc ac, consectetur vulputate mi. Nam consectetur, enim et faucibus pulvinar, lorem elit mattis nibh, in porttitor magna augue vitae elit. Nunc ornare luctus magna, et suscipit dui molestie ac. Sed sodales nulla quam, eu faucibus massa fringilla in. Integer sed tortor luctus, hendrerit ante at, commodo nulla.

Nulla facilisi. Proin blandit molestie dui, ac porttitor magna elementum id. Praesent consectetur sagittis lectus, at tempor justo vulputate vitae. Cras turpis nulla, aliquet sed sapien eu, accumsan lobortis ipsum. Sed at nisi sodales, varius felis id, vulputate purus. Ut accumsan metus tortor, non accumsan lectus viverra at. Donec ullamcorper ipsum rutrum, cursus justo eu, dignissim leo. Fusce pellentesque adipiscing dui nec viverra.

For a full overview of the functionality and interfaces available in the grid system, please refer to the test page.