cFlex Guide

cFlex License

Shape and display with CSS-Flexbox

A kind of blueprint/framework to setup a website layout for modern browser with CSS Flexbox.

Along with the new release, a separate base file [cflex3_radix.css] for the faster start of layouts has been included. Based on the practical experience, this provides a minimal default setting.

Integrate cFlex into your static or dynamic website

All starts with adding the style

<link rel="stylesheet" href="./<PATH_TO_CSS>/normalize.css?v=8.0.1" />
<link rel="stylesheet" href="./<PATH_TO_CSS>/cflex3.css?v=3.0.8" />
<link rel="stylesheet" href="./<PATH_TO_CSS>/cflex3_radix.css?v=3.0.8" />

The, as little as possible ingredients, make the two files a bit bigger.
If you minify them, unused/commented options will be removed, resulting in shorter loading times.

cflex3.css file size is at 7,8 kB / minified 2,6 kB

The cflex3.css file is the main framework which can be used as default.

cflex3_radix.css file size is at 22,3 kB / minified 11,0 kB

The cflex3_radix.css file is a basic template, with a few basic functions to get started quickly.

cFlex Pattern/Blueprints

full width without sidebars
cFlex Pattern / Screenshot