Simple fractional JS grid prototype. Makes adding fractions to markup easy.
npm install grid.jsSimple fractional JS grid prototype. Makes adding fractions to markup easy.
Import it into your project someway, somehow.
``html`
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.
Does this by adding a stylesheet with JS, then inserts simple/clean rulesets.
The above examples JS-stylesheet would be:
`css
[data-w="1/2 2/3"] { width: calc(50%); }
@media (min-width: 1024px) {
[data-w="1/2 2/3"] {
width: calc(66.6667%);
}
}
[data-w="1/2 1/3"] { width: calc(50%); }
@media (min-width: 1024px) {
[data-w="1/2 1/3"] {
width: calc(33.3333%);
}
}
`
- Combine rulesets as much as possible so it looks a bit cleaner. The same rules (say
`) currently get duplicate rules. 😅