grid.js
Simple fractional JS grid prototype. Makes adding fractions to markup easy.
Installation
Import it into your project someway, somehow.
Usage
A B
It's mobile-first only (for now). That example will default to 1/2
elements on mobile. When the viewport hits 1024px
wide, the layout will change so the first element is 2/3
width, the second element 1/3
width.
Details
Does this by adding a stylesheet with JS, then inserts simple/clean rulesets.
The above examples JS-stylesheet would be:
[/2 2/3"] { [/2 2/3"] } [/2 1/3"] { [/2 1/3"] }
Wishlist
- Combine rulesets as much as possible so it looks a bit cleaner. The same rules (say
<div data-w="1/2"></div> <div data-w="1/2"></div>
) currently get duplicate rules. 😅 - Gotta go faster! 🏎