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
For instance, to define a grid with 8 columns, you'd write
Cells span a single column by default.
span attribute is used to customize where a cell
starts and how many columns it spans.
<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.
The HTML here is what generates the grid you see at the top of this page.
end in column 5.
span 3 columns.
span remainder of row.
span 2 columns.
<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.
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
Showing large screen.
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.
columns-s=3> <r-cell> <r-cell span=2> <r-cell> <r-cell span=2> </r-grid>
columns-s is available
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
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:
--fontSize: 18pxto change the entire scale of your website, or fine-tune spacing of various elements using the
--lineHeightvariable, which is the basis for all lengths.
provides the minimal set of
If you're looking for a complete framework,
This CSS generator is also available as a script: generate-grid.js
Raster is an open-source project and the source code is available on GitHub →