https://github.com/mattrothenberg/vue-grid-styled
Lightweight set of functional grid components
https://github.com/mattrothenberg/vue-grid-styled
css functional grid vue vuejs
Last synced: 8 months ago
JSON representation
Lightweight set of functional grid components
- Host: GitHub
- URL: https://github.com/mattrothenberg/vue-grid-styled
- Owner: mattrothenberg
- License: mit
- Archived: true
- Created: 2018-05-10T13:42:04.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-04-28T19:38:54.000Z (over 3 years ago)
- Last Synced: 2024-10-03T13:48:04.844Z (about 1 year ago)
- Topics: css, functional, grid, vue, vuejs
- Language: JavaScript
- Homepage: https://vue-grid-styled.netlify.com/
- Size: 1.35 MB
- Stars: 17
- Watchers: 2
- Forks: 3
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-vue - vue-grid-styled - A lightweight set of functional grid components, ported from React's [grid-styled](https://github.com/jxnblk/grid-styled/) (Components & Libraries / UI Layout)
- awesome-vue-zh - Vue格风格 - 一组轻量级的功能网格组件,从React移植而来[格子风格](https://github.com/jxnblk/grid-styled/) (UI布局 / 游览)
- awesome-vue - vue-grid-styled ★12 - A lightweight set of functional grid components, ported from React's [grid-styled ★1823](https://github.com/rebassjs/grid) (UI Layout / Tour)
- awesome-vue - vue-grid-styled - Lightweight set of functional grid components ` 📝 3 years ago ` (UI Layout [🔝](#readme))
- awesome-vue - vue-grid-styled - A lightweight set of functional grid components, ported from React's [grid-styled](https://github.com/jxnblk/grid-styled/) (UI Layout / Tour)
README
# vue-grid-styled
> Vue.js port of @jxnblk's React library, [grid-styled](https://github.com/jxnblk/grid-styled)
## Installation
```shell
yarn add vue-grid-styled
```
## Default Theme
```js
// Breakpoints
const breakpoints = ["40em", "52em", "64em"];
// @media screen and (min-width: 40em)
// @media screen and (min-width: 52em)
// @media screen and (min-width: 64em)
// Typographic Scale (numbers are converted to px values)
const fontSizes = [12, 14, 16, 20, 24, 32, 48, 64, 72];
// Spacing Scale (used for margin and padding)
const space = [0, 4, 8, 16, 32, 64, 128, 256, 512];
```
## Import & Install
```js
import VueGridStyled from "vue-grid-styled";
// OR
import { Box, Flex } from "vue-grid-styled";
// OPTIONAL: Pass a custom theme
const theme = {
colors: {
red: "#F22613"
}
};
Vue.use(VueGridStyled, { theme });
// OR
Vue.component("v-box", Box);
Vue.component("v-flex", Flex);
```
## Component Usage
`vue-grid-styled` tries to emulate the [grid-styled API](https://github.com/jxnblk/grid-styled#box-) as closely as possible. Check it out for comprehensive documentation.
One exception is that the `` component exposes a `tag` prop that you can use to programatically assign a HTML tag (e.g., "div", "section").
In a nutshell, replace the JSX syntax with Vue "binding" syntax and you should be good to go! Here are a few clarifying examples.
#### Examples
```jsx
// Grid-Styled JSX: Pixel Width
```
```html
```
```jsx
// JSX: Responsive Widths
```
```html
```
```html
```
## Contributing
See [CONTRIBUTING.md](.github/CONTRIBUTING.md).