blooks.css

Simple set of responsive CSS modules for your next web project.

About: blooks.css is a small mobile first CSS kit with minimal styles so you can start your next web project smarter and faster. blooks.css includes basic text styles, buttons, tables, forms and 4 column grid.

Why just 4 column grid? Years of experience and practices showed that 4 column grid is more than enough. If you need more than 4 column grid, you can nest grids to achieve desired grid system.

Download blooks.css from GitHub

Text

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Ut enim ad minim veniam, quis nostrud exercitation

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Ut enim ad minim veniam, quis nostrud exercitation

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Ut enim ad minim veniam, quis nostrud exercitation

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

labore et dolore magna aliqua
labore et dolore magna aliqua
labore et dolore magna aliqua

labore et dolore magna aliqua
labore et dolore magna aliqua
labore et dolore magna aliqua

Buttons

Search Search
Search Search Search Search

Search Search Search Search Search Search

Tables

#	Fruit	Type	Year
1	Orange	Clementine	2013
2	Orange	Mandarine	2012
3	Orange	Blood Orange	2013
4	Orange	Tangerine	2011

#	Fruit	Type	Year
1	Orange	Clementine	2013
2	Orange	Mandarine	2012
3	Orange	Blood Orange	2013
4	Orange	Tangerine	2011

Forms

Grids

Example code

<div class="grid-1">
	<div class="module">
		content
	</div>
</div>

1

1/2

1/2

1/3

1/3

1/3

1/3

2/3

1/4

1/4

1/4

1/4

1/4

1/4

2/4

1/4

3/4

Nested grids

Example code

<div class="grid-1">

    <div class="grid-1-2">
    	<div class="module">
            content
        </div>
    </div>

    <div class="grid-1-2">
        <div class="module">
            content
        </div>
    </div>

</div>

1

1/2

1/2

1/2

1/2

1/3

1/3

1/3

1/4

3/4

1/3

1/3

1/3

1/3

2/3

1/3

1/3

2/3

1/4

1/4

1/4

1/4

1/4

3/4

1/3

1/3

1/3

1/3

1/3

1/3

1/3

1/3

1/3