Raster
Simple Grid System

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

<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

<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.

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.

<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.

Tap the example above—or resize your web browser window—to see the layout change. Showing large screen.

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.
• raster2.css is only 5 kB gzipped

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

Open source

Raster is an open-source project and the source code is available on GitHub →