Fork me on GitHub

Pulp

Pulp is a very small, very clean, responsive, CSS reset and 12-column grid system. It’s intended for creating mobile-friendly magazine and content page layouts. Pulp isn’t for everything. It’s not intended for complex interfaces and intricate web applications, but it makes organizing and presenting static content and structuring overall page layout a snap.

Just The CSS


            

Examples

Grid Basics

A page showing the basics of the Pulp grid system - a good reference to start from.

3 Column Article Page

A sample content page showing a typical blog/news article layout.

Magazine Layout

An example front-page layout for a magazine, blog, news site, etc.


Getting Started

Getting up and running with Pulp is very straightforward. Just include the pulp.css file as the first CSS file in your document and you're ready to go.

Pulp's main strength, in addition to resetting and normalizing many page elements across multiple browsers and devices, is that it provides a flexible, fluid, and responsive 12-column grid system. This grid is fairly simple and functions similarly to many other CSS grid frameworks. Essentially, you create rows and columns, specifying the proper column class based on how many of those 12 divisions the column spans.

For instance, in the "Examples" section above, 3 columns are created, so 12 / 3 = 4 - we need to use the .col4 class to create three equal columns.

<section class="grid-container">
    <div class="row">
        <div class="col col4">
            Column 1
        </div>
        <div class="col col4">
            Column 2
        </div>
        <div class="col col4">
            Column 3
        </div>
    </div>
</section>

Note that you can also nest grids, and pull grid columns to one side or the other. You can even use grid columns as in-line elements. For more advanced techniques, the best way to dive in is probably by examining the sample code (also included in the download).

ToDo:

Pulp needs more thorough testing, and the typographic baseline grid still isn't perfect.