Nano grid

Frontend toolkit powered by CSS and Web Components.

Getting Starter

CDN

In your Javascript:

1import "https://cdn.jsdelivr.net/gh/nano-grid/nano-grid@5.3.0/nanogrid.js"

In your CSS:

1@import url('https://cdn.jsdelivr.net/gh/nano-grid/nano-grid@5.3.0/nanogrid_styles.css');

Or in your SCSS:

1@import 'https://cdn.jsdelivr.net/gh/nano-grid/nano-grid@5.3.0/nanogrid_styles.css';

Test the following structure in your project:

1<nn-fila break="lg">
2  <nn-pilar size="75px">
3    75px
4  </nn-pilar>
5  <nn-pilar size="50%">
6    50%
7  </nn-pilar>
8  <nn-pilar size="50% - 80px * 2">
9    calc(50% - 80px * 2)
10  </nn-pilar>
11  <nn-pilar size="85px">
12    85px
13  </nn-pilar>
14</nn-fila>

Building project

1npx vite build

Running Storybook

1npm run storybook

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

Creator

Miguel Rivas

• Portfolio
• Github