Nano grid

Frontend toolkit powered by CSS and Web Components.

Getting Starter

CDN

In your Javascript:

import "https://cdn.jsdelivr.net/gh/nano-grid/[email protected]/nanogrid.js"

In your CSS:

@import url('https://cdn.jsdelivr.net/gh/nano-grid/[email protected]/nanogrid_styles.css');

Or in your SCSS:

@import 'https://cdn.jsdelivr.net/gh/nano-grid/[email protected]/nanogrid_styles.css';

Test the following structure in your project:

<nn-fila break="lg">
  <nn-pilar size="75px">
    75px
  </nn-pilar>
  <nn-pilar size="50%">
    50%
  </nn-pilar>
  <nn-pilar size="50% - 80px * 2">
    calc(50% - 80px * 2)
  </nn-pilar>
  <nn-pilar size="85px">
    85px
  </nn-pilar>
</nn-fila>

Building project

npx vite build

Running Storybook

npm run storybook

For full documentation, visit nano-grid.github.io.

Creator

Miguel Rivas

• Portfolio
• Github