Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bartkozal/vue-fraction-grid
Flexbox based responsive fraction grid system
https://github.com/bartkozal/vue-fraction-grid
flexbox grid vue vuejs
Last synced: 7 days ago
JSON representation
Flexbox based responsive fraction grid system
- Host: GitHub
- URL: https://github.com/bartkozal/vue-fraction-grid
- Owner: bartkozal
- License: mit
- Archived: true
- Created: 2017-02-12T14:16:01.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-04-25T16:14:22.000Z (over 4 years ago)
- Last Synced: 2024-04-14T21:08:28.116Z (7 months ago)
- Topics: flexbox, grid, vue, vuejs
- Language: JavaScript
- Homepage:
- Size: 1.34 MB
- Stars: 85
- Watchers: 8
- Forks: 10
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-fraction-grid
Flexbox based responsive fraction grid system for Vue.js
### [Live Demo and Full Documentation](https://brtjkzl.github.io/vue-fraction-grid)
```html
...
...
...
```
## Installation
Install the package using `yarn` or `npm`:
```sh
$ yarn add vue-fraction-grid
# or
$ npm install --save vue-fraction-grid
```
### Global
Load the plugin by calling `Vue.use()`:
```js
import Vue from "vue";
import VueFractionGrid from "vue-fraction-grid";
Vue.use(VueFractionGrid);
```
Now you have access in your templates to ``, `` and `` components.
### Local
You may prefer to explicitly import the components in your templates:
```vue
...
...
import Container from "vue-fraction-grid/components/Container";
import Grid from "vue-fraction-grid/components/Grid";
import GridItem from "vue-fraction-grid/components/GridItem";
export default {
components: {
Container,
Grid,
GridItem
}
};
```
### CDN
Load the script file from CDN:
```html
new Vue({
el: "#root",
template: "<container>...</container>"
});
```
## Settings
```js
Vue.use(VueFractionGrid, {
container: "1020px",
gutter: "24px",
approach: "mobile-first",
breakpoints: {
compact: "320px 414px"
}
});
```
Configure grid by passing options as a second argument of `Vue.use()`. Configuration is merged to defaults that are listed above.
Available settings:
```
container - Default containers width. Works with any valid CSS values like: '1440px',
'52em', '100vw' etc. Set it to '100%' to use full-width fluid grid. Because
this is the maximum value, the grid will scale nicely for smaller viewports.
gutter - Gutter width. Works with any valid CSS values like '30px', '1rem' etc.
approach - 'mobile-first' or 'desktop-first'. Choose which approach of responsive web design
do you prefer. Breakpoint rules are based on this option.
breakpoints - List the grid breakpoints. Key is the breakpoint name for `:rwd` prop.
Value is the size and can include one or two CSS values separated
with a space.
```
## Components
### Container
Syntax:
```html
|" ]>
```
Center content of the site in the container:
```html
...
```
Override container's maximum width with `width` prop. This is useful when you need more than one container's type e.g. regular and full-width.
```html
...
```
```html
...
```
### Grid
Syntax:
```html
```
The most common usage and simple example of the grid:
```html
...
...
```
Nest grids however you like, the gutter is always the same. There is no need to wrap nested grids with containers.
```html
...
...
...
```
Horizontal alignment of grid items. This works simillar to `justify-content` attribute.
```html
...
```
```html
...
```
```html
...
```
```html
...
```
```html
...
```
Vertical alignment of grid items. This works simillar to `align-items` attribute.
```html
...
```
```html
...
```
```html
...
```
Remove gutter from grid items.
```html
...
```
Align content of the first item to the left and content of the second item to the right.
```html
...
```
Set the grid items direction. This works simillar to `flex-direction` attribute.
```html
...
```
```html
...
```
```html
...
```
Set the grid items wrap. This works simillar to `flex-wrap` attribute.
```html
...
```
```html
...
```
Mix props however you want to.
```html
...
```
### Grid Item
Syntax:
```html
"
|shrink=""
[:rwd="{ breakpointName: size }"
]
>
```
Use any size written in the fraction format. Grid item should be nested directly in the grid. Items fractions don't have to sum to 1. **Denominator can't be equal 0!**
```html
...
```
Fill the grid with a grid item by setting its size to `1/1`:
```html
...
```
Hide the grid item by setting its size to `0/1`:
```html
...
```
Use `grow` and `shrink` props instead of `size`. They work simillar to `flex-grow` and `flex-shrink` attributes. **Never mix size, grow and shrink into a single item!**
```html
...
```
```html
...
```
## Responsive Design
Responsive design is based on two options from settings: `approach` and `breakpoints`.
If you set approach to `mobile-first` breakpoints with a single value will respond to media queries using `min-width` attribute. If you use `desktop-first` instead, breakpoints will respond to `max-width`.
Breakpoints with two values respond to `(min-width: ) and (max-width: )` query.
Following configuration:
```js
Vue.use(VueFractionGrid, {
approach: "desktop-first",
breakpoints: {
compact: "415px",
tablet: "416px 1100px"
}
});
```
Is translated to this declaration from CSS:
```css
@media (max-width: 415px) {
...;
} /* compact */
@media (min-width: 416px) and (max-width: 1100px) {
...;
} /* tablet */
```
### API
Change the direction of a grid for specific breakpoints.
```html
...
```
```html
...
```
Change size of a grid item for specific breakpoints.
```html
...
```
Mix responsive design props for grid and items.
```html
...
...
...
```
## Development
1. Clone the repository:
```sh
$ git clone [email protected]:brtjkzl/vue-fraction-grid.git
```
2. Run scripts from package.json using `npm run` / `yarn run` in the main directory:
```
demo - Start demo page with implementation of all examples
test - Run tests using Jest
lint - Lint JS and CSS code of components, utils and installation
docs - Start docs locally
deploy - Deploy docs to GitHub Pages
dist - Create an optimized bundle in UMD format
```
---
Code is open sourced [on GitHub](https://github.com/brtjkzl/vue-fraction-grid). Up to date changelog is available under [the releases section](https://github.com/brtjkzl/vue-fraction-grid/releases).