mattrothenberg / Vue Grid Styled
Licence: mit
Lightweight set of functional grid components
Stars: ✭ 16
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Grid Styled
ekzo
💫 Functional Sass framework for rapid and painless development
Stars: ✭ 32 (+100%)
Mutual labels: functional, grid
Sheetjs
📗 SheetJS Community Edition -- Spreadsheet Data Toolkit
Stars: ✭ 28,479 (+177893.75%)
Mutual labels: grid
Ics Security Tools
Tools, tips, tricks, and more for exploring ICS Security.
Stars: ✭ 749 (+4581.25%)
Mutual labels: grid
Egjs Infinitegrid
A module used to arrange card elements including content infinitely on a grid layout.
Stars: ✭ 751 (+4593.75%)
Mutual labels: grid
Meta Typing
📚 Functions and algorithms implemented purely with TypeScript's type system
Stars: ✭ 628 (+3825%)
Mutual labels: functional
Udocker
A basic user tool to execute simple docker containers in batch or interactive systems without root privileges
Stars: ✭ 802 (+4912.5%)
Mutual labels: grid
Pydash
The kitchen sink of Python utility libraries for doing "stuff" in a functional way. Based on the Lo-Dash Javascript library.
Stars: ✭ 728 (+4450%)
Mutual labels: functional
Gun
HTTP/1.1, HTTP/2 and Websocket client for Erlang/OTP.
Stars: ✭ 710 (+4337.5%)
Mutual labels: functional
Remeda
A utility library for JavaScript and TypeScript.
Stars: ✭ 774 (+4737.5%)
Mutual labels: functional
Result
The modelling for success/failure of operations in Kotlin
Stars: ✭ 705 (+4306.25%)
Mutual labels: functional
Awaity.js
A functional, lightweight alternative to bluebird.js, built with async / await in mind.
Stars: ✭ 818 (+5012.5%)
Mutual labels: functional
Rowgrid.js
A small, lightweight JavaScript plugin for placing items in straight rows (jQuery and vanilla JS version) – Demo:
Stars: ✭ 670 (+4087.5%)
Mutual labels: grid
Syntax sugar python
A library adding some anti-Pythonic syntatic sugar to Python
Stars: ✭ 721 (+4406.25%)
Mutual labels: functional
Vue Handsontable Official
Vue Data Grid with Spreadsheet Look & Feel. Official Vue wrapper for Handsontable.
Stars: ✭ 751 (+4593.75%)
Mutual labels: grid
Lvlgrid
✨ Grid helper to your Laravel application. Filter, order and pagination ajax
Stars: ✭ 7 (-56.25%)
Mutual labels: grid
Flexr
Flexr is a responsive grid framework for modern browsers.
Stars: ✭ 5 (-68.75%)
Mutual labels: grid
vue-grid-styled
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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].