Sympl.css

A small responsive grid and typography stylesheet by Namanyay Goel.

Version 3.0.0, preserved from the original project. This demo was recreated from its documentation.

Download CSS · Minified CSS · Source and documentation

The grid

Resize the window to see the columns change. Put sympl items inside a stack.

<div class="stack">
  <div class="sympl quarter l-onethird m-half s-half">
    Content goes here.
  </div>
</div>

Prefixes apply at and below their breakpoints: l- at 60em, m- at 45em, and s- at 30em. Without an s- override, columns become full width on small screens.

Typography

Headings and paragraphs follow a 1.5 baseline rhythm. The stylesheet also includes empty rules for links and form controls.

License