Grid.js NPM | npm.io

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! 🏎

@infinitebrahmanuniverse/nolb-gri @everything-registry/sub-chunk-1788

7 years ago

10 years ago

10 years ago

10 years ago

10 years ago