Lucian Marin

Gridless

There’s a simpler method to create amazing layouts with invisible grids.

Gridless is a CSS framework that comes with no source code. Instead it’s based on a set of very strong principles. The basic Gridless rules:

  1. Every element size is divisible by 10 pixels.
  2. Use only pixels as unit.
  3. Every parent element is a block (forms, images, etc.)
  4. Inline elements must all be text based (strong, em, span).
  5. Never use 1 pixel borders.
  6. Use 2 pixels borders or background-color
  7. Reset to zero (padding, margin, width, height, etc.)
  8. Use a base line-height of 20px then increase it each step by 10px.
  9. Design at 1x then multiply by 2x, 3x or 4x.

The problem with current grid systems is that they are too restrictive. You can see the columns from the grid when they work or you can see mismatches when they don’t.

The problem with all CSS frameworks is that they are too complex and too complicated to learn or understand at a deeper level.

Gridless solves both of these problems. It‘s a foundation you can build anything on.