Skip to content

Commit

Permalink
feat(col): BS4 column component (#906)
Browse files Browse the repository at this point in the history 
* feat(col): BS4 column component

* feat(col): getting column working

* fixed index.js from merge
  • Loading branch information
@pi0 @tmorehouse
pi0 authored and tmorehouse committed Aug 22, 2017
1 parent 14819ef commit 9de80f8
Show file tree
Hide file tree
Showing 11 changed files with 399 additions and 52 deletions.
177 changes: 177 additions & 0 deletions docs/components/col/README.md
View file
@@ -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
@@ -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
@@ -0,0 +1,4 @@
{
"title": "Column",
"component": "bCol"
}
1 change: 1 addition & 0 deletions docs/components/index.js
View file
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
@@ -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);
}

0 comments on commit 9de80f8

Please sign in to comment.