Lightweight set of functional grid components

Overview

vue-grid-styled

Npm badge

Vue.js port of @jxnblk's React library, grid-styled

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>

Contributing

See CONTRIBUTING.md.

Comments
  • chore(deps): bump elliptic from 6.4.0 to 6.5.3

    chore(deps): bump elliptic from 6.4.0 to 6.5.3

    Bumps elliptic from 6.4.0 to 6.5.3.

    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] 1
  • chore(deps-dev): bump lodash from 4.17.10 to 4.17.19

    chore(deps-dev): bump lodash from 4.17.10 to 4.17.19

    Bumps lodash from 4.17.10 to 4.17.19.

    Release notes

    Sourced from lodash's releases.

    4.17.16

    Commits
    Maintainer changes

    This version was pushed to npm by mathias, a new releaser for lodash since your current version.


    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] 1
  • chore(deps): bump async from 1.5.2 to 2.6.4

    chore(deps): bump async from 1.5.2 to 2.6.4

    Bumps async from 1.5.2 to 2.6.4.

    Release notes

    Sourced from async's releases.

    v2.3.0

    • Added support for ES2017 async functions. Wherever you can pass a Node-style/CPS function that uses a callback, you can also pass an async function. Previously, you had to wrap async functions with asyncify. The caveat is that it will only work if async functions are supported natively in your environment, transpiled implementations can't be detected. (#1386, #1390)

    v2.2.0

    • Added groupBy, and the Series/Limit equivalents, analogous to _.groupBy (#1364)
    • Fixed transform bug when callback was not passed (#1381)

    v2.1.5

    • Fix auto bug when function names collided with Array.prototype (#1358)
    • Improve some error messages (#1349)
    • Avoid stack overflow case in queue
    • Fixed an issue in some, every and find where processing would continue after the result was determined.
    • Cleanup implementations of some, every and find

    v2.1.3

    • Make bundle size smaller
    • Create optimized hotpath for filter in array case.

    v2.1.2

    • Fixed a stackoverflow bug with detect, some, every on large inputs (#1293).

    v2.1.0

    • retry and retryable now support an optional errorFilter function that determines if the task should retry on the error (#1256, #1261)
    • Optimized array iteration in race, cargo, queue, and priorityQueue (#1253)

    v2.0.0

    Lots of changes here!

    First and foremost, we have a slick new site for docs. Special thanks to @​hargasinski for his work converting our old docs to jsdoc format and implementing the new website. Also huge ups to @​ivanseidel for designing our new logo. It was a long process for both of these tasks, but I think these changes turned out extraordinary well.

    The biggest feature is modularization. You can now require("async/series") to only require the series function. Every Async library function is available this way. You still can require("async") to require the entire library, like you could do before.

    We also provide Async as a collection of ES2015 modules. You can now import {each} from 'async-es' or import waterfall from 'async-es/waterfall'. If you are using only a few Async functions, and are using a ES bundler such as Rollup, this can significantly lower your build size.

    Major thanks to @​Kikobeats, @​aearly and @​megawac for doing the majority of the modularization work, as well as @​jdalton and @​Rich-Harris for advisory work on the general modularization strategy.

    Another one of the general themes of the 2.0 release is standardization of what an "async" function is. We are now more strictly following the node-style continuation passing style. That is, an async function is a function that:

    1. Takes a variable number of arguments
    2. The last argument is always a callback
    3. The callback can accept any number of arguments
    4. The first argument passed to the callback will be treated as an error result, if the argument is truthy
    5. Any number of result arguments can be passed after the "error" argument
    6. The callback is called once and exactly once, either on the same tick or later tick of the JavaScript event loop.

    There were several cases where Async accepted some functions that did not strictly have these properties, most notably auto, every, some, and filter.

    Another theme is performance. We have eliminated internal deferrals in all cases where they make sense. For example, in waterfall and auto, there was a setImmediate between each task -- these deferrals have been removed. A setImmediate call can add up to 1ms of delay. This might not seem like a lot, but it can add up if you are using many Async functions in the course of processing a HTTP request, for example. Nearly all asynchronous functions that do I/O already have some sort of deferral built in, so the extra deferral is unnecessary. The trade-off of this change is removing our built-in stack-overflow defense. Many synchronous callback calls in series can quickly overflow the JS call stack. If you do have a function that is sometimes synchronous (calling its callback on the same tick), and are running into stack overflows, wrap it with async.ensureAsync().

    Another big performance win has been re-implementing queue, cargo, and priorityQueue with doubly linked lists instead of arrays. This has lead to queues being an order of magnitude faster on large sets of tasks.

    ... (truncated)

    Changelog

    Sourced from async's changelog.

    v2.6.4

    • Fix potential prototype pollution exploit (#1828)

    v2.6.3

    • Updated lodash to squelch a security warning (#1675)

    v2.6.2

    • Updated lodash to squelch a security warning (#1620)

    v2.6.1

    • Updated lodash to prevent npm audit warnings. (#1532, #1533)
    • Made async-es more optimized for webpack users (#1517)
    • Fixed a stack overflow with large collections and a synchronous iterator (#1514)
    • Various small fixes/chores (#1505, #1511, #1527, #1530)

    v2.6.0

    • Added missing aliases for many methods. Previously, you could not (e.g.) require('async/find') or use async.anyLimit. (#1483)
    • Improved queue performance. (#1448, #1454)
    • Add missing sourcemap (#1452, #1453)
    • Various doc updates (#1448, #1471, #1483)

    v2.5.0

    • Added concatLimit, the Limit equivalent of concat (#1426, #1430)
    • concat improvements: it now preserves order, handles falsy values and the iteratee callback takes a variable number of arguments (#1437, #1436)
    • Fixed an issue in queue where there was a size discrepancy between workersList().length and running() (#1428, #1429)
    • Various doc fixes (#1422, #1424)

    v2.4.1

    • Fixed a bug preventing functions wrapped with timeout() from being re-used. (#1418, #1419)

    v2.4.0

    • Added tryEach, for running async functions in parallel, where you only expect one to succeed. (#1365, #687)
    • Improved performance, most notably in parallel and waterfall (#1395)
    • Added queue.remove(), for removing items in a queue (#1397, #1391)
    • Fixed using eval, preventing Async from running in pages with Content Security Policy (#1404, #1403)
    • Fixed errors thrown in an asyncifyed function's callback being caught by the underlying Promise (#1408)
    • Fixed timing of queue.empty() (#1367)
    • Various doc fixes (#1314, #1394, #1412)

    v2.3.0

    • Added support for ES2017 async functions. Wherever you can pass a Node-style/CPS function that uses a callback, you can also pass an async function. Previously, you had to wrap async functions with asyncify. The caveat is that it will only work if async functions are supported natively in your environment, transpiled implementations can't be detected. (#1386, #1390)
    • Small doc fix (#1392)

    v2.2.0

    • Added groupBy, and the Series/Limit equivalents, analogous to _.groupBy (#1364)
    • Fixed transform bug when callback was not passed (#1381)
    • Added note about reflect to parallel docs (#1385)

    v2.1.5

    • Fix auto bug when function names collided with Array.prototype (#1358)

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by hargasinski, a new releaser for async since your current version.


    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
  • chore(deps): bump lodash-es from 4.17.10 to 4.17.21

    chore(deps): bump lodash-es from 4.17.10 to 4.17.21

    Bumps lodash-es from 4.17.10 to 4.17.21.

    Commits
    • f299b52 Bump to v4.17.21
    • c4847eb Improve performance of toNumber, trim and trimEnd on large input strings
    • 3469357 Prevent command injection through _.template's variable option
    • ded9bc6 Bump to v4.17.20.
    • 63150ef Documentation fixes.
    • 00f0f62 test.js: Remove trailing comma.
    • 846e434 Temporarily use a custom fork of lodash-cli.
    • 5d046f3 Re-enable Travis tests on 4.17 branch.
    • aa816b3 Remove /npm-package.
    • d7fbc52 Bump to v4.17.19
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by bnjmnt4n, a new releaser for lodash-es since your current version.


    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
  • chore(deps): bump chownr from 1.0.1 to 1.1.4

    chore(deps): bump chownr from 1.0.1 to 1.1.4

    Bumps chownr from 1.0.1 to 1.1.4.

    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
  • chore(deps): bump path-parse from 1.0.5 to 1.0.7

    chore(deps): bump path-parse from 1.0.5 to 1.0.7

    Bumps path-parse from 1.0.5 to 1.0.7.

    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
  • chore(deps): bump tar from 2.2.1 to 2.2.2

    chore(deps): bump tar from 2.2.1 to 2.2.2

    Bumps tar from 2.2.1 to 2.2.2.

    Commits
    • 523c5c7 2.2.2
    • 7ecef07 Bump fstream to fix hardlink overwriting vulnerability
    • 9fc84b9 Use {} for hardlink tracking instead of []
    • 15e59f1 Only track previously seen hardlinks
    • 4f85851 Ignore potentially unsafe files
    • See full diff 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
  • chore(deps): bump merge from 1.2.0 to 1.2.1

    chore(deps): bump merge from 1.2.0 to 1.2.1

    Bumps merge from 1.2.0 to 1.2.1.

    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
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
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
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
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
A simple, lightweight Javascript library for dynamic grid layouts.

Magic Grid A simple, lightweight Javascript library for dynamic grid layouts. Creating a dynamic grid layout has never been easier. With Magic Grid, a

Emmanuel Olaojo 3k Sep 25, 2022
🦄Indigo Layout Basic styles and components set for building user interfaces.

Indigo Layout Basic styles and components set for building user interfaces. Documentation Documentation NPM scripts Development mode npm run watch or

Awes.io 44 Jul 15, 2022
An experiment utilizing WebView with Go to find the most efficient methods of accessing a commonly used data-set

Arreat This was an experiment utilizing WebView with Go to find the most efficie

null 0 Dec 23, 2021
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

JBay Solutions 5.9k Oct 3, 2022
Flexbox based responsive fraction grid system

vue-fraction-grid Flexbox based responsive fraction grid system for Vue.js Live Demo and Full Documentation <container> <grid vertical="middle" :rwd

Bartłomiej Kozal 87 Dec 20, 2021
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

null 308 Jul 17, 2022
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

达峰的夏天 138 Sep 30, 2022
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
grid layout,support flex

simple-grid a simple grid layout(Vue Component) Installation use npm $ npm i simple-xgrid --save import Grid from 'simple-xgrid' import 'simple-xgrid

zhoulin 26 May 30, 2022
🧙‍♂️🔌 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

Emmanuel Olaojo 172 Aug 17, 2022
Simple, Light-weight and Flexible Vue.js component for grid layout.

vue-grd Simple, Light-weight and Flexible Vue.js component for grid layout. Vue.js port of grd. Install npm install --save vue-grd Usage You can use <

Shogo Sensui 43 Jun 30, 2022
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

Ben Sladden 231 Oct 4, 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
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
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

Corentin Mors 42 Oct 4, 2022