Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ilker0/iron-grid-system
A responsive grid system for Vue 3.x.
https://github.com/ilker0/iron-grid-system
grid grid-system javascript vue vue3
Last synced: about 1 month ago
JSON representation
A responsive grid system for Vue 3.x.
- Host: GitHub
- URL: https://github.com/ilker0/iron-grid-system
- Owner: ilker0
- Created: 2021-10-03T12:59:26.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2021-10-08T11:24:00.000Z (over 2 years ago)
- Last Synced: 2024-03-25T05:03:37.480Z (about 2 months ago)
- Topics: grid, grid-system, javascript, vue, vue3
- Language: JavaScript
- Homepage:
- Size: 165 KB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Lists
- awesome-vue - iron-grid-system - A responsive grid system for Vue 3.x. (Components & Libraries / UI Layout)
- awesome-vue - iron-grid-system - A responsive grid system for Vue 3.x. (Components & Libraries / UI Layout)
- awesome-vue - iron-grid-system - A responsive grid system for Vue 3.x. (Components & Libraries / UI Layout)
README
# Iron Grid System
A responsive grid system for Vue 3.x.
## 📦 Installation
```
npm install iron-grid-system --save
```
or
```
yarn install iron-grid-system
```
## ⏩ Quick Start
[](https://codesandbox.io/s/competent-cerf-wd3h4?file=/src/App.vue)
## 🔨 Usage
#### For Vue 3.x
```
import { createApp } from "vue";
import App from "./App.vue";
import 'iron-grid-system/dist/style.css';
const app = createApp(App);
app.mount("#app");
```
You can create your grid system using three components (Container, Row, Col)
```
import { defineComponent } from 'vue';
import { Container, Row, Col } from 'iron-grid-system';
export default defineComponent({
name: 'ServeDev',
components: {
Container,
Row,
Col,
},
});
Demo 1
Demo 2
```
## 🛠️ Configuration
custom.scss file should be created for customization
```
import { createApp } from "vue";
import App from "./App.vue";
import "./assets/custom.scss";
const app = createApp(App);
app.mount("#app");
```
Default values
| Variable name | Description | Default value |
| --------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| \$grid-columns | Default number of grid columns. | 12 |
| \$container-max-width | Maximum container width. | 1480px |
| \$container-gutter | Right and left space value of the container. | 30px |
| \$grid-gutter | Space between columns. | (0, 4, 8, 16, 24, 32, 40) |
| \$breakpoints | Screen breakpoints. | sm: '(max-width: 480px)'
md: '(min-width: 481px) and (max-width: 767px)'
lg: '(min-width: 768px) and (max-width: 1024px)'
xl: '(min-width: 1025px)' |
Example custom.scss
```
@import "../../node_modules/iron-grid-system/src/style/iron-variables";
$grid-columns: 12;
$container-max-width: 1000px;
$container-gutter: 0px;
$grid-gutter: (0, 4, 8);
$breakpoints: (
sm: "(max-width: 480px)",
md: "(min-width: 481px) and (max-width: 767px)",
lg: "(min-width: 768px) and (max-width: 1024px)",
xl: "(min-width: 1025px)",
);
@import "../../node_modules/iron-grid-system/src/style/iron-container";
@import "../../node_modules/iron-grid-system/src/style/iron-row";
@import "../../node_modules/iron-grid-system/src/style/iron-col";
```
## 📃 API
### Container
Container properties
| Property | Description | Type | Default |
| -------- | ---------------------------------------------------------------- | ---------------------------------------------- | ------- |
| tag | Container's html tag element. | div, section, aside, nav, header, main, footer | div |
| fluid | Full width container, spanning the entire width of the viewport. | Boolean | false |
### Row
Row properties
| Property | Description | Type | Default |
| -------- | --------------------------------- | ---------------------------------------------- | ------- |
| tag | Row html tag element. | div, section, aside, nav, header, main, footer | div |
| justify | Horizontal arrangement. | start, end, center, between, around | start |
| align | Vertical alignment. | start, end, center, between, around | start |
| hGutter | Spacing horizontal between column | Number, Object({sm: 4, md: 8, lg: 16, xl: 24}) | 0 |
| vGutter | Spacing vertical between column | Number, Object({sm: 4, md: 8, lg: 16, xl: 24}) | 0 |
### Col
Col properties
| Property | Description | Type | Default |
| -------- | ----------------------------------------------- | ---------------------------------------------- | ------- |
| tag | Col html tag element. | div, section, aside, nav, header, main, footer | div |
| cols | Col width. | Number, Object({sm: 12, md: 6, lg: 4 , xl: 3}) | 0 |
| offset | Number of cells to shift the cell from the left | Number, Object({sm: 12, md: 6, lg: 4 , xl: 3}) | 0 |
| order | Raster order | Number, Object({sm: 3, md: 4, lg: 2 , xl: 1}) | 0 |