Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/leetheguy/atomic-grid

A lightweight grid system using CSS grid.
https://github.com/leetheguy/atomic-grid

Last synced: about 2 months ago
JSON representation

A lightweight grid system using CSS grid.

Host: GitHub
URL: https://github.com/leetheguy/atomic-grid
Owner: leetheguy
License: mit
Created: 2019-06-11T02:23:40.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2019-06-17T20:13:08.000Z (over 5 years ago)
Last Synced: 2024-07-22T04:34:40.139Z (2 months ago)
Language: CSS
Homepage: https://codepen.io/leetheguy/pen/LKYpqb
Size: 9.77 KB
Stars: 29
Watchers: 3
Forks: 3
Open Issues: 0
Metadata Files:
- Readme: readme.md
- License: LICENSE

Awesome Lists containing this project

README

# Atomic Grid
### A lightweight grid system using CSS grid.

Atomic grid is a familiar responsive grid system inspired by [Tachyons](tachyons.io) and designed using modern CSS.
Atomic grid takes the complexity out of the CSS grid system and gives you the old school grid system you know and love.
No fluff was added, so the whole thing weighs in at less than 10K minified.

---

## Preview

https://codepen.io/leetheguy/pen/LKYpqb

---

## The Grid

The grid system consists of a grid wrapper, offset and span tags.
The grid wrapper comes in 4 flavors including 12-column, 20-column, 24-column, and auto-fit.

---

## Automatic

Atomic Grid will automatically fill in cells from left to right.
Atomic Grid grids are rows and will stack automatically.
In other words, rows are implied and not needed.
When the end of the row is reached a new one will be started.

col

---

## Offsets

The grid cells can be offset from 1 to 23 columns with `go[1-23]`.

column

Multiple cells can be offset from the row beginning.

column 3

column 6

column 9

column 12

---

## Spans

The grid cells can span multiple columns with `gs[1-24]`.

rule

thirds

---

## Nesting

Grids can be easily nested.

column

---

## Auto Fit

Grids can have any number of columns with auto-fit.
Spans work with auto-fit grids, but offsets don't.
Columns will shrink down to no smaller than 6rem.
Then they will begin to stack.

column

---

## Responsive

Atomic Grid uses the same media queries as tachyons `-ns` for not small, `-m` for medium, and `-l` for large.

column