mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-01 19:40:35 +02:00
Code Issues Releases Wiki Activity

Grid system row

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

5
docs/v2/DEVLOG.md
View File

@@ -144,4 +144,7 @@
- Opened relevant breaking changes issue (#16). - Opened relevant breaking changes issue (#16).
- Opened issue for `progress` element's transitions on value change. - Opened issue for `progress` element's transitions on value change.
- Started project for feature backlog on Github. - 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.

1
flavors/v2/mini-default.scss
View File

@@ -142,6 +142,7 @@ $progress-style1-border-radius: 0; // Border radius for <progress> st
// Variables for grid elements // Variables for grid elements
$grid-container-name: 'container'; // Class name for the grid container $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-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 // Enable base
@import '../../scss/v2/core'; @import '../../scss/v2/core';
// Use mixins for contextual background elements // Use mixins for contextual background elements

16
scss/v2/mini-core/_grid.scss
View File

@@ -6,4 +6,20 @@ $grid-side-padding:
.#{$grid-container-name} { .#{$grid-container-name} {
margin: 0 auto; margin: 0 auto;
padding: 0 $grid-side-padding; 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;
} }