A simple flexbox CSS grid system with Vue
npm install @vivid-web/flexboxgrid-vueFlexboxgrid is a modern 12-col grid system based on Bootstrap. It is written in Vue, a simple to
use frontend library. The Flexboxgrid is written according the BEM
methodology. For more information, visit
flexboxgrid.vivid-websolutions.nl
bash
$ npm install @vivid-web/flexboxgrid-vue --saveor yarn
$ yarn add @vivid-web/flexboxgrid-vue
`$3
To add Flexboxgrid Vue to your project, you can do the following:
javascript
import Vue from 'vue';
import FlexboxgridVue from '@vivid-web/flexboxgrid-vue';Vue.use(FlexboxgridVue);
`This will give you access to the _global_ registered Flexboxgrid components. Now you can create a
Vue component like this:
vue
I take up half of the space
Me too!
`See that this way you don't have to import anything in your Vue component. Like stated before, the
components necessary for the Flexboxgrid are attached to the global Vue instance. This way they
are always loaded in every Vue component. If you don't like this approach, you can do the
following:
vue
I take up half of the space
Me too!
`
>Now, don't forget to remove the use statement!Components
The flexboxgrid comes with four components, discussed below. As a rule of thumb, you can specify
the breakpoint for a VRow, VCol en VText. When referencing , you can use one or
multiple of the following breakpoints:
- xs - Extra small breakpoint
- sm - Small breakpoint
- md - Medium breakpoint
- lg - Large breakpoint
- xl - Extra large breakpointThis grid is based on the twelve column grid. So you can combine the breakpoint with a column size
to make the website responsive, creating breakpoints lik
md-6 or xl-2. The columns that you can
use are 0..12.The breakpoints and the column size can be passed as
variant or variants property. Each of the
components takes a couple of property that are available.| Name | Type | Required | Description |
| -----------| :-----------: | :------: | :----------------------------------------------------------- |
|
variant | String | false | Each component can have a variant. |
| variants | Array | false | Each component can have an array of variants. |
| content | String/Number | false | If no slot is given, you can pass the content as a property. |$3
This is the container for the whole rows and columns.#### Variants
The grid has the following variants:
-
container
Will create a boxed container with a max-width of 1200px.
-
Will create a grid with no gutters. Can also be used without a breakpoint.$3
Will take up the whole width of a container.#### Variants
The row has the following variants:
-
The breakpoints for the row. For example, will result in a row like this row--xs.
- [$breakpoints]-[0..12]
The breakpoints for the row. For example, will result in a row like this row--xs-6.
- [$breakpoints]-no-gutters
Will create a row with no gutters. Can also be used without a breakpoint.
-
Will align the row at the top. Can also be used without a breakpoint.
-
Will align the row at the center. Can also be used without a breakpoint.
-
Will align the row at the bottom. Can also be used without a breakpoint.
-
Will reverse the content of the row. Can also be used without a breakpoint.$3
A column is the most important part of the grid.#### Variants
The col has the following variants:
-
The breakpoints for the col. For example, will result in a col like this col--xs.
- [$breakpoints]-[0..12]
The breakpoints for the col. For example, will result in a col like this col--xs-6.
- [$breakpoints]-no-gutters
Will create a col with no gutters. Can also be used without a breakpoint.
-
Align the column at the top. Can also be used without a breakpoint.
-
Align the column at the center. Can also be used without a breakpoint.
-
Align the column at the bottom. Can also be used without a breakpoint.
-
Push the column to the first place. Can also be used without a breakpoint.
-
Push the column to the last place. Can also be used without a breakpoint.
-
Reset the order of the column. Can also be used without a breakpoint.
-
Make the column flexible. Can also be used without a breakpoint.$3
A text component holds the text.#### Variants
The text has the following variants:
-
Align the text to the right. Can also be used without a breakpoint.
-
Align the text to the left. Can also be used without a breakpoint.
- Copyright (c) 2015 - 2018 Vivid Websolutions
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.