Grid system row

This commit is contained in:
Angelos Chalaris 2016-10-21 12:28:00 +03:00
parent cc56a1a3a6
commit 691a568996
3 changed files with 21 additions and 1 deletions

View file

@ -144,4 +144,7 @@
- Opened relevant breaking changes issue (#16).
- Opened issue for `progress` element's transitions on value change.
- Started project for feature backlog on Github.
- Created basis for gird system container (fluid only).
- Created basis for grid system container (fluid only) - `grid`.
- Read a lot of the spec, decided on browser support, coded the `row` basis for the grid system.
- Updated breaking changes issue with more information.
- Added some comments and moved the notes in the flavor file.

View file

@ -142,6 +142,7 @@ $progress-style1-border-radius: 0; // Border radius for <progress> st
// Variables for grid elements
$grid-container-name: 'container'; // Class name for the grid container
$grid-container-side-padding: 20px; // Padding for the grid container (left and right only)
$grid-row-name: 'row'; // Class name for the grid's rows
// Enable base
@import '../../scss/v2/core';
// Use mixins for contextual background elements

View file

@ -7,3 +7,19 @@ $grid-side-padding:
margin: 0 auto;
padding: 0 $grid-side-padding;
}
$grid-row-name: 'row' !default; // Class name for the grid system rows
.#{$grid-row-name} {
box-sizing: border-box;
// Old syntax
display: -webkit-box;
-webkit-box-flex: 0;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
// New syntax
display: -webkit-flex;
display: flex;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}