Merged v3 into master
This commit is contained in:
Pedro Reis
commit
20d55874a9
69 changed files with 1305 additions and 593 deletions
1
assets/styles/vendor/simple-grid/.gitattributes
vendored
Executable file
1
assets/styles/vendor/simple-grid/.gitattributes
vendored
Executable file
|
|
@ -0,0 +1 @@
|
|||
README export-ignore
|
||||
122
assets/styles/vendor/simple-grid/README.md
vendored
Executable file
122
assets/styles/vendor/simple-grid/README.md
vendored
Executable file
|
|
@ -0,0 +1,122 @@
|
|||
# Just a simple grid
|
||||
|
||||
Based on existing grid systems, such as [Twitter Bootstrap Grid System](http://getbootstrap.com/css/#grid) and [csswizardry-grids](http://csswizardry.com/csswizardry-grids/), this is a fluid, flexible and responsive grid that can be scaled up to an arbitrary size, within the `$max-width` of your main `.container`. You also can easily and infinitly nest columns and rows, so you can build out complicated layouts without creating a lot of new custom elements. This is a grid system generated by Sass and it is based on [BEM syntax](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/).
|
||||
|
||||
## Setup
|
||||
|
||||
The only thing you need to do to start building your grid is to adjust the number of `$grid-columns`, the desired `$gutter` and the main container `$max-width`.
|
||||
|
||||
## How it works
|
||||
|
||||
Grid systems, as you may know, are used for creating page layouts through a series of rows and columns that will host your content:
|
||||
|
||||
* Your `.row` element(s) must be placed within a `.container`, with a fixed `$max-width` for proper alignment. This elements will split up your page horizontally and will contain groups of `.col`.
|
||||
* Your content should be placed within the `.col` blocks, and only `.col` may be immediate children of `.row`.
|
||||
* You can nest `.row` and `.col` how many times you need, since you follow the previous standard.
|
||||
* Your `.col` width is defined by specifying the number of a single grid columns, in your total `$grid-columns`. For example, a `.col--*-4` will represent a width of 4 columns in your `$grid-columns` total.
|
||||
* To control your responsive grid, there are available three class prefixes: `.col--sm-*` for small devices, `.col-md-*` for medium devices and `.col--lg-*` for large devices. All together, in your `.col` element, it will make your grid respond to each one of your default media queries.
|
||||
* Finaly, you have the option to move columns to the right using `.col--*-offset-*` classes. These classes increase the left margin of a column by the number of columns you want. For example, `.col--*-offset-4` will push `.col-*-4` over four columns.
|
||||
|
||||
|
||||
## Markup
|
||||
|
||||
### Basic usage
|
||||
Simple column set - `<div class="col col--xs-12 col--sm-12 col--md-12 col--lg-12"></div>` - inside a `.row`.
|
||||
|
||||
```html
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-12 col--lg-12">
|
||||
<p>Col 1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6">
|
||||
<p>Col 2</p>
|
||||
</div>
|
||||
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6">
|
||||
<p>Col 3</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-4 col--lg-4">
|
||||
<p>Col 4</p>
|
||||
</div>
|
||||
<div class="col col--xs-12 col--sm-12 col--md-4 col--lg-4">
|
||||
<p>Col 5</p>
|
||||
</div>
|
||||
<div class="col col--xs-12 col--sm-12 col--md-4 col--lg-4">
|
||||
<p>Col 6</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-8 col--lg-8">
|
||||
<p>Col 7</p>
|
||||
</div>
|
||||
<div class="col col--xs-12 col--sm-12 col--md-4 col--lg-4">
|
||||
<p>Col 8</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Offsetting columns
|
||||
Increase the left margin of a column by the number of columns you want, along with the responsive class prefixes, if you need.
|
||||
|
||||
```html
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-4 col--lg-4">
|
||||
<p>Col 9 with offset 0</p>
|
||||
</div>
|
||||
<div class="col col--xs-12 col--sm-12 col--md-4 col--lg-4 col--xs-offset-4 col--sm-offset-0 col--md-offset-4 col--lg-offset-4">
|
||||
<p>Col 10 with offset 4</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-3 col--lg-3 col--xs-offset-0 col--sm-offset-0 col--md-offset-3 col--lg-offset-3">
|
||||
<p>Col 11 with offset 3</p>
|
||||
</div>
|
||||
<div class="col col--xs-12 col--sm-12 col--md-3 col--lg-3 col--xs-offset-0 col--sm-offset-0 col--md-offset-6 col--lg-offset-6">
|
||||
<p>Col 12 with offset 6</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6 col--xs-offset-0 col--sm-offset-0 col--md-offset-3 col--lg-offset-3">
|
||||
<p>Col 13 with offset 3</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Nesting columns
|
||||
To nest your content, add a new `.row` inside a `.col`, and set of `.col-ld-*` columns within an existing `.col-ld-*` column. Nested rows should include a set of columns that add up to 12 or less.
|
||||
|
||||
```html
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-12 col--lg-12">
|
||||
<p>Col 14</p>
|
||||
<div class="row">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6">
|
||||
<p>Nested col 14.1</p>
|
||||
</div>
|
||||
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6">
|
||||
<p>Nested col 14.2</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Gutterless columns
|
||||
To remove all the gutters from your columns just add the class `.row--gutterless` to your `.row` element.
|
||||
|
||||
```html
|
||||
<div class="row row--gutterless">
|
||||
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6">
|
||||
<p>Col 15</p>
|
||||
</div>
|
||||
<div class="col col--xs-12 col--sm-12 col--md-6 col--lg-6">
|
||||
<p>Col 16</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Demo
|
||||
Check out the demo and play around on [Code Pen](http://codepen.io/pedroreis/pen/ituho) and/or check the compiled CSS on [SassMeister](http://sassmeister.com/gist/c6368fc9a239e1798fcd).
|
||||
35
assets/styles/vendor/simple-grid/_defaults.scss
vendored
Executable file
35
assets/styles/vendor/simple-grid/_defaults.scss
vendored
Executable file
|
|
@ -0,0 +1,35 @@
|
|||
/**
|
||||
* Space between columns
|
||||
*/
|
||||
|
||||
$grid-gutter: 20px !default;
|
||||
|
||||
|
||||
/**
|
||||
* Max width of container
|
||||
*/
|
||||
|
||||
$grid-max-width: 1200px + ($grid-gutter * 2) !default;
|
||||
|
||||
|
||||
/**
|
||||
* Number of total columns
|
||||
*/
|
||||
|
||||
$grid-columns: 12 !default;
|
||||
|
||||
|
||||
/**
|
||||
* Breakpoints
|
||||
*/
|
||||
|
||||
$breakpoint-lg: 1200px !default;
|
||||
$breakpoint-md: 768px !default;
|
||||
$breakpoint-sm: 480px !default;
|
||||
|
||||
$breakpoints: (
|
||||
'lg' '(min-width: ' + $breakpoint-lg + ')',
|
||||
'md' '(min-width: ' + $breakpoint-md + ') and (max-width: ' + ($breakpoint-lg - 1) + ')',
|
||||
'sm' '(max-width:' + ($breakpoint-md - 1) + ')',
|
||||
'xs' '(max-width: ' + $breakpoint-sm + ')'
|
||||
) !default;
|
||||
38
assets/styles/vendor/simple-grid/_mixins.scss
vendored
Executable file
38
assets/styles/vendor/simple-grid/_mixins.scss
vendored
Executable file
|
|
@ -0,0 +1,38 @@
|
|||
/**
|
||||
* Grid loop mixin
|
||||
*/
|
||||
|
||||
@mixin grid-loop($name){
|
||||
@for $i from 0 through $grid-columns {
|
||||
@if $i != 0 {
|
||||
.col--#{$name}-#{$i} {
|
||||
width: percentage($i/$grid-columns);
|
||||
.row--flex & {
|
||||
flex-basis: percentage($i/$grid-columns);
|
||||
max-width: percentage($i/$grid-columns);
|
||||
width: auto;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.col--#{$name}-offset-#{$i} {
|
||||
margin-left: percentage($i/$grid-columns);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Clearfix
|
||||
*/
|
||||
|
||||
@mixin clearfix {
|
||||
&:before,
|
||||
&:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
58
assets/styles/vendor/simple-grid/simple-grid.scss
vendored
Executable file
58
assets/styles/vendor/simple-grid/simple-grid.scss
vendored
Executable file
|
|
@ -0,0 +1,58 @@
|
|||
/**
|
||||
* Default variables and helper mixins
|
||||
*/
|
||||
|
||||
@import
|
||||
'defaults',
|
||||
'mixins';
|
||||
|
||||
|
||||
/**
|
||||
* Grid scaffolding
|
||||
*/
|
||||
|
||||
.container {
|
||||
@include clearfix;
|
||||
max-width: $grid-max-width;
|
||||
margin: 0 auto;
|
||||
padding: 0 $grid-gutter;
|
||||
}
|
||||
|
||||
.row {
|
||||
list-style: none;
|
||||
margin-left: -$grid-gutter;
|
||||
&:not(.row--flex) {
|
||||
@include clearfix;
|
||||
}
|
||||
&.row--gutterless {
|
||||
margin-left: 0;
|
||||
}
|
||||
&.row--flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.col {
|
||||
float: left;
|
||||
padding-left: $grid-gutter;
|
||||
box-sizing: border-box;
|
||||
.row--gutterless & {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Columns generator
|
||||
*/
|
||||
|
||||
@each $breakpoint in $breakpoints {
|
||||
$name: nth($breakpoint, 1);
|
||||
$declaration: nth($breakpoint, 2);
|
||||
|
||||
@media only screen and #{$declaration} {
|
||||
@include grid-loop($name);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue