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: 4 days 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 6 years ago)
• Default Branch: master
• Last Pushed: 2022-04-28T19:38:54.000Z (over 2 years ago)
• Last Synced: 2024-10-03T13:48:04.844Z (about 1 month 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

README

        
# vue-grid-styled

![Npm badge](https://img.shields.io/npm/v/vue-grid-styled.svg)

> 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).