Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(col): BS4 column component #906

Merged
merged 6 commits into from Aug 22, 2017
Merged

feat(col): BS4 column component #906

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9af1d0d
feat(col): BS4 column component
Aug 13, 2017
b5a0108
Merge branch '1.x' of github.com:bootstrap-vue/bootstrap-vue into fea…
Aug 14, 2017
fb00811
Merge branch '1.x' of github.com:bootstrap-vue/bootstrap-vue into fea…
Aug 15, 2017
b575f9b
feat(col): getting column working
Aug 15, 2017
32e9ae9
Merge branch 'dev' into feat/col-fc
pi0 Aug 21, 2017
9949caa
fixed index.js from merge
tmorehouse Aug 21, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
177 changes: 177 additions & 0 deletions docs/components/col/README.md
View file
Open in desktop
@@ -0,0 +1,177 @@
# Grid System

> Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

```html
<div class="container bv-example-row">
<div class="row">
<b-col>1 of 2</b-col>
<b-col>2 of 2</b-col>
</div>
<div class="row">
<b-col>1 of 3</b-col>
<b-col>2 of 3</b-col>
<b-col>3 of 3</b-col>
</div>
</div>

<!-- col-1.vue -->
```

```html
<div class="container bv-example-row">
<div class="row">
<b-col>Column</b-col>
<b-col>Column</b-col>
<div class="w-100"></div>
<b-col>Column</b-col>
<b-col>Column</b-col>
</div>
</div>

<!-- col-2.vue -->
```

```html
<div id="app">
<div class="container">
<div class="row">
<b-col>
<h2>Grid Columns</h2>
</b-col>
</div>
</div>
<div class="bv-example-row">
<div class="container">

<div class="row">
<b-col class="header">
<h3>Equal Width</h3>
</b-col>
</div>
<div class="row">
<b-col>1 of 2</b-col>
<b-col>1 of 2</b-col>
</div>
<div class="row">
<b-col>1 of 3</b-col>
<b-col>1 of 3</b-col>
<b-col>1 of 3</b-col>
</div>

<div class="row">
<b-col class="header">
<h3>Setting one column width</h3>
</b-col>
</div>
<div class="row">
<b-col>1 of 3</b-col>
<b-col cols="5">2 of 3 (cols = 5)</b-col>
<b-col>3 of 3</b-col>
</div>
<div class="row">
<b-col>1 of 3</b-col>
<b-col cols="6">2 of 3 (cols = 6)</b-col>
<b-col>3 of 3</b-col>
</div>


<div class="row">
<b-col class="header">
<h3>Variable width content</h3>
</b-col>
</div>
<div class="row justify-content-md-center">
<b-col col
lg="2">1 of 3</b-col>
<b-col cols="12"
md="auto">Variable width content</b-col>
<b-col col
lg="2">3 of 3</b-col>
</div>
<div class="row">
<b-col>1 of 3</b-col>
<b-col cols="12"
md="auto">Variable width content</b-col>
<b-col col
lg="2">3 of 3</b-col>
</div>


<div class="row">
<b-col class="header">
<h3>Equal-width multi-row</h3>
</b-col>
</div>
<div class="row">
<b-col>col</b-col>
<b-col>col</b-col>
<div class="w-100"></div>
<b-col>col</b-col>
<b-col>col</b-col>
</div>

<div class="row">
<b-col class="header">
<h3>All breakpoints</h3>
</b-col>
</div>
<div class="row">
<b-col>col</b-col>
<b-col>col</b-col>
<b-col>col</b-col>
<b-col>col</b-col>
</div>
<div class="row">
<b-col cols="8">col-8</b-col>
<b-col cols="4">col-4</b-col>
</div>

<div class="row">
<b-col class="header">
<h3>Stacked to horizontal</h3>
</b-col>
</div>
<div class="row">
<b-col sm="8">col-sm-8</b-col>
<b-col sm="4">col-sm-4</b-col>
</div>
<div class="row">
<b-col sm>col-sm</b-col>
<b-col sm>col-sm</b-col>
<b-col sm>col-sm</b-col>
</div>

<div class="row">
<b-col class="header">
<h3>Mix and match</h3>
</b-col>
</div>
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<b-col md="8">.col .col-md-8</b-col>
<b-col cols="6"
md="4">.col-6 .col-md-4</b-col>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<b-col cols="6"
md="4">.col-6 .col-md-4</b-col>
<b-col cols="6"
md="4">.col-6 .col-md-4</b-col>
<b-col cols="6"
md="4">.col-6 .col-md-4</b-col>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<b-col cols="6">.col-6</b-col>
<b-col cols="6">.col-6</b-col>
</div>
</div>
</div>
</div>

<!-- col-3.vue -->
```
4 changes: 4 additions & 0 deletions docs/components/col/index.js
View file
Open in desktop
@@ -0,0 +1,4 @@
import meta from './meta.json';
import readme from './README.md';

export default {meta, readme};
4 changes: 4 additions & 0 deletions docs/components/col/meta.json
View file
Open in desktop
@@ -0,0 +1,4 @@
{
"title": "Column",
"component": "bCol"
}
1 change: 1 addition & 0 deletions docs/components/index.js
View file
Open in desktop
Expand Up @@ -7,6 +7,7 @@ export default {
'button': require('./button').default,
'button-group': require('./button-group').default,
'button-toolbar': require('./button-toolbar').default,
'col': require('./col').default,
'card': require('./card').default,
'carousel': require('./carousel').default,
'collapse': require('./collapse').default,
Expand Down
110 changes: 67 additions & 43 deletions docs/nuxt/assets/css/styles.css
View file
Open in desktop
@@ -1,76 +1,100 @@
@import './fonts.css';

.page-enter-active, .page-leave-active {
transition: opacity .25s, transform .25s;
.page-enter-active,
.page-leave-active {
transition: opacity .25s, transform .25s;
}

.page-enter, .page-leave-to {
opacity: 0;
transform: scale(1.01);
.page-enter,
.page-leave-to {
opacity: 0;
transform: scale(1.01);
}

.hljs {
font-family: "Inconsolata", "Monaco", "Andale Mono", "Lucida Console", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-size: 17px;
overflow-x: auto;
position: relative;
background-color: #f9f9f9;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
padding: 1em 1em 1em 1em;
margin-bottom: 1em;
font-family: "Inconsolata", "Monaco", "Andale Mono", "Lucida Console", "Bitstream Vera Sans Mono", "Courier New",
Courier, monospace !important;
font-size: 17px;
overflow-x: auto;
position: relative;
background-color: #f9f9f9;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
padding: 1em 1em 1em 1em;
margin-bottom: 1em;
}

.CodeMirror {
background-color: #f9f9f9;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
background-color: #f9f9f9;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
}

code {
color: #795da3;
color: #795da3;
}

blockquote {
font-size: 1.25rem;
font-weight: 300;
font-size: 1.25rem;
font-weight: 300;
}

.bd-content>h1, .bd-content>h2, .bd-content>h3, .bd-content>h4, .bd-content>h5 {
padding-top: 25px;
padding-bottom: 15px;
.bd-content > h1,
.bd-content > h2,
.bd-content > h3,
.bd-content > h4,
.bd-content > h5 {
padding-top: 25px;
padding-bottom: 15px;
}

#__nuxt > .progress {
z-index: 100 !important;
z-index: 100 !important;
}

pre.editable:after {
content: '(double click to edit)';
position: absolute;
top: 0;
right: 0;
color: #aaa;
text-align: right;
font-size: .75em;
padding: 5px 10px 0;
line-height: 15px;
height: 15px;
font-weight: 600;
content: '(double click to edit)';
position: absolute;
top: 0;
right: 0;
color: #aaa;
text-align: right;
font-size: .75em;
padding: 5px 10px 0;
line-height: 15px;
height: 15px;
font-weight: 600;
}

pre.editable:hover:after {
font-size: .9em;
color: #444;
cursor: pointer;
font-size: .9em;
color: #444;
cursor: pointer;
}

pre.editable.live:after {
content: 'Live';
content: 'Live';
}

.bd-footer {
padding: 4rem 0;
margin-top: 4rem;
font-size: 85%;
text-align: center;
background-color: #f7f7f7;
}
padding: 4rem 0;
margin-top: 4rem;
font-size: 85%;
text-align: center;
background-color: #f7f7f7;
}

.bv-example-row .row + .row {
margin-top: 1rem;
}

.bv-example-row .row > .col:not(.header),
.bv-example-row .row > [class^=col-] {
padding-top: .75rem;
padding-bottom: .75rem;
background-color: rgba(86, 61, 124, .15);
border: 1px solid rgba(86, 61, 124, .2);
}

.bv-example-row-flex-cols .row {
min-height: 10rem;
background-color: rgba(255, 0, 0, .1);
}