mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-06 13:56:27 +02:00
Code Issues Releases Wiki Activity

Housekeeping for grid module

Browse Source 
Part 1/2: Variables moved and flavor files updated. Screen media queries are still not done.
This commit is contained in:
Angelos Chalaris
2017-03-30 13:33:23 +03:00
parent 17de1b1d2f
commit 7b22333c59
6 changed files with 164 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
docs/v2/DEVLOG.md
View File

@@ -889,3 +889,8 @@
- Started code cleanup and updating. - Started code cleanup and updating.
- Updated `core` by moving all of the variable definitions and defaults at the top of the module's file. - Updated `core` by moving all of the variable definitions and defaults at the top of the module's file.
- Updated both flavor files to deal with the indentation and column problems (only for the `core` module so far). Readability is a lot better, but consistency is a little bit worse. For all intents and purposes, this is the way to go for this release, as the previous styling was impossible to read for the most part in many setups. - Updated both flavor files to deal with the indentation and column problems (only for the `core` module so far). Readability is a lot better, but consistency is a little bit worse. For all intents and purposes, this is the way to go for this release, as the previous styling was impossible to read for the most part in many setups.
## 20170330
- Updated `grid` by moving variable definitions and defaults to the top of the module.
- Updated flavor files, dealing with indentation and readability.

46
src/flavors/mini-default.scss
View File

@@ -106,7 +106,7 @@ $apply-link-underline: true; // Should an underline be applied to all
$apply-link-hover-fade: true; // Should the :hover and :focus state of <a> $apply-link-hover-fade: true; // Should the :hover and :focus state of <a>
// elements use fade-out instead of a different // elements use fade-out instead of a different
// color (`true`/`false`) [11] // color (`true`/`false`) [11]
//$link-hover-fore-color: #0288d1; // Text color for <a> when hovered or focused //$link-hover-fore-color: #0288d1; // Text color for <a> when hovered or focused
// Notes: // Notes:
// [1] - The value $base-root-font-size should be in `px` only! This rule is very important, as it will determine the root // [1] - The value $base-root-font-size should be in `px` only! This rule is very important, as it will determine the root
// element's font sizing. // element's font sizing.
@@ -132,28 +132,28 @@ $apply-link-hover-fade: true; // Should the :hover and :focus state o
// [11] - If `$apply-link-hover-fade` is set to `true`, a fading transition will be used for the link when hovered over or // [11] - If `$apply-link-hover-fade` is set to `true`, a fading transition will be used for the link when hovered over or
// focused. Otherwise, the color specified in $link-hover-fore-color will be used. // focused. Otherwise, the color specified in $link-hover-fore-color will be used.
// Variables for grid elements // Variables for grid elements
$use-four-step-grid: false; // Should the old 4-step grid system be used $use-four-step-grid: false; // Should the old 4-step grid system be used
// instead of the new (`true`/`false`) [1] // instead of the new (`true`/`false`) [1]
$include-parent-layout: true !default; // Should the classes for rows defining the column $include-parent-layout: true; // Should the classes for rows defining the column
// layout of children be included (`true`/`false`) [2] // layout of children be included (`true`/`false`) [2]
$grid-container-name: 'container'; // Class name for the grid container $grid-container-name: 'container'; // Class name for the grid container
$grid-container-side-padding: 10px; // Padding for the grid container (left and right only) $grid-container-side-padding: 10px; // Padding for the grid container (left and right only)
$grid-row-name: 'row'; // Class name for the grid's rows $grid-row-name: 'row'; // Class name for the grid's rows
$grid-row-parent-layout-prefix: 'cols'; // Class name prefix for the grid's row parents [2] $grid-row-parent-layout-prefix: 'cols'; // Class name prefix for the grid's row parents [2]
$grid-column-prefix: 'col'; // Class name prefix for the grid's columns $grid-column-prefix: 'col'; // Class name prefix for the grid's columns
$grid-column-offset-suffix: 'offset'; // Class name suffix for the grid's offsets $grid-column-offset-suffix: 'offset'; // Class name suffix for the grid's offsets
$grid-order-normal-suffix: 'normal'; // Class name suffix for grid columns with normal priority $grid-order-normal-suffix: 'normal'; // Class name suffix for grid columns with normal priority
$grid-order-first-suffix: 'first'; // Class name suffix for grid columns with highest priority $grid-order-first-suffix: 'first'; // Class name suffix for grid columns with highest priority
$grid-order-last-suffix: 'last'; // Class name suffix for grid columns with lowest priorty $grid-order-last-suffix: 'last'; // Class name suffix for grid columns with lowest priorty
$grid-column-count: 12; // Number of columns in the grid (integer value only) $grid-column-count: 12; // Number of columns in the grid (integer value only)
$grid-column-padding: 0 4px; // Padding for the columns of the grid $grid-column-padding: 0 4px; // Padding for the columns of the grid
//$grid-extra-small-prefix: 'xs'; // Extra small screen class prefix for grid //$grid-extra-small-prefix: 'xs'; // Extra small screen class prefix for grid
//$grid-small-breakpoint: 480px; // Small screen breakpoint for grid //$grid-small-breakpoint: 480px; // Small screen breakpoint for grid
$grid-small-prefix: 'sm'; // Small screen class prefix for grid $grid-small-prefix: 'sm'; // Small screen class prefix for grid
$grid-medium-breakpoint: 768px; // Medium screen breakpoint for grid $grid-medium-breakpoint: 768px; // Medium screen breakpoint for grid
$grid-medium-prefix: 'md'; // Medium screen class prefix for grid $grid-medium-prefix: 'md'; // Medium screen class prefix for grid
$grid-large-breakpoint: 1280px; // Large screen breakpoint for grid $grid-large-breakpoint: 1280px; // Large screen breakpoint for grid
$grid-large-prefix: 'lg'; // Large screen class prefix for grid $grid-large-prefix: 'lg'; // Large screen class prefix for grid
// Notes: // Notes:
// [1] - If the value of $use-four-step-grid is `true`, the grid system will contain 4 breakpoints instead of 3, along with // [1] - If the value of $use-four-step-grid is `true`, the grid system will contain 4 breakpoints instead of 3, along with
// the needed styles. In this case, values should be specified for $grid-extra-small-prefix and $grid-small-breakpoint. // the needed styles. In this case, values should be specified for $grid-extra-small-prefix and $grid-small-breakpoint.

42
src/flavors/mini-sucroa.scss
View File

@@ -134,28 +134,26 @@ $apply-link-hover-fade: true; // Should the :hover and :focus state o
// [11] - If `$apply-link-hover-fade` is set to `true`, a fading transition will be used for the link when hovered over or // [11] - If `$apply-link-hover-fade` is set to `true`, a fading transition will be used for the link when hovered over or
// focused. Otherwise, the color specified in $link-hover-fore-color will be used. // focused. Otherwise, the color specified in $link-hover-fore-color will be used.
// Variables for grid elements // Variables for grid elements
$use-four-step-grid: false; // Should the old 4-step grid system be used $use-four-step-grid: false; // Should the old 4-step grid system be used
// instead of the new (`true`/`false`) [1] // instead of the new (`true`/`false`) [1]
$include-parent-layout: true !default; // Should the classes for rows defining the column $include-parent-layout: true; // Should the classes for rows defining the column
// layout of children be included (`true`/`false`) [2] // layout of children be included (`true`/`false`) [2]
$grid-container-name: 'container'; // Class name for the grid container $grid-container-name: 'container'; // Class name for the grid container
$grid-container-side-padding: 10px; // Padding for the grid container (left and right only) $grid-container-side-padding: 10px; // Padding for the grid container (left and right only)
$grid-row-name: 'row'; // Class name for the grid's rows $grid-row-name: 'row'; // Class name for the grid's rows
$grid-row-parent-layout-prefix: 'cols'; // Class name prefix for the grid's row parents [2] $grid-row-parent-layout-prefix: 'cols'; // Class name prefix for the grid's row parents [2]
$grid-column-prefix: 'col'; // Class name prefix for the grid's columns $grid-column-prefix: 'col'; // Class name prefix for the grid's columns
$grid-column-offset-suffix: 'offset'; // Class name suffix for the grid's offsets $grid-column-offset-suffix: 'offset'; // Class name suffix for the grid's offsets
$grid-order-normal-suffix: 'normal'; // Class name suffix for grid columns with normal priority $grid-order-normal-suffix: 'normal'; // Class name suffix for grid columns with normal priority
$grid-order-first-suffix: 'first'; // Class name suffix for grid columns with highest priority $grid-order-first-suffix: 'first'; // Class name suffix for grid columns with highest priority
$grid-order-last-suffix: 'last'; // Class name suffix for grid columns with lowest priorty $grid-order-last-suffix: 'last'; // Class name suffix for grid columns with lowest priorty
$grid-column-count: 12; // Number of columns in the grid (integer value only) $grid-column-count: 12; // Number of columns in the grid (integer value only)
$grid-column-padding: 0 4px; // Padding for the columns of the grid $grid-column-padding: 0 4px; // Padding for the columns of the grid
//$grid-extra-small-prefix: 'xs'; // Extra small screen class prefix for grid $grid-small-prefix: 'sm'; // Small screen class prefix for grid
//$grid-small-breakpoint: 480px; // Small screen breakpoint for grid $grid-medium-breakpoint: 768px; // Medium screen breakpoint for grid
$grid-small-prefix: 'sm'; // Small screen class prefix for grid $grid-medium-prefix: 'md'; // Medium screen class prefix for grid
$grid-medium-breakpoint: 768px; // Medium screen breakpoint for grid $grid-large-breakpoint: 1280px; // Large screen breakpoint for grid
$grid-medium-prefix: 'md'; // Medium screen class prefix for grid $grid-large-prefix: 'lg'; // Large screen class prefix for grid
$grid-large-breakpoint: 1280px; // Large screen breakpoint for grid
$grid-large-prefix: 'lg'; // Large screen class prefix for grid
// Notes: // Notes:
// [1] - If the value of $use-four-step-grid is `true`, the grid system will contain 4 breakpoints instead of 3, along with // [1] - If the value of $use-four-step-grid is `true`, the grid system will contain 4 breakpoints instead of 3, along with
// the needed styles. In this case, values should be specified for $grid-extra-small-prefix and $grid-small-breakpoint. // the needed styles. In this case, values should be specified for $grid-extra-small-prefix and $grid-small-breakpoint.

162
src/mini/_grid.scss
View File

@@ -2,17 +2,32 @@
Definitions for the grid system. Definitions for the grid system.
*/ */
// The grid system uses the flexbox module, meaning it might be incompatible with certain browsers. // The grid system uses the flexbox module, meaning it might be incompatible with certain browsers.
$use-four-step-grid: false !default; // Flag for the grid system choice $use-four-step-grid: false !default; // Flag for the grid system choice (`true`/`false`).
$include-parent-layout: false !default; // Flag for rows defining column layouts $include-parent-layout: false !default; // Flag for rows defining column layouts (`true`/`false`).
$grid-container-name: 'container' !default; // Class name for the grid system container $grid-container-name: 'container' !default; // Class name for the grid system container.
$grid-container-side-padding: 20px !default; // Padding for the grid container (left and right only) $grid-container-side-padding: 20px !default; // Padding for the grid container (left and right only).
$grid-row-name: 'row' !default; // Class name for the grid system rows.
$grid-row-parent-layout-prefix: 'cols' !default; // Class name prefix for the grid's row parents.
$grid-column-prefix: 'col' !default; // Class name prefix for the grid's columns.
$grid-column-offset-suffix: 'offset' !default; // Class name suffix for the grid's offsets.
$grid-column-count: 12 !default; // Number of columns in the grid (integer value only).
$grid-column-padding: 0 4px !default; // Padding for the columns of the grid.
$grid-order-normal-suffix: 'normal' !default; // Class name suffix for grid columns with normal priority.
$grid-order-first-suffix: 'first' !default; // Class name suffix for grid columns with highest priority.
$grid-order-last-suffix: 'last' !default; // Class name suffix for grid columns with lowest priorty.
$grid-extra-small-prefix: 'xs' !default; // Extra small screen class prefix for grid (four-step-grid-only).
$grid-small-breakpoint: 768px !default; // Small screen breakpoint for grid (four-step-grid-only).
$grid-small-prefix: 'sm' !default; // Small screen class prefix for grid.
$grid-medium-breakpoint: 1024px !default; // Medium screen breakpoint for grid.
$grid-medium-prefix: 'md' !default; // Medium screen class prefix for grid.
$grid-large-breakpoint: 1280px !default; // Large screen breakpoint for grid.
$grid-large-prefix: 'lg' !default; // Large screen class prefix for grid.
// Fluid grid system container definition. // Fluid grid system container definition.
.#{$grid-container-name} { .#{$grid-container-name} {
margin: 0 auto; margin: 0 auto;
padding: 0 $grid-container-side-padding; padding: 0 $grid-container-side-padding;
} }
// Grid row definition. // Grid row definition.
$grid-row-name: 'row' !default; // Class name for the grid system rows
.#{$grid-row-name} { .#{$grid-row-name} {
box-sizing: border-box; box-sizing: border-box;
// Old syntax // Old syntax
@@ -21,22 +36,13 @@ $grid-row-name: 'row' !default; // Class name for the grid system ro
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
-webkit-box-direction: normal; -webkit-box-direction: normal;
// New syntax // New syntax
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-flex: 0 1 auto; -webkit-flex: 0 1 auto;
flex: 0 1 auto; flex: 0 1 auto;
-webkit-flex-flow: row wrap; -webkit-flex-flow: row wrap;
flex-flow: row wrap; flex-flow: row wrap;
} }
$grid-row-parent-layout-prefix: 'cols' !default; // Class name prefix for the grid's row parents
$grid-column-prefix: 'col' !default; // Class name prefix for the grid's columns
$grid-column-offset-suffix: 'offset' !default; // Class name suffix for the grid's offsets
$grid-column-count: 12 !default; // Number of columns in the grid (integer value only)
$grid-column-padding: 0 4px !default; // Padding for the columns of the grid
$grid-order-normal-suffix: 'normal' !default; // Class name suffix for grid columns with normal priority
$grid-order-first-suffix: 'first' !default; // Class name suffix for grid columns with highest priority
$grid-order-last-suffix: 'last' !default; // Class name suffix for grid columns with lowest priorty
$grid-extra-small-prefix: 'xs' !default; // Extra small screen class prefix for grid
// Basic definitions for rows defining column layouts. // Basic definitions for rows defining column layouts.
@if $include-parent-layout { @if $include-parent-layout {
@if $use-four-step-grid { @if $use-four-step-grid {
@@ -46,7 +52,7 @@ $grid-extra-small-prefix: 'xs' !default; // Extra small screen class pr
-webkit-box-flex: 0; -webkit-box-flex: 0;
// New syntax // New syntax
-webkit-flex: 0 0 auto; -webkit-flex: 0 0 auto;
flex: 0 0 auto; flex: 0 0 auto;
padding: $grid-column-padding; padding: $grid-column-padding;
} }
@media (min-width: #{$grid-small-breakpoint}){ @media (min-width: #{$grid-small-breakpoint}){
@@ -56,7 +62,7 @@ $grid-extra-small-prefix: 'xs' !default; // Extra small screen class pr
-webkit-box-flex: 0; -webkit-box-flex: 0;
// New syntax // New syntax
-webkit-flex: 0 0 auto; -webkit-flex: 0 0 auto;
flex: 0 0 auto; flex: 0 0 auto;
padding: $grid-column-padding; padding: $grid-column-padding;
} }
} }
@@ -67,7 +73,7 @@ $grid-extra-small-prefix: 'xs' !default; // Extra small screen class pr
-webkit-box-flex: 0; -webkit-box-flex: 0;
// New syntax // New syntax
-webkit-flex: 0 0 auto; -webkit-flex: 0 0 auto;
flex: 0 0 auto; flex: 0 0 auto;
padding: $grid-column-padding; padding: $grid-column-padding;
} }
} }
@@ -78,7 +84,7 @@ $grid-extra-small-prefix: 'xs' !default; // Extra small screen class pr
-webkit-box-flex: 0; -webkit-box-flex: 0;
// New syntax // New syntax
-webkit-flex: 0 0 auto; -webkit-flex: 0 0 auto;
flex: 0 0 auto; flex: 0 0 auto;
padding: $grid-column-padding; padding: $grid-column-padding;
} }
} }
@@ -90,7 +96,7 @@ $grid-extra-small-prefix: 'xs' !default; // Extra small screen class pr
-webkit-box-flex: 0; -webkit-box-flex: 0;
// New syntax // New syntax
-webkit-flex: 0 0 auto; -webkit-flex: 0 0 auto;
flex: 0 0 auto; flex: 0 0 auto;
padding: $grid-column-padding; padding: $grid-column-padding;
} }
@media (min-width: #{$grid-medium-breakpoint}){ @media (min-width: #{$grid-medium-breakpoint}){
@@ -100,7 +106,7 @@ $grid-extra-small-prefix: 'xs' !default; // Extra small screen class pr
-webkit-box-flex: 0; -webkit-box-flex: 0;
// New syntax // New syntax
-webkit-flex: 0 0 auto; -webkit-flex: 0 0 auto;
flex: 0 0 auto; flex: 0 0 auto;
padding: $grid-column-padding; padding: $grid-column-padding;
} }
} }
@@ -111,7 +117,7 @@ $grid-extra-small-prefix: 'xs' !default; // Extra small screen class pr
-webkit-box-flex: 0; -webkit-box-flex: 0;
// New syntax // New syntax
-webkit-flex: 0 0 auto; -webkit-flex: 0 0 auto;
flex: 0 0 auto; flex: 0 0 auto;
padding: $grid-column-padding; padding: $grid-column-padding;
} }
} }
@@ -128,7 +134,7 @@ $grid-extra-small-prefix: 'xs' !default; // Extra small screen class pr
-webkit-box-flex: 0; -webkit-box-flex: 0;
// New syntax // New syntax
-webkit-flex: 0 0 auto; -webkit-flex: 0 0 auto;
flex: 0 0 auto; flex: 0 0 auto;
padding: $grid-column-padding; padding: $grid-column-padding;
} }
// Grid column specific definition for flexible column. // Grid column specific definition for flexible column.
@@ -140,9 +146,9 @@ $grid-extra-small-prefix: 'xs' !default; // Extra small screen class pr
max-width: 100%; max-width: 100%;
// New syntax // New syntax
-webkit-flex-grow: 1; -webkit-flex-grow: 1;
flex-grow: 1; flex-grow: 1;
-webkit-flex-basis: 0; -webkit-flex-basis: 0;
flex-basis: 0; flex-basis: 0;
} }
} }
@else { @else {
@@ -152,9 +158,9 @@ $grid-extra-small-prefix: 'xs' !default; // Extra small screen class pr
max-width: 100%; max-width: 100%;
// New syntax // New syntax
-webkit-flex-grow: 1; -webkit-flex-grow: 1;
flex-grow: 1; flex-grow: 1;
-webkit-flex-basis: 0; -webkit-flex-basis: 0;
flex-basis: 0; flex-basis: 0;
} }
} }
// Grid column specific definitions for predefined columns. // Grid column specific definitions for predefined columns.
@@ -166,7 +172,7 @@ $grid-extra-small-prefix: 'xs' !default; // Extra small screen class pr
max-width: #{($i * 100% / $grid-column-count)}; max-width: #{($i * 100% / $grid-column-count)};
// New syntax // New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)}; -webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)}; flex-basis: #{($i * 100% / $grid-column-count)};
} }
} }
@else { @else {
@@ -175,7 +181,7 @@ $grid-extra-small-prefix: 'xs' !default; // Extra small screen class pr
max-width: #{($i * 100% / $grid-column-count)}; max-width: #{($i * 100% / $grid-column-count)};
// New syntax // New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)}; -webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)}; flex-basis: #{($i * 100% / $grid-column-count)};
} }
} }
} }
@@ -192,19 +198,17 @@ $grid-extra-small-prefix: 'xs' !default; // Extra small screen class pr
} }
.#{$grid-column-prefix}-#{$grid-extra-small-prefix}-#{$grid-order-normal-suffix} { .#{$grid-column-prefix}-#{$grid-extra-small-prefix}-#{$grid-order-normal-suffix} {
-webkit-order: initial; -webkit-order: initial;
order: initial; order: initial;
} }
.#{$grid-column-prefix}-#{$grid-extra-small-prefix}-#{$grid-order-first-suffix} { .#{$grid-column-prefix}-#{$grid-extra-small-prefix}-#{$grid-order-first-suffix} {
-webkit-order: -999; -webkit-order: -999;
order: -999; order: -999;
} }
.#{$grid-column-prefix}-#{$grid-extra-small-prefix}-#{$grid-order-lst-suffix} { .#{$grid-column-prefix}-#{$grid-extra-small-prefix}-#{$grid-order-lst-suffix} {
-webkit-order: 999; -webkit-order: 999;
order: 999; order: 999;
} }
} }
$grid-small-breakpoint: 768px !default; // Small screen breakpoint for grid
$grid-small-prefix: 'sm' !default; // Small screen class prefix for grid
// Legacy grid system definitions. // Legacy grid system definitions.
@if $use-four-step-grid { @if $use-four-step-grid {
// Small screen breakpoint. // Small screen breakpoint.
@@ -218,7 +222,7 @@ $grid-small-prefix: 'sm' !default; // Small screen class prefix for g
-webkit-box-flex: 0; -webkit-box-flex: 0;
// New syntax // New syntax
-webkit-flex: 0 0 auto; -webkit-flex: 0 0 auto;
flex: 0 0 auto; flex: 0 0 auto;
padding: $grid-column-padding; padding: $grid-column-padding;
} }
// Grid column specific definition for flexible column. // Grid column specific definition for flexible column.
@@ -230,9 +234,9 @@ $grid-small-prefix: 'sm' !default; // Small screen class prefix for g
max-width: 100%; max-width: 100%;
// New syntax // New syntax
-webkit-flex-grow: 1; -webkit-flex-grow: 1;
flex-grow: 1; flex-grow: 1;
-webkit-flex-basis: 0; -webkit-flex-basis: 0;
flex-basis: 0; flex-basis: 0;
} }
} }
@else { @else {
@@ -242,9 +246,9 @@ $grid-small-prefix: 'sm' !default; // Small screen class prefix for g
max-width: 100%; max-width: 100%;
// New syntax // New syntax
-webkit-flex-grow: 1; -webkit-flex-grow: 1;
flex-grow: 1; flex-grow: 1;
-webkit-flex-basis: 0; -webkit-flex-basis: 0;
flex-basis: 0; flex-basis: 0;
} }
} }
// Grid column specific definitions for predefined columns. // Grid column specific definitions for predefined columns.
@@ -256,7 +260,7 @@ $grid-small-prefix: 'sm' !default; // Small screen class prefix for g
max-width: #{($i * 100% / $grid-column-count)}; max-width: #{($i * 100% / $grid-column-count)};
// New syntax // New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)}; -webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)}; flex-basis: #{($i * 100% / $grid-column-count)};
} }
} }
@else { @else {
@@ -265,7 +269,7 @@ $grid-small-prefix: 'sm' !default; // Small screen class prefix for g
max-width: #{($i * 100% / $grid-column-count)}; max-width: #{($i * 100% / $grid-column-count)};
// New syntax // New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)}; -webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)}; flex-basis: #{($i * 100% / $grid-column-count)};
} }
} }
} }
@@ -282,15 +286,15 @@ $grid-small-prefix: 'sm' !default; // Small screen class prefix for g
} }
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-normal-suffix} { .#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-normal-suffix} {
-webkit-order: initial; -webkit-order: initial;
order: initial; order: initial;
} }
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-first-suffix} { .#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-first-suffix} {
-webkit-order: -999; -webkit-order: -999;
order: -999; order: -999;
} }
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-last-suffix} { .#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-last-suffix} {
-webkit-order: 999; -webkit-order: 999;
order: 999; order: 999;
} }
} }
} }
@@ -305,7 +309,7 @@ $grid-small-prefix: 'sm' !default; // Small screen class prefix for g
-webkit-box-flex: 0; -webkit-box-flex: 0;
// New syntax // New syntax
-webkit-flex: 0 0 auto; -webkit-flex: 0 0 auto;
flex: 0 0 auto; flex: 0 0 auto;
padding: $grid-column-padding; padding: $grid-column-padding;
} }
// Grid column specific definition for flexible column. // Grid column specific definition for flexible column.
@@ -317,9 +321,9 @@ $grid-small-prefix: 'sm' !default; // Small screen class prefix for g
max-width: 100%; max-width: 100%;
// New syntax // New syntax
-webkit-flex-grow: 1; -webkit-flex-grow: 1;
flex-grow: 1; flex-grow: 1;
-webkit-flex-basis: 0; -webkit-flex-basis: 0;
flex-basis: 0; flex-basis: 0;
} }
} }
@else { @else {
@@ -329,9 +333,9 @@ $grid-small-prefix: 'sm' !default; // Small screen class prefix for g
max-width: 100%; max-width: 100%;
// New syntax // New syntax
-webkit-flex-grow: 1; -webkit-flex-grow: 1;
flex-grow: 1; flex-grow: 1;
-webkit-flex-basis: 0; -webkit-flex-basis: 0;
flex-basis: 0; flex-basis: 0;
} }
} }
// Grid column specific definitions for predefined columns. // Grid column specific definitions for predefined columns.
@@ -343,7 +347,7 @@ $grid-small-prefix: 'sm' !default; // Small screen class prefix for g
max-width: #{($i * 100% / $grid-column-count)}; max-width: #{($i * 100% / $grid-column-count)};
// New syntax // New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)}; -webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)}; flex-basis: #{($i * 100% / $grid-column-count)};
} }
} }
@else { @else {
@@ -352,7 +356,7 @@ $grid-small-prefix: 'sm' !default; // Small screen class prefix for g
max-width: #{($i * 100% / $grid-column-count)}; max-width: #{($i * 100% / $grid-column-count)};
// New syntax // New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)}; -webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)}; flex-basis: #{($i * 100% / $grid-column-count)};
} }
} }
} }
@@ -369,20 +373,18 @@ $grid-small-prefix: 'sm' !default; // Small screen class prefix for g
} }
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-normal-suffix} { .#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-normal-suffix} {
-webkit-order: initial; -webkit-order: initial;
order: initial; order: initial;
} }
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-first-suffix} { .#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-first-suffix} {
-webkit-order: -999; -webkit-order: -999;
order: -999; order: -999;
} }
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-last-suffix} { .#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-last-suffix} {
-webkit-order: 999; -webkit-order: 999;
order: 999; order: 999;
} }
} }
// The rest is mixed definitions. // The rest is mixed definitions.
$grid-medium-breakpoint: 1024px !default; // Medium screen breakpoint for grid
$grid-medium-prefix: 'md' !default; // Medium screen class prefix for grid
// Medium screen breakpoint. // Medium screen breakpoint.
@media (min-width: #{$grid-medium-breakpoint}){ @media (min-width: #{$grid-medium-breakpoint}){
// Grid column generic definitions for medium screens. // Grid column generic definitions for medium screens.
@@ -394,7 +396,7 @@ $grid-medium-prefix: 'md' !default; // Medium screen class prefix for
-webkit-box-flex: 0; -webkit-box-flex: 0;
// New syntax // New syntax
-webkit-flex: 0 0 auto; -webkit-flex: 0 0 auto;
flex: 0 0 auto; flex: 0 0 auto;
padding: $grid-column-padding; padding: $grid-column-padding;
} }
// Grid column specific definition for flexible column. // Grid column specific definition for flexible column.
@@ -406,9 +408,9 @@ $grid-medium-prefix: 'md' !default; // Medium screen class prefix for
max-width: 100%; max-width: 100%;
// New syntax // New syntax
-webkit-flex-grow: 1; -webkit-flex-grow: 1;
flex-grow: 1; flex-grow: 1;
-webkit-flex-basis: 0; -webkit-flex-basis: 0;
flex-basis: 0; flex-basis: 0;
} }
} }
@else { @else {
@@ -418,9 +420,9 @@ $grid-medium-prefix: 'md' !default; // Medium screen class prefix for
max-width: 100%; max-width: 100%;
// New syntax // New syntax
-webkit-flex-grow: 1; -webkit-flex-grow: 1;
flex-grow: 1; flex-grow: 1;
-webkit-flex-basis: 0; -webkit-flex-basis: 0;
flex-basis: 0; flex-basis: 0;
} }
} }
// Grid column specific definitions for predefined columns. // Grid column specific definitions for predefined columns.
@@ -432,7 +434,7 @@ $grid-medium-prefix: 'md' !default; // Medium screen class prefix for
max-width: #{($i * 100% / $grid-column-count)}; max-width: #{($i * 100% / $grid-column-count)};
// New syntax // New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)}; -webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)}; flex-basis: #{($i * 100% / $grid-column-count)};
} }
} }
@else { @else {
@@ -441,7 +443,7 @@ $grid-medium-prefix: 'md' !default; // Medium screen class prefix for
max-width: #{($i * 100% / $grid-column-count)}; max-width: #{($i * 100% / $grid-column-count)};
// New syntax // New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)}; -webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)}; flex-basis: #{($i * 100% / $grid-column-count)};
} }
} }
} }
@@ -458,19 +460,17 @@ $grid-medium-prefix: 'md' !default; // Medium screen class prefix for
} }
.#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-order-normal-suffix} { .#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-order-normal-suffix} {
-webkit-order: initial; -webkit-order: initial;
order: initial; order: initial;
} }
.#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-order-first-suffix} { .#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-order-first-suffix} {
-webkit-order: -999; -webkit-order: -999;
order: -999; order: -999;
} }
.#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-order-last-suffix} { .#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-order-last-suffix} {
-webkit-order: 999; -webkit-order: 999;
order: 999; order: 999;
} }
} }
$grid-large-breakpoint: 1280px !default; // Large screen breakpoint for grid
$grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
// Large screen breakpoint. // Large screen breakpoint.
@media (min-width: #{$grid-large-breakpoint}){ @media (min-width: #{$grid-large-breakpoint}){
// Grid column generic definitions for large screens. // Grid column generic definitions for large screens.
@@ -482,7 +482,7 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for g
-webkit-box-flex: 0; -webkit-box-flex: 0;
// New syntax // New syntax
-webkit-flex: 0 0 auto; -webkit-flex: 0 0 auto;
flex: 0 0 auto; flex: 0 0 auto;
padding: $grid-column-padding; padding: $grid-column-padding;
} }
// Grid column specific definition for flexible column. // Grid column specific definition for flexible column.
@@ -494,9 +494,9 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for g
max-width: 100%; max-width: 100%;
// New syntax // New syntax
-webkit-flex-grow: 1; -webkit-flex-grow: 1;
flex-grow: 1; flex-grow: 1;
-webkit-flex-basis: 0; -webkit-flex-basis: 0;
flex-basis: 0; flex-basis: 0;
} }
} }
@else { @else {
@@ -506,9 +506,9 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for g
max-width: 100%; max-width: 100%;
// New syntax // New syntax
-webkit-flex-grow: 1; -webkit-flex-grow: 1;
flex-grow: 1; flex-grow: 1;
-webkit-flex-basis: 0; -webkit-flex-basis: 0;
flex-basis: 0; flex-basis: 0;
} }
} }
// Grid column specific definitions for predefined columns. // Grid column specific definitions for predefined columns.
@@ -520,7 +520,7 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for g
max-width: #{($i * 100% / $grid-column-count)}; max-width: #{($i * 100% / $grid-column-count)};
// New syntax // New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)}; -webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)}; flex-basis: #{($i * 100% / $grid-column-count)};
} }
} }
@else { @else {
@@ -529,7 +529,7 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for g
max-width: #{($i * 100% / $grid-column-count)}; max-width: #{($i * 100% / $grid-column-count)};
// New syntax // New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)}; -webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)}; flex-basis: #{($i * 100% / $grid-column-count)};
} }
} }
} }
@@ -546,14 +546,14 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for g
} }
.#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-order-normal-suffix} { .#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-order-normal-suffix} {
-webkit-order: initial; -webkit-order: initial;
order: initial; order: initial;
} }
.#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-order-first-suffix} { .#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-order-first-suffix} {
-webkit-order: -999; -webkit-order: -999;
order: -999; order: -999;
} }
.#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-order-last-suffix} { .#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-order-last-suffix} {
-webkit-order: 999; -webkit-order: 999;
order: 999; order: 999;
} }
} }