Raster

Simple Grid System

Minimal and straight-forward CSS grid system utilizing descriptive HTML rather than semantic CSS. Download ↓ Examples



1 2 3 4 5 6 7 8 3 7-8 2+2 5-8 1-4 6.. 2.. 4.. 1-2 4-5





Simplicity first

<r-grid columns=8> <r-cell></r-cell> <r-cell span=3>3</r-cell> <r-cell></r-cell> <r-cell span=7-8>7-8</r-cell> <r-cell span=2+2>2+2</r-cell> <r-cell span=5-8>5-8</r-cell> <r-cell span=1-4>1-4</r-cell> <r-cell span=6..>6..</r-cell> <r-cell span=2..>2..</r-cell> <r-cell span=4..>4..</r-cell> <r-cell span=1-2>1-2</r-cell> <r-cell span=4-5>4-5</r-cell> </r-grid>

The number of columns a grid has is specified by the columns attribute. For instance, to define a grid with 8 columns, you'd write <r-grid columns=8> . Cells span a single column by default. The span attribute is used to customize where a cell starts and how many columns it spans. For example, <r-cell span=2-5> starts in column 2 and ends in column 5. A cell with an empty or missing span attribute starts on the next available column and spans one column. Raster is pure CSS — no JavaScript involved. The HTML here is what generates the grid you see at the top of this page. More examples

Possible span= values

2-5 start in column 2,

end in column 5. 2+3 start in column 2,

span 3 columns. 2.. start in column 2,

span remainder of row. 2 start in next column,

span 2 columns. row span a full row

Responsive design

<r-grid columns=6> <r-cell span=2 span-s=row> <r-cell span=3-6 span-s=row> <r-cell span=1-2 span-s=1> <r-cell span=3.. span-s=2..> </r-grid>



Grids lend themselves really well to device-size responsive design. The span-s attribute defines alternate layout when your design is presented on a small screen. This makes designing for large and small screens really easy. Acme Things About Privacy policy Image Welcome to Acme Tap the example above—or resize your web browser window—to see the layout change. Showing large screen. Additionally, the span-l attribute can be used to control an alternate layout for really large screens. This entire website is built with grids and changes layout when the window size passes 600dp.

Additional responsive control with columns-s

<r-grid columns=6

columns-s=3> <r-cell> <r-cell span=2> <r-cell> <r-cell span=2> </r-grid>



Similar to span-s , columns-s is available on r-grid tags for alternate layout on small screens. Often a small-screen layout can be accomplished by simply setting columns-s without the need for any span-s attributes. The columns-l attribute is also available for large screens. Foo Description of foo Bar Description of bar Tap the example above—or resize your web browser window—to see the layout change. Showing large screen.

Excellent websites with minimal effort

Raster is a complete CSS framework for creating websites.

The Raster system is minimal but complete: Provides a simple, minimal and solid starting point for websites. Get started quickly with the HTML template, or just include raster2.css in your own HTML.

Grids as the foundation assists in creating graphically harmonious and expressive designs.

Good typography and scale harmony out of the box.

Easy customization via CSS variables. For instance, set --fontSize: 18px to change the entire scale of your website, or fine-tune spacing of various elements using the --lineHeight variable, which is the basis for all lengths.

to change the entire scale of your website, or fine-tune spacing of various elements using the variable, which is the basis for all lengths. raster2.css is only 5 kB gzipped

Customize raster.grid.css

raster.grid.css provides the minimal set of <r-grid> functionality. If you're looking for a complete framework, use raster2.css instead.

Prefix: Columns: Default cols: Small window: Large window: Grid attr: Cell attr: Small suffix: Large suffix: Include .debug

This CSS generator is also available as a script: generate-grid.js