★ Responsive Grid System

This began as a bit of an experiment but is proving to be quite useful.

It is a grid system based on fractions which encourages modular semantics and flexibility to control a cell based on it's context within the system.

Installation

Currently only available from the dist folder in this git repo or npm.

npm install blackstar --save

$3

I've designed this to be compatible as a CSS module.

$3

You can inject these styles into your stylesheet using PostCSS. I'll add some customisation in time.

``
@blackstar {}
`

Examples

There are a number of examples in the docs.html file in the root of the project.

Rules

$3

$3

| Size | Media Query |
| ---- | ---- |
| No namespace | everywhere |
| xs | (max-width: 544px) |
| sm | (min-width: 545px) and (max-width: 767px) |
| md | (min-width: 768px) and (max-width: 1023px) |
| lg | (min-width:1024px) |
| xl | (min-width: 1280px) |

$3

Class names for cells follow the following format and allow for the fractions based on 1,2,3,4,6

bs[namespace]-[fraction][|fraction]

Here are some examples:

`
bs-1 => full width block
bs-1/2 => half
bs-2/3 => two thirds
bs-2/3|1/2 => half when inside two thirds

bssm-1 => full width block on small device
bssm-1/2 => half on small device
bssm-2/3 => two thirds on small device
bssm-2/3|1/2 => half when inside two thirds on small device
`

Nesting is provided for a single level deep. So we don't currently include something like bs-2/3|1/2|1/2.

Examples

`