You can download the source file here (normal & minified) : Get lil.css Get lil.min.css

Next you just have to link it in your HTML file head tag :

Thanks to a custom grid and some custom HTML/CSS classes, lil.css can help you to organise your elements.

Left, Right, Center :

Left Center Right

You can use the left, right and center classes to position your elements. Do not forget to include the lil-clear element when it is needed to end the float property.

PS: left and right use floats but center use margin and display so you will need the lil-clear element to isolate them.

Left

Center
Right

Text align :

If you need to change your text align you can use the text-(insert-your-align) class.

Center :

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint accusantium esse deserunt corrupti eum quae? Magni consectetur debitis est quos? Ratione nulla amet mollitia eos, fugiat cupiditate rem. Ducimus, accusantium.

Left :

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint accusantium esse deserunt corrupti eum quae? Magni consectetur debitis est quos? Ratione nulla amet mollitia eos, fugiat cupiditate rem. Ducimus, accusantium.

Right :

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint accusantium esse deserunt corrupti eum quae? Magni consectetur debitis est quos? Ratione nulla amet mollitia eos, fugiat cupiditate rem. Ducimus, accusantium.

Justify :

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint accusantium esse deserunt corrupti eum quae? Magni consectetur debitis est quos? Ratione nulla amet mollitia eos, fugiat cupiditate rem. Ducimus, accusantium.

This is a centered paragraph.
This is a left paragraph.
This is a right paragraph.
This is a justified paragraph.

Block, Inline :

By using the block and inline classes you can change the display property without looking at the CSS.

Block :

Blue Red Green

Simply use the block class to add the display: block property to an element.

Blue
Red
Green

Inline :

Blue Red Green

You can also use the inline class to add the display: inline property to an element.

Blue
Red
Green

Inline-block :

Blue Red Green

By adding both the block and inline classes you can add the display: inline-block property to an element.

Blue
Red
Green

The grid :

lil.css comes with a custom grid (inspired by Grd) to help with the layout of your project(s). The grid is very light and simple to use.

Create rows and columns using lil-row and lil-col.

Classes you can use on a lil-row :

Class	Property
top	Pull your columns to the top of the row.
middle	Pull your columns to the middle of the row.
bottom	Pull your columns to the bottom of the row.
stretch	Stretch the columns.
baseline	Pull columns content to baseline.
left	Pull your columns to the left of the row.
center	Pull your columns to the center of the row.
right	Pull your columns to the right of the row.
between	Add spaces between your columns.
around	Add spaces around your columns.

Classes you can use on a lil-col :

Class	Property
n-12	Replacing "n" by the a integer (1-12) you can change the size of the column.
fill	Set the column width to left.

Here is a little exemple of what you can do with the grid:

You can quickly change the width of your elements by adding the class width-25/33/50/75/100.

My width is 25%

My width is 33%

My width is 50%

My width is 75%

My width is 100%

My width is 25%
My width is 33%
My width is 50%
My width is 75%
My width is 100%

Here you have some customs buttons. You can use different colors, sizes, and styles by adding simple classes.

Just use the lil-btn class to use them.

Regular Buttons :

You can change the color of a button simply by adding the corresponding color class.

Red button

Outline buttons :

You can make an outline button by adding the outline class to an element with the lil-btn class.

Orange outline button

You can use custom inputs along with the grid to make nice forms.

Your email Please enter your email address.

Your name Please enter your awesome name.

Message

Submit

You can make simple inputs using the lil-input class on your inputs.

The font lil.css uses is "Heebo" provided by Google Fonts.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph with bold, underline and Italic

Lilcss includes cards that can help you contain your content:

You can make navigation containing links, lil-btn elements and lil-input elements.