grid.js
v1.0.0
Published
Simple fractional JS grid prototype. Makes adding fractions to markup easy.
Downloads
18
Readme
grid.js
Simple fractional JS grid prototype. Makes adding fractions to markup easy.
Installation
Import it into your project someway, somehow.
Usage
<html data-breakpoints="1024">
<body>
<div data-w="1/2 2/3">A</div>
<div data-w="1/2 1/3">B</div>
</body>
</html>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:
[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%);
}
}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! 🏎