A lightweight set of functional grid components

vue-grid-styled

A lightweight set of functional grid components, ported from React's grid-styled.

Vue.js port of @jxnblk's React library, grid-styled. Lightweight set of functional components.

Installation

yarn add vue-grid-styled

Default Theme

// 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

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 as closely as possible. Check it out for comprehensive documentation.

One exception is that the <v-box> 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

// Grid-Styled JSX: Pixel Width
<Box width={256} />

<!-- VUE: Pixel Width -->
<v-box :width="256" tag="section" />

// JSX: Responsive Widths
<Box width={[1 / 2, 1 / 3, 1 / 4, 1 / 6]} />

<!-- VUE: Responsive widths -->
<v-box
  tag="main"
  :width="[
    1/2,
    1/3,
    1/4,
    1/6
  ]"
/>

<!-- Altogther now! -->
<v-flex flexWrap="wrap" maxWidth="960px" mx="auto">
  <v-box :width="[1, 1/2]" :px="[0, 1]" :mb="2">
    <v-box bg="aliceblue" :py="4"/>
  </v-box>
  <v-box :width="[1, 1/2]" :px="[0, 1]" :mb="2">
    <v-box bg="aliceblue" :py="4"/>
  </v-box>
</v-flex>