Lentus - Responsive Flexbox Grid

A project by Guus Lieben

Download Default Download SCSS Download Minified Download Pack

USAGE


Load up grid.css or grid.min.css

Afterwards you can add your own custom css files.

<link rel="stylesheet" href="css/grid.css">
<link rel="stylesheet" href="css/grid.min.css">

Then add a <div> box and add class "row". Now add, within the row you created, another <div> with a class like "col-12" (see Column Classes below). What we've just done is; (1) Create a box for our columns to be placed in. (2) Created a column that uses the full width of the row.

<div class="row">
   <div class="col-12"> </div>
</div>

Default Layout


Flex Columns

There are a few rules you need to stick to in order to make this work, don't worry though, it's pretty simple

As explained above, you always start by creating a row and within that you add your columns. To add columns you simply add "col-var" where var is a number between 1 and 12. If you create a column with a var lower than 12, make sure to create another column next to it, to get the right width you need to make sure that the var of both columns together are a sum of 12. Let's turn that into a piece of code shall we?

<div class="row">
   <div class="col-5"> col-5 </div> <!-- We created a column with var 5. 12 - 5 = 7, So our second column will have var as 7 -->
   <div class="col-7"> col-7 </div>
</div>

This will output the following :

col-5
col-7

If you want to place more than just two columns next to each other, just add another <div class="col-var"> </div>.

<div class="row">
   <div class="col-4"> col-4 </div> <!-- We created a column with var 4. 12 - 4 = 8, So our second and third column will have var as 8/2 (4) -->
   <div class="col-4"> col-4 </div>
   <div class="col-4"> col-4 </div>
</div>

The result:

col-4
col-4
col-4

Wrapping

To make the columns & rows look better on desktop computers, there is also a wrapper included in the source code. To add it just place the columns and rows within <div class="wrapper"> </div>. This will set the max-width of the rows and columns to 1200px, this can easily be changed to fit your needs.

Column Classes


There are 12 types of columns. These are all very much alike, but just so you get to know all options they're displayed below.


Class Width (%)
.col-1 8⅓ %
.col-2 16⅔ %
.col-3 25%
.col-4 33⅓ %
.col-5 41⅔ %
.col-6 50%
Class Width (%)
.col-7 58⅓ %
.col-8 66⅔ %
.col-9 75%
.col-10 83⅓ %
.col-11 91⅔ %
.col-12 100%

Function Classes


There are 5 classes that add some functionality to your columns or wrappers. These take care of styling, but are mainly for the more obvious parts in your website.

Class Function Description
.blank-col Height Styling Adds a 150px high empty space. Useful to see what something looks like before adding text.
.sticky Sticky Header Sticks a column to the top, useful for headers, like the one used on this page.
.no-back Background Coloring 'removes' the background of a wrapper, making it look better. Useful in combination with .hidden-col.
.hidden-col Column Alignment Makes a column invisible, useful to align other columns in the same row to a certain side.
.no-mobile Cross-device reaction Hides the column if the width of the screen <= 500px. Use in combination with the viewport tag!

Style Classes


There are 14 classes that add basic styling to your columns or wrappers. These mainly take care of easy styling, but are mainly to give you some ideas on what is possible.

Class Function Description
.warn Column Color Styling Changes the background of a column to #FFDB4D (yellow)
.note Column Color Styling Changes the background of a column to #5CADFF (blue)
.error Column Color Styling Changes the background of a column to #FF5353 (red)
.correct Column Color Styling Changes the background of a column to #33D685 (green)
.rounded Column Border Decoration Rounds all corners of a column 100px
.top-r Column Border Decoration Rounds the top right corner of a column 100px
.top-l Column Border Decoration Rounds the top left corner of a column 100px
.bottom-r Column Border Decoration Rounds the bottom right corner of a column 100px
.bottom-l Column Border Decoration Rounds the bottom left corner of a column 100px
.rad-r Column Border Decoration Rounds the right corners of a column 100px
.rad-l Column Border Decoration Rounds the left corners of a column 100px
.text-left Text Alignment Aligns text within a wrapper, row or column to the left
.text-right Text Alignment Aligns text within a wrapper, row or column to the right
.center Text Alignment Centers text within a wrapper, row or column

© 2015 Guus Lieben - Lentus