https://github.com/nano-grid/nano-grid
Frontend Toolkit
https://github.com/nano-grid/nano-grid
css framework front-end javascript web-coponents
Last synced: 3 months ago
JSON representation
Frontend Toolkit
- Host: GitHub
- URL: https://github.com/nano-grid/nano-grid
- Owner: nano-grid
- License: mit
- Created: 2021-03-17T14:04:48.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2025-06-27T10:20:10.000Z (9 months ago)
- Last Synced: 2025-09-01T14:48:38.658Z (7 months ago)
- Topics: css, framework, front-end, javascript, web-coponents
- Language: JavaScript
- Homepage: https://nano-grid.github.io
- Size: 1.56 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
# Nano grid
[](https://rama-o.github.io)
> Frontend toolkit powered by CSS and Web Components.
## Getting Starter
### CDN
In your Javascript:
```js
import "https://cdn.jsdelivr.net/gh/nano-grid/nano-grid@5.3.0/nanogrid.js"
```
In your CSS:
```css
@import url('https://cdn.jsdelivr.net/gh/nano-grid/nano-grid@5.3.0/nanogrid_styles.css');
```
Or in your SCSS:
```css
@import 'https://cdn.jsdelivr.net/gh/nano-grid/nano-grid@5.3.0/nanogrid_styles.css';
```
Test the following structure in your project:
```html
75px
50%
calc(50% - 80px * 2)
85px
```
## Building project
```sh
npx vite build
```
## Running Storybook
```sh
npm run storybook
```
## Creator
**Miguel Rivas**
- [Portfolio](https://jmiguelrivas.github.io)
- [Github](https://github.com/jmiguelrivas)