https://github.com/yifaneye/grilled
🏁 Library of responsive grid system with any of 1 to 12 columns 👉 npm i grilled
https://github.com/yifaneye/grilled
grid grid-layout grid-system responsive responsive-design responsive-grid responsive-layout
Last synced: 5 months ago
JSON representation
🏁 Library of responsive grid system with any of 1 to 12 columns 👉 npm i grilled
- Host: GitHub
- URL: https://github.com/yifaneye/grilled
- Owner: yifaneye
- License: mit
- Created: 2020-11-25T11:17:05.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-11-29T06:56:13.000Z (over 5 years ago)
- Last Synced: 2025-10-04T06:00:29.434Z (9 months ago)
- Topics: grid, grid-layout, grid-system, responsive, responsive-design, responsive-grid, responsive-layout
- Language: HTML
- Homepage: https://www.npmjs.com/package/grilled
- Size: 47.9 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# grilled
A library for responsive grid system 🏁
## Demo
👉 [Website Demo](https://unpkg.com/grilled@1.1.1/dist/grid.html)
OR
## Background
I really love responsive grid systems to create responsive websites!
The libraries I use, namely Bootstrap and Material UI only offers 12 columns, and NG-ZORRO only offers 24 columns.
I sometimes wanted to have 10 columns, sometimes 5 columns, sometimes 9 columns ... 😞
## Getting Started
### Using CDN
Add this line to HTML file
```
```
✅
### Using NPM
Install the 'grilled' package using npm
```
npm i grilled
```
then \
add this line to index.js
```
require('grilled');
```
OR \
add this line to HTML file
```
```
✅
## Usage
Containers: grid1 ~ grid12 \
Items: xs0 ~ xs12, sm0 ~ sm12, md0 ~ md12, lg0 ~ lg12, xl0 ~ xl12, g0 ~ g12
| Screen Width |<600px|<960px|<1280px|<1920px|\>=1920px|
|----------------:|:-----|:-----|:------|:------|:--------|
|Range Key |xs |sm |md |lg |xl |
|Number of Columns|0 ~ 12|0 ~ 12|0 ~ 12 |0 ~ 12 |0 ~ 12 |
e.g.
```html
Big Item
Small Item
Item only on xs and sm
```
```html
sm0 lg8 g12
xs12 sm12 g8
xs12 sm12 g4
xs12 sm6 g3
xs12 sm6 g3
xs12 sm6 g3
xs12 sm6 g3
0
xs4 sm2 g1
xs8 sm4 g2
xs12 sm6 g3
xs12 sm6 g3
xs8 sm4 g2
xs4 sm2 g1
```
## Package Structure
```
.
|-- LICENSE
|-- README.md
|-- dist
| |-- grid.html
| `-- css
| `-- grid.min.css
|-- gulpfile.js
|-- index.js
|-- package-lock.json
|-- package.json
`-- src
|-- grid.html
`-- scss
|-- grid
| |-- _breakpoints.css
| |-- _breakpoints.css.map
| |-- _breakpoints.scss
| |-- _grid.css
| |-- _grid.css.map
| `-- _grid.scss
|-- grid.css
|-- grid.css.map
`-- grid.scss
```
## Authors
* **Yifan Ai** - *Initial work*
See also the list of [contributors](https://github.com/yifaneye/grilled/graphs/contributors) who participated in this project.
## License
This project is licensed under the MIT License