alexchopin / Vue Flexboxgrid
Licence: mit
Vue components made with Flexboxgrid
Stars: ✭ 37
Projects that are alternatives of or similar to Vue Flexboxgrid
The Flex Grid
The Flex Grid is a responsive CSS flexbox grid. Because we can!
Stars: ✭ 45 (+21.62%)
Mutual labels: flexbox-grid, flexbox, css-grid
40-lines-of-Sass
Full featured flexbox grid in 40 lines of Sass
Stars: ✭ 20 (-45.95%)
Mutual labels: flexbox, css-grid, flexbox-grid
Infinity Css Grid
Fluid Flex Solution for making infinite grid columns.
Stars: ✭ 112 (+202.7%)
Mutual labels: flexbox-grid, flexbox, css-grid
Waffle Grid
An easy to use flexbox grid system.
Stars: ✭ 602 (+1527.03%)
Mutual labels: flexbox-grid, flexbox, css-grid
tetris-grid
◼️Lightweight and simple CSS grid
Stars: ✭ 16 (-56.76%)
Mutual labels: flexbox, css-grid, flexbox-grid
Katana
Katana is CSS Layout System made with Flexbox
Stars: ✭ 57 (+54.05%)
Mutual labels: flexbox, css-grid, flexbox-grid
Semantic Ui Vue
Semantic UI integration for Vue
Stars: ✭ 914 (+2370.27%)
Mutual labels: vue-components, vuejs2
Must Watch Css
A useful list of must-watch talks about CSS
Stars: ✭ 3,966 (+10618.92%)
Mutual labels: flexbox, css-grid
Vue Touch Ripple
👆 Touch ripple component for @vuejs
Stars: ✭ 443 (+1097.3%)
Mutual labels: vue-components, vuejs2
Vuelayers
Web map Vue components with the power of OpenLayers
Stars: ✭ 532 (+1337.84%)
Mutual labels: vue-components, vuejs2
Vue Share Buttons
🔗A set of social buttons for Vue.js
Stars: ✭ 34 (-8.11%)
Mutual labels: vue-components, vuejs2
Vue Material Dashboard
Vue Material Dashboard - Open Source Material Design Admin
Stars: ✭ 403 (+989.19%)
Mutual labels: vue-components, vuejs2
Vue Gl
Vue.js components rendering 3D WebGL graphics reactively with three.js
Stars: ✭ 434 (+1072.97%)
Mutual labels: vue-components, vuejs2
Vue Video Player
🎞 @videojs component for @vuejs
Stars: ✭ 4,026 (+10781.08%)
Mutual labels: vue-components, vuejs2
Vue Stripe Elements
A Vue 2 component collection for StripeElements
Stars: ✭ 498 (+1245.95%)
Mutual labels: vue-components, vuejs2
Vue Goodshare
🍿 Vue.js component for social share. A simple way to share a link on the pages of your website in the most popular (and not so) social networks. Powered by goodshare.js project.
Stars: ✭ 345 (+832.43%)
Mutual labels: vue-components, vuejs2
Vue Swatches
🎨 Help the user picking beautiful colors!
Stars: ✭ 456 (+1132.43%)
Mutual labels: vue-components, vuejs2
Vue Burger Menu
🍔 An off-canvas sidebar Vue component - https://vue-burger-menu.netlify.com/
Stars: ✭ 648 (+1651.35%)
Mutual labels: vue-components, vuejs2
vue-flexboxgrid
Vue components made with Flexboxgrid library.
A Vue.js Plugin
Installation
npm install --save vue-flexboxgrid
Usage
Bundler (Webpack, Rollup)
import Vue from 'vue'
import VueFlexboxgrid from 'vue-flexboxgrid'
Vue.use(VueFlexboxgrid)
<style src="vue-flexboxgrid/dist/vue-flexboxgrid.css"/>
Browser
<!-- Include after Vue -->
<link rel="stylesheet" href="vue-flexboxgrid/dist/vue-flexboxgrid.css"></link>
<script src="vue-flexboxgrid/dist/vue-flexboxgrid.js"></script>
Components and Props
Container
Component:
<container>
Your content
</container>
Props:
hero: { type: Boolean, default: false },
fluid: { type: Boolean, default: false }
Row
Component:
<row>
Your content
</row>
Props:
reverse: { type: Boolean, default: false },
startXs: { type: Boolean, default: false },
centerXs: { type: Boolean, default: false },
endXs: { type: Boolean, default: false },
topXs: { type: Boolean, default: false },
middleXs: { type: Boolean, default: false },
bottomXs: { type: Boolean, default: false },
aroundXs: { type: Boolean, default: false },
betweenXs: { type: Boolean, default: false },
startSm: { type: Boolean, default: false },
centerSm: { type: Boolean, default: false },
endSm: { type: Boolean, default: false },
topSm: { type: Boolean, default: false },
middleSm: { type: Boolean, default: false },
bottomSm: { type: Boolean, default: false },
aroundSm: { type: Boolean, default: false },
betweenSm: { type: Boolean, default: false },
startMd: { type: Boolean, default: false },
centerMd: { type: Boolean, default: false },
endMd: { type: Boolean, default: false },
topMd: { type: Boolean, default: false },
middleMd: { type: Boolean, default: false },
bottomMd: { type: Boolean, default: false },
aroundMd: { type: Boolean, default: false },
betweenMd: { type: Boolean, default: false },
startLg: { type: Boolean, default: false },
centerLg: { type: Boolean, default: false },
endLg: { type: Boolean, default: false },
topLg: { type: Boolean, default: false },
middleLg: { type: Boolean, default: false },
bottomLg: { type: Boolean, default: false },
aroundLg: { type: Boolean, default: false },
betweenLg: { type: Boolean, default: false }
Column
Component:
<column>
Your content
</column>
Props:
firstXs: { type: Boolean, default: false },
lastXs: { type: Boolean, default: false },
firstSm: { type: Boolean, default: false },
lastSm: { type: Boolean, default: false },
firstMd: { type: Boolean, default: false },
lastMd: { type: Boolean, default: false },
firstLg: { type: Boolean, default: false },
lastLg: { type: Boolean, default: false },
xsOffset: { type: String, validator (v) { var i = parseInt(v); return !isNaN(i) && v > 0 && v < 13 } },
smOffset: { type: String, validator (v) { var i = parseInt(v); return !isNaN(i) && v > 0 && v < 13 } },
mdOffset: { type: String, validator (v) { var i = parseInt(v); return !isNaN(i) && v > 0 && v < 13 } },
lgOffset: { type: String, validator (v) { var i = parseInt(v); return !isNaN(i) && v > 0 && v < 13 } },
xs: { type: String, default: '12', validator (v) { var i = parseInt(v); return !isNaN(i) && v > 0 && v < 13 } },
sm: { type: String, validator (v) { var i = parseInt(v); return !isNaN(i) && v > 0 && v < 13 } },
md: { type: String, validator (v) { var i = parseInt(v); return !isNaN(i) && v > 0 && v < 13 } },
lg: { type: String, validator (v) { var i = parseInt(v); return !isNaN(i) && v > 0 && v < 13 } }
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].