Flexbox based responsive fraction grid system

Overview

vue-fraction-grid

Flexbox based responsive fraction grid system for Vue.js

Live Demo and Full Documentation

<container>
  <grid vertical="middle" :rwd="{compact: 'stack'}">
    <grid-item size="1/6" :rwd="{compact: '0/1'}">
      ...
    </grid-item>

    <grid-item size="3/6" :rwd="{compact: '1/1'}">
      ...
    </grid-item>

    <grid-item size="2/6" :rwd="{compact: '1/1'}">
      ...
    </grid-item>
  </grid>
</container>

Installation

Install the package using yarn or npm:

$ yarn add vue-fraction-grid

# or

$ npm install --save vue-fraction-grid

Global

Load the plugin by calling Vue.use():

import Vue from "vue";
import VueFractionGrid from "vue-fraction-grid";

Vue.use(VueFractionGrid);

Now you have access in your templates to <container>, <grid> and <grid-item> components.

Local

You may prefer to explicitly import the components in your templates:

<template>
  <container>
    <grid>
      <grid-item size="1/2">
        ...
      </grid-item>
      <grid-item size="1/2">
        ...
      </grid-item>
    </grid>
  </container>
</template>

<script>
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
  }
};
</script>

CDN

Load the script file from CDN:

<div id="root"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
<script src="//unpkg.com/vue-fraction-grid"></script>
<script>
  new Vue({
    el: "#root",
    template: "<container>...</container>"
  });
</script>

Settings

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:

<container [width="<length>|<percentage>" ]></container>

Center content of the site in the container:

<container>
  ...
</container>

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.

<container width="100%">
  ...
</container>
<container width="25vw">
  ...
</container>

Grid

Syntax:

<grid
  [horizontal="left|center|right"
  vertical="top|middle|bottom"
  direction="reverse|stack|stack-reverse"
  wrap="nowrap|wrap|wrap-reverse"
  :rwd="{ breakpointName: direction }"
  flat
  pair]
></grid>

The most common usage and simple example of the grid:

<grid>
  <grid-item size="1/3">
    ...
  </grid-item>

  <grid-item size="2/3">
    ...
  </grid-item>
</grid>

Nest grids however you like, the gutter is always the same. There is no need to wrap nested grids with containers.

<grid>
  <grid-item size="2/3">
    <grid>
      <grid-item size="1/2">
        ...
      </grid-item>

      <grid-item size="1/2">
        ...
      </grid-item>
    </grid>
  </grid-item>

  <grid-item size="1/3">
    ...
  </grid-item>
</grid>

Horizontal alignment of grid items. This works simillar to justify-content attribute.

<grid horizontal="left">
  ...
</grid>
<grid horizontal="center">
  ...
</grid>
<grid horizontal="right">
  ...
</grid>
<grid horizontal="around">
  ...
</grid>
<grid horizontal="between">
  ...
</grid>

Vertical alignment of grid items. This works simillar to align-items attribute.

<grid vertical="top">
  ...
</grid>
<grid vertical="middle">
  ...
</grid>
<grid vertical="bottom">
  ...
</grid>

Remove gutter from grid items.

<grid flat>
  ...
</grid>

Align content of the first item to the left and content of the second item to the right.

<grid pair>
  ...
</grid>

Set the grid items direction. This works simillar to flex-direction attribute.

<grid direction="reverse">
  ...
</grid>
<grid direction="stack">
  ...
</grid>
<grid direction="stack-reverse">
  ...
</grid>

Set the grid items wrap. This works simillar to flex-wrap attribute.

<grid wrap="wrap">
  ...
</grid>
<grid wrap="wrap-reverse">
  ...
</grid>

Mix props however you want to.

<grid horizontal="right" vertical="bottom" direction="reverse" pair>
  ...
</grid>

Grid Item

Syntax:

<grid-item
  size="<number>/<number>"
  |grow="<number>"
  |shrink="<number>"
  [:rwd="{ breakpointName: size }"
  ]
></grid-item>

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!

<grid-item size="123/456">
  ...
</grid-item>

Fill the grid with a grid item by setting its size to 1/1:

<grid-item size="1/1">
  ...
</grid-item>

Hide the grid item by setting its size to 0/1:

<grid-item size="0/1">
  ...
</grid-item>

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!

<grid-item grow="2">
  ...
</grid-item>
<grid-item shrink="0.5">
  ...
</grid-item>

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: <length>) and (max-width: <length>) query.

Following configuration:

Vue.use(VueFractionGrid, {
  approach: "desktop-first",
  breakpoints: {
    compact: "415px",
    tablet: "416px 1100px"
  }
});

Is translated to this declaration from 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.

<grid :rwd="{compact: 'reverse'}">
  ...
</grid>
<grid direction="stack" :rwd="{compact: 'stack-reverse'}">
  ...
</grid>

Change size of a grid item for specific breakpoints.

<grid-item size="3/4" :rwd="{compact: '0/1'}">
  ...
</grid-item>

Mix responsive design props for grid and items.

<grid :rwd="{compact: 'stack'}">
  <grid-item size="1/6" :rwd="{tablet: '0/1', compact: '1/1'}">
    ...
  </grid-item>
  <grid-item size="1/2" :rwd="{tablet: '1/2', compact: '0/1'}">
    ...
  </grid-item>
  <grid-item size="1/3" :rwd="{tablet: '1/2', compact: '1/1'}">
    ...
  </grid-item>
</grid>

Development

  1. Clone the repository:

    $ 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. Up to date changelog is available under the releases section.

You might also like...
Auto responsive grid layout library for Vue.
Auto responsive grid layout library for Vue.

autoresponsive-vue Auto responsive grid layout library for Vue. Examples Live demo & docs: xudafeng.github.io/autoresponsive-vue Installation $ npm i

🧙‍♂️🔌 Responsive Magic Grid for Vue
🧙‍♂️🔌 Responsive Magic Grid for Vue

Vue-Magic-Grid This is a Vue.js port of @e-oj's Magic Grid. Please check the /test folder for a example. If you use images, make sure they have a set

Responsive, Draggable & Resizable Dashboard (Grid) for Vue

vue-responsive-dash A Responsive, Draggable & Resizable Dashboard (grid) made with vue and typescript. Inspired by React-Grid-Layout & Vue-Grid-Layout

Auto responsive grid layout library for Vue.
Auto responsive grid layout library for Vue.

autoresponsive-vue Auto responsive grid layout library for Vue. Examples Live demo & docs: xudafeng.github.io/autoresponsive-vue Installation $ npm i

Virtual Scrolling Grid made for VueJS based on CSS grids.

Vue Virtual Grid Virtual Scrolling Grid made for VueJS based on CSS grids. NPM Package | Demo Website Render any Vue Component (images, iframes, conte

A Vue plugin that provides responsive design helpers, based on breakpoints.

A Vue plugin that provides responsive design helpers, based on breakpoints.

A draggable and resizable grid layout, for Vue.js.

vue-grid-layout Documentation Website What is Vue Grid Layout? vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired by

A vuejs grid with draggable and resizable boxes

dnd-grid A vuejs grid with draggable and resizable boxes Demo page The demo requires Vue = 2.3.0 because of the ":layout.sync" feature The components

Lightweight set of functional grid components

vue-grid-styled Vue.js port of @jxnblk's React library, grid-styled Installation yarn add vue-grid-styled Default Theme // Breakpoints const breakpoin

Comments
  • Bump diff from 3.2.0 to 3.5.0

    Bump diff from 3.2.0 to 3.5.0

    Bumps diff from 3.2.0 to 3.5.0.

    Changelog

    Sourced from diff's changelog.

    v3.5.0 - March 4th, 2018

    • Omit redundant slice in join method of diffArrays - 1023590
    • Support patches with empty lines - fb0f208
    • Accept a custom JSON replacer function for JSON diffing - 69c7f0a
    • Optimize parch header parser - 2aec429
    • Fix typos - e89c832

    Commits

    v3.4.0 - October 7th, 2017

    • #183 - Feature request: ability to specify a custom equality checker for diffArrays
    • #173 - Bug: diffArrays gives wrong result on array of booleans
    • #158 - diffArrays will not compare the empty string in array?
    • comparator for custom equality checks - 30e141e
    • count oldLines and newLines when there are conflicts - 53bf384
    • Fix: diffArrays can compare falsey items - 9e24284
    • Docs: Replace grunt with npm test - 00e2f94

    Commits

    v3.3.1 - September 3rd, 2017

    • #141 - Cannot apply patch because my file delimiter is "/r/n" instead of "/n"
    • #192 - Fix: Bad merge when adding new files (#189)
    • correct spelling mistake - 21fa478

    Commits

    v3.3.0 - July 5th, 2017

    • #114 - /patch/merge not exported
    • Gracefully accept invalid newStart in hunks, same as patch(1) does. - d8a3635
    • Use regex rather than starts/ends with for parsePatch - 6cab62c
    • Add browser flag - e64f674
    • refactor: simplified code a bit more - 8f8e0f2
    • refactor: simplified code a bit - b094a6f
    • fix: some corrections re ignoreCase option - 3c78fd0
    • ignoreCase option - 3cbfbb5
    • Sanitize filename while parsing patches - 2fe8129
    • Added better installation methods - aced50b
    • Simple export of functionality - 8690f31

    Commits

    Commits
    • e9ab948 v3.5.0
    • b73884c Update release notes
    • 8953021 Update release notes
    • 1023590 Omit redundant slice in join method of diffArrays
    • c72ef4a Add missing test coverage
    • b9ef24f Support patches with empty lines
    • 10aaabb Support patches with empty lines
    • 196d3aa Support patches with empty lines
    • e24d789 Support patches with empty lines
    • 8616a02 Support patches with empty lines
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump lodash from 4.17.4 to 4.17.15

    Bump lodash from 4.17.4 to 4.17.15

    Bumps lodash from 4.17.4 to 4.17.15.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump eslint from 3.15.0 to 4.18.2

    Bump eslint from 3.15.0 to 4.18.2

    Bumps eslint from 3.15.0 to 4.18.2.

    Release notes

    Sourced from eslint's releases.

    v4.18.2

    • 6b71fd0 Fix: [email protected], because 4.0.3 needs "ajv": "^6.0.1" (#10022) (Mathieu Seiler)
    • 3c697de Chore: fix incorrect comment about linter.verify return value (#10030) (Teddy Katz)
    • 9df8653 Chore: refactor parser-loading out of linter.verify (#10028) (Teddy Katz)
    • f6901d0 Fix: remove catastrophic backtracking vulnerability (fixes #10002) (#10019) (Jamie Davis)
    • e4f52ce Chore: Simplify dataflow in linter.verify (#10020) (Teddy Katz)
    • 33177cd Chore: make library files non-executable (#10021) (Teddy Katz)
    • 558ccba Chore: refactor directive comment processing (#10007) (Teddy Katz)
    • 18e15d9 Chore: avoid useless catch clauses that just rethrow errors (#10010) (Teddy Katz)
    • a1c3759 Chore: refactor populating configs with defaults in linter (#10006) (Teddy Katz)
    • aea07dc Fix: Make max-len ignoreStrings ignore JSXText (fixes #9954) (#9985) (Rachael Sim)

    v4.18.1

    • f417506 Fix: ensure no-await-in-loop reports the correct node (fixes #9992) (#9993) (Teddy Katz)
    • 3e99363 Docs: Fixed typo in key-spacing rule doc (#9987) (Jaid)
    • 7c2cd70 Docs: deprecate experimentalObjectRestSpread (#9986) (Toru Nagashima)

    v4.18.0

    • 70f22f3 Chore: Apply memoization to config creation within glob utils (#9944) (Kenton Jacobsen)
    • 0e4ae22 Update: fix indent bug with binary operators/ignoredNodes (fixes #9882) (#9951) (Teddy Katz)
    • 47ac478 Update: add named imports and exports for object-curly-newline (#9876) (Nicholas Chua)
    • e8efdd0 Fix: support Rest/Spread Properties (fixes #9885) (#9943) (Toru Nagashima)
    • f012b8c Fix: support Async iteration (fixes #9891) (#9957) (Toru Nagashima)
    • 74fa253 Docs: Clarify no-mixed-operators options (fixes #9962) (#9964) (Ivan Hayes)
    • 426868f Docs: clean up key-spacing docs (fixes #9900) (#9963) (Abid Uzair)
    • 4a6f22e Update: support eslint-disable-* block comments (fixes #8781) (#9745) (Erin)
    • 777283b Docs: Propose fix typo for function (#9965) (John Eismeier)
    • bf3d494 Docs: Fix typo in max-len ignorePattern example. (#9956) (Tim Martin)
    • d64fbb4 Docs: fix typo in prefer-destructuring.md example (#9930) (Vse Mozhet Byt)
    • f8d343f Chore: Fix default issue template (#9946) (Kai Cataldo)

    v4.17.0

    • 1da1ada Update: Add "multiline" type to padding-line-between-statements (#8668) (Matthew Bennett)
    • bb213dc Chore: Use messageIds in some of the core rules (#9648) (Jed Fox)
    • 1aa1970 Docs: remove outdated rule naming convention (#9925) (Teddy Katz)
    • 3afaff6 Docs: Add prefer-destructuring variable reassignment example (#9873) (LePirlouit)
    • d20f6b4 Fix: Typo in error message when running npm (#9866) (Maciej Kasprzyk)
    • 51ec6a7 Docs: Use GitHub Multiple PR/Issue templates (#9911) (Kai Cataldo)
    • dc80487 Update: space-unary-ops uses astUtils.canTokensBeAdjacent (fixes #9907) (#9906) (Kevin Partington)
    • 084351b Docs: Fix the messageId example (fixes #9889) (#9892) (Jed Fox)
    • 9cbb487 Docs: Mention the globals key in the no-undef docs (#9867) (Dan Dascalescu)

    v4.16.0

    • e26a25f Update: allow continue instead of if wrap in guard-for-in (fixes #7567) (#9796) (Michael Ficarra)
    • af043eb Update: Add NewExpression support to comma-style (#9591) (Frazer McLean)
    • 4f898c7 Build: Fix JSDoc syntax errors (#9813) (Matija Marohnić)
    • 13bcf3c Fix: Removing curly quotes in no-eq-null report message (#9852) (Kevin Partington)
    • b96fb31 Docs: configuration hierarchy for CLIEngine options (fixes #9526) (#9855) (PiIsFour)
    • 8ccbdda Docs: Clarify that -c configs merge with .eslintrc.* (fixes #9535) (#9847) (Kevin Partington)
    • 978574f Docs: Fix examples for no-useless-escape (#9853) (Toru Kobayashi)
    ... (truncated)
    Changelog

    Sourced from eslint's changelog.

    v4.18.2 - March 2, 2018

    • 6b71fd0 Fix: [email protected], because 4.0.3 needs "ajv": "^6.0.1" (#10022) (Mathieu Seiler)
    • 3c697de Chore: fix incorrect comment about linter.verify return value (#10030) (Teddy Katz)
    • 9df8653 Chore: refactor parser-loading out of linter.verify (#10028) (Teddy Katz)
    • f6901d0 Fix: remove catastrophic backtracking vulnerability (fixes #10002) (#10019) (Jamie Davis)
    • e4f52ce Chore: Simplify dataflow in linter.verify (#10020) (Teddy Katz)
    • 33177cd Chore: make library files non-executable (#10021) (Teddy Katz)
    • 558ccba Chore: refactor directive comment processing (#10007) (Teddy Katz)
    • 18e15d9 Chore: avoid useless catch clauses that just rethrow errors (#10010) (Teddy Katz)
    • a1c3759 Chore: refactor populating configs with defaults in linter (#10006) (Teddy Katz)
    • aea07dc Fix: Make max-len ignoreStrings ignore JSXText (fixes #9954) (#9985) (Rachael Sim)

    v4.18.1 - February 20, 2018

    • f417506 Fix: ensure no-await-in-loop reports the correct node (fixes #9992) (#9993) (Teddy Katz)
    • 3e99363 Docs: Fixed typo in key-spacing rule doc (#9987) (Jaid)
    • 7c2cd70 Docs: deprecate experimentalObjectRestSpread (#9986) (Toru Nagashima)

    v4.18.0 - February 16, 2018

    • 70f22f3 Chore: Apply memoization to config creation within glob utils (#9944) (Kenton Jacobsen)
    • 0e4ae22 Update: fix indent bug with binary operators/ignoredNodes (fixes #9882) (#9951) (Teddy Katz)
    • 47ac478 Update: add named imports and exports for object-curly-newline (#9876) (Nicholas Chua)
    • e8efdd0 Fix: support Rest/Spread Properties (fixes #9885) (#9943) (Toru Nagashima)
    • f012b8c Fix: support Async iteration (fixes #9891) (#9957) (Toru Nagashima)
    • 74fa253 Docs: Clarify no-mixed-operators options (fixes #9962) (#9964) (Ivan Hayes)
    • 426868f Docs: clean up key-spacing docs (fixes #9900) (#9963) (Abid Uzair)
    • 4a6f22e Update: support eslint-disable-* block comments (fixes #8781) (#9745) (Erin)
    • 777283b Docs: Propose fix typo for function (#9965) (John Eismeier)
    • bf3d494 Docs: Fix typo in max-len ignorePattern example. (#9956) (Tim Martin)
    • d64fbb4 Docs: fix typo in prefer-destructuring.md example (#9930) (Vse Mozhet Byt)
    • f8d343f Chore: Fix default issue template (#9946) (Kai Cataldo)

    v4.17.0 - February 2, 2018

    • 1da1ada Update: Add "multiline" type to padding-line-between-statements (#8668) (Matthew Bennett)
    • bb213dc Chore: Use messageIds in some of the core rules (#9648) (Jed Fox)
    • 1aa1970 Docs: remove outdated rule naming convention (#9925) (Teddy Katz)
    • 3afaff6 Docs: Add prefer-destructuring variable reassignment example (#9873) (LePirlouit)
    • d20f6b4 Fix: Typo in error message when running npm (#9866) (Maciej Kasprzyk)
    • 51ec6a7 Docs: Use GitHub Multiple PR/Issue templates (#9911) (Kai Cataldo)
    • dc80487 Update: space-unary-ops uses astUtils.canTokensBeAdjacent (fixes #9907) (#9906) (Kevin Partington)
    • 084351b Docs: Fix the messageId example (fixes #9889) (#9892) (Jed Fox)
    • 9cbb487 Docs: Mention the globals key in the no-undef docs (#9867) (Dan Dascalescu)

    v4.16.0 - January 19, 2018

    • e26a25f Update: allow continue instead of if wrap in guard-for-in (fixes #7567) (#9796) (Michael Ficarra)
    • af043eb Update: Add NewExpression support to comma-style (#9591) (Frazer McLean)
    ... (truncated)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(v1.1.0)
Owner
Bartłomiej Kozal
Bartłomiej Kozal
A flexbox grid system.

VueFlex A flexbox grid system. demo Try it out! setup npm npm install @seregpie/vueflex Register the components globally. import Vue from 'vue'; impor

Sergej Sintschilin 13 Oct 3, 2020
Vue smarter layout components. Based on css flexbox. Support responsive design, server side render. 5 KB gzipped.

vue-colrow Smarter layout components. Based on css flexbox. Support responsive design, server side render. 3 KB gzipped. Document. It also has a React

Xinxin 7 Sep 13, 2021
vue-products-grid is a responsive Vue component to create a products grid for ecommerce apps.

| vue-products-grid vue-products-grid is a responsive Vue component to create a products grid for ecommerce apps. Fully configurable with different op

Antonio 4 Feb 14, 2020
Responsive grid system based on Bootstrap for Vue

Vue Grid Responsive Responsive grid system based on Bootstrap for Vue. • • Installation NPM vue 2.0 npm i vue-grid-responsive // OR yarn add vue-grid-

André Lins 27 Sep 11, 2022
Vue-grid-layout is a grid layout system, like Gridster, for Vue.js.

vue-grid-layout vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired by React-Grid-Layout Current version: 2.3.9 (Supp

Danny Funkat 0 Feb 22, 2022
:bento: Vue.js 2.x responsive grid system with smooth sorting, drag-n-drop and reordering

Vue.js Grid ( Experiment ) ⚠️ This an experement and not a production-ready plugin Fixed size grid for Vue.js This is very a first version of the plug

Yev Vlasenko 935 Sep 28, 2022
Vue.js 2.x responsive grid system with smooth sorting, drag-n-drop and reordering

Vue.js 2.x responsive grid system with smooth sorting, drag-n-drop and reordering

Yev Vlasenko 935 Sep 28, 2022
A reusable flexbox component using functional css and functional Vue components.

vue-flex A Vue.js functional component to wrap anything in flexbox. (1.8kb gzipped js+css, or 1.2k js & .6k css) Getting Started import Vue from "vue"

Alex Regan 61 Mar 1, 2021
A VueJS flexbox partitionable layout

A VueJS flexbox partitionable layout

José Porto 3 Sep 15, 2021
Layoutit grid is a CSS Grid layout generator

Layoutit grid is a CSS Grid layout generator. Quickly draw down web pages layouts with our clean editor, and get HTML and CSS code to quickstart your next project.

Leniolabs_ 1.3k Oct 4, 2022