FlexpointCDN - Github

A <3kb breakpoint-based flexbox grid implementation. Choose when to change your layout depending on your content instead of the device you want to show as recommended by Google's RWD, by Smashing Magazine's Logical Breakpoints and me ☺

Note: the child <span> in the code are only for display purposes; you can put anything you want instead of them

You can create complex, flexible layouts with it. Just resize the browser to see how powerful it is:

Equaly sized columns

Let's start through the basics though. Just a container with equaly sized children:

With the class flex, the children will be spaced equaly to fill all of the content.

Column count

If instead you prefer certain column count, such as in a gallery where it can span several rows, use a counter besides the class flex:

The columns will keep being equaly spaced, but this time with the width corresponding to the column counter. You can use any number as a class from one to twelve:

Most grid systems use a 12 grid system, but we wanted to use a more flexible system and allow you to choose the grid size.

Responsive column count

We follow a mobile-first design. Put the number of columns for mobile as explained in the previous point. Then, when things get too stretched, add a column counter with the number of pixels in 100 increments as follows:

The number after the column count as in -600 or -1200 are the breakpoints. When the website width is over that number, that column count will be used instead of the previous. If we use two or more, the largest column count will be used. For example, in a desktop with a screen of 1920x1080px the previous one will display 6 columns. Any screen from 600px to 1200px will display three columns and smaller than 600px will display 2 columns.

The increment is 100px and starts in 500px up to 2000px both included. You can use any of those sufixes for the column count class:

Remainders

You can also modify the remainder content as you wish with a couple of utility classes. This is the default:

You can grow them:

Or you can center them:

Children sizing

Now that we know how the parent (or grid) can modify itself and the elements below them, the children can also go rebel and behave on their own. Say that one children wants to be half of the size of the parent. Easy, just add the class half :

We have many classes like those. They are the size relative to the parent grid:

Responsive children

They can also be fine-tuned in a way similar to the above:

Offsets

The children can also have one offset (empty space) before it. They are built adding the class off-SIZE, similar to the size but prefixing off-:

We have many classes like those. They are the size of the offset relative to the parent grid:

Responsive offsets

They can also have the minimum screen size when they start working:

The main difference with the width classes is that it includes a none in case you want to hide the offset at certain sizes and that it doesn't include a full

Examples

A grid within a grid within a grid:

License, author and thanks

MIT License (see LICENSE)

Author Francisco Presencia Fandos. You can also hire me to make awesome projects with you :)

Special thanks to the awesome CSS-Tricks' A Guide to Flexbox.