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

Grid updated to allow for auto-alignment of children in rows with certain classes, resolves #53

Browse Source
This commit is contained in:
Angelos Chalaris
2017-01-06 19:19:12 +02:00
parent 745e8d1cff
commit d5cbecef5a
6 changed files with 526 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
dist/mini-default.css vendored
View File

@@ -185,6 +185,27 @@ a {
-webkit-flex-flow: row wrap;
flex-flow: row wrap; }
.row[class*='cols-sm-'] > * {
box-sizing: border-box;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
padding: 0 4px; }
@media (min-width: 768px) {
.row[class*='cols-md-'] > * {
box-sizing: border-box;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
padding: 0 4px; } }
@media (min-width: 1280px) {
.row[class*='cols-lg-'] > * {
box-sizing: border-box;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
padding: 0 4px; } }
.col-sm,
[class^='col-sm-'],
[class^='col-sm-offset-'] {
@@ -194,7 +215,8 @@ a {
flex: 0 0 auto;
padding: 0 4px; }
.col-sm {
.col-sm,
.row.cols-sm > * {
-webkit-box-flex: 1;
max-width: 100%;
-webkit-flex-grow: 1;
@@ -202,62 +224,74 @@ a {
-webkit-flex-basis: 0;
flex-basis: 0; }
.col-sm-1 {
.col-sm-1,
.row.cols-sm-1 > * {
max-width: 8.33333%;
-webkit-flex-basis: 8.33333%;
flex-basis: 8.33333%; }
.col-sm-2 {
.col-sm-2,
.row.cols-sm-2 > * {
max-width: 16.66667%;
-webkit-flex-basis: 16.66667%;
flex-basis: 16.66667%; }
.col-sm-3 {
.col-sm-3,
.row.cols-sm-3 > * {
max-width: 25%;
-webkit-flex-basis: 25%;
flex-basis: 25%; }
.col-sm-4 {
.col-sm-4,
.row.cols-sm-4 > * {
max-width: 33.33333%;
-webkit-flex-basis: 33.33333%;
flex-basis: 33.33333%; }
.col-sm-5 {
.col-sm-5,
.row.cols-sm-5 > * {
max-width: 41.66667%;
-webkit-flex-basis: 41.66667%;
flex-basis: 41.66667%; }
.col-sm-6 {
.col-sm-6,
.row.cols-sm-6 > * {
max-width: 50%;
-webkit-flex-basis: 50%;
flex-basis: 50%; }
.col-sm-7 {
.col-sm-7,
.row.cols-sm-7 > * {
max-width: 58.33333%;
-webkit-flex-basis: 58.33333%;
flex-basis: 58.33333%; }
.col-sm-8 {
.col-sm-8,
.row.cols-sm-8 > * {
max-width: 66.66667%;
-webkit-flex-basis: 66.66667%;
flex-basis: 66.66667%; }
.col-sm-9 {
.col-sm-9,
.row.cols-sm-9 > * {
max-width: 75%;
-webkit-flex-basis: 75%;
flex-basis: 75%; }
.col-sm-10 {
.col-sm-10,
.row.cols-sm-10 > * {
max-width: 83.33333%;
-webkit-flex-basis: 83.33333%;
flex-basis: 83.33333%; }
.col-sm-11 {
.col-sm-11,
.row.cols-sm-11 > * {
max-width: 91.66667%;
-webkit-flex-basis: 91.66667%;
flex-basis: 91.66667%; }
.col-sm-12 {
.col-sm-12,
.row.cols-sm-12 > * {
max-width: 100%;
-webkit-flex-basis: 100%;
flex-basis: 100%; }
@@ -320,7 +354,8 @@ a {
flex: 0 0 auto;
padding: 0 4px; }
.col-md {
.col-md,
.row.cols-md > * {
-webkit-box-flex: 1;
max-width: 100%;
-webkit-flex-grow: 1;
@@ -328,62 +363,74 @@ a {
-webkit-flex-basis: 0;
flex-basis: 0; }
.col-md-1 {
.col-md-1,
.row.cols-md-1 > * {
max-width: 8.33333%;
-webkit-flex-basis: 8.33333%;
flex-basis: 8.33333%; }
.col-md-2 {
.col-md-2,
.row.cols-md-2 > * {
max-width: 16.66667%;
-webkit-flex-basis: 16.66667%;
flex-basis: 16.66667%; }
.col-md-3 {
.col-md-3,
.row.cols-md-3 > * {
max-width: 25%;
-webkit-flex-basis: 25%;
flex-basis: 25%; }
.col-md-4 {
.col-md-4,
.row.cols-md-4 > * {
max-width: 33.33333%;
-webkit-flex-basis: 33.33333%;
flex-basis: 33.33333%; }
.col-md-5 {
.col-md-5,
.row.cols-md-5 > * {
max-width: 41.66667%;
-webkit-flex-basis: 41.66667%;
flex-basis: 41.66667%; }
.col-md-6 {
.col-md-6,
.row.cols-md-6 > * {
max-width: 50%;
-webkit-flex-basis: 50%;
flex-basis: 50%; }
.col-md-7 {
.col-md-7,
.row.cols-md-7 > * {
max-width: 58.33333%;
-webkit-flex-basis: 58.33333%;
flex-basis: 58.33333%; }
.col-md-8 {
.col-md-8,
.row.cols-md-8 > * {
max-width: 66.66667%;
-webkit-flex-basis: 66.66667%;
flex-basis: 66.66667%; }
.col-md-9 {
.col-md-9,
.row.cols-md-9 > * {
max-width: 75%;
-webkit-flex-basis: 75%;
flex-basis: 75%; }
.col-md-10 {
.col-md-10,
.row.cols-md-10 > * {
max-width: 83.33333%;
-webkit-flex-basis: 83.33333%;
flex-basis: 83.33333%; }
.col-md-11 {
.col-md-11,
.row.cols-md-11 > * {
max-width: 91.66667%;
-webkit-flex-basis: 91.66667%;
flex-basis: 91.66667%; }
.col-md-12 {
.col-md-12,
.row.cols-md-12 > * {
max-width: 100%;
-webkit-flex-basis: 100%;
flex-basis: 100%; }
@@ -445,7 +492,8 @@ a {
flex: 0 0 auto;
padding: 0 4px; }
.col-lg {
.col-lg,
.row.cols-lg > * {
-webkit-box-flex: 1;
max-width: 100%;
-webkit-flex-grow: 1;
@@ -453,62 +501,74 @@ a {
-webkit-flex-basis: 0;
flex-basis: 0; }
.col-lg-1 {
.col-lg-1,
.row.cols-lg-1 > * {
max-width: 8.33333%;
-webkit-flex-basis: 8.33333%;
flex-basis: 8.33333%; }
.col-lg-2 {
.col-lg-2,
.row.cols-lg-2 > * {
max-width: 16.66667%;
-webkit-flex-basis: 16.66667%;
flex-basis: 16.66667%; }
.col-lg-3 {
.col-lg-3,
.row.cols-lg-3 > * {
max-width: 25%;
-webkit-flex-basis: 25%;
flex-basis: 25%; }
.col-lg-4 {
.col-lg-4,
.row.cols-lg-4 > * {
max-width: 33.33333%;
-webkit-flex-basis: 33.33333%;
flex-basis: 33.33333%; }
.col-lg-5 {
.col-lg-5,
.row.cols-lg-5 > * {
max-width: 41.66667%;
-webkit-flex-basis: 41.66667%;
flex-basis: 41.66667%; }
.col-lg-6 {
.col-lg-6,
.row.cols-lg-6 > * {
max-width: 50%;
-webkit-flex-basis: 50%;
flex-basis: 50%; }
.col-lg-7 {
.col-lg-7,
.row.cols-lg-7 > * {
max-width: 58.33333%;
-webkit-flex-basis: 58.33333%;
flex-basis: 58.33333%; }
.col-lg-8 {
.col-lg-8,
.row.cols-lg-8 > * {
max-width: 66.66667%;
-webkit-flex-basis: 66.66667%;
flex-basis: 66.66667%; }
.col-lg-9 {
.col-lg-9,
.row.cols-lg-9 > * {
max-width: 75%;
-webkit-flex-basis: 75%;
flex-basis: 75%; }
.col-lg-10 {
.col-lg-10,
.row.cols-lg-10 > * {
max-width: 83.33333%;
-webkit-flex-basis: 83.33333%;
flex-basis: 83.33333%; }
.col-lg-11 {
.col-lg-11,
.row.cols-lg-11 > * {
max-width: 91.66667%;
-webkit-flex-basis: 91.66667%;
flex-basis: 91.66667%; }
.col-lg-12 {
.col-lg-12,
.row.cols-lg-12 > * {
max-width: 100%;
-webkit-flex-basis: 100%;
flex-basis: 100%; }

2
dist/mini-default.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
docs/v2/DEVLOG.md
View File

@@ -736,3 +736,7 @@
## 20170106
- Created a new branch for the development of v2.1.0.
- Added `$include-parent-layout` flag, which will allow rows declaring column layout for children.
- Implemented the whole *simple* layout structure for the `grid` module, allowing a `.row` to set the layout of its children, using a `.cols-{SZ}-{WD}` class.
- Decided to include the new `grid` system in the `mini-default` flavor, as its functionality could be beneficial to a lot of people. The new filesize (gzipped) is `6.47KB` over the previous `6.32KB`.
- Added what is basically an *auto-grid* option in `.row.cols-sm` and similar for other sizes, that auto-sizes all columns in a given row. Might come in handy.

125
docs/v2/demo.html Normal file
View File

@@ -0,0 +1,125 @@
<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.2/dist/mini-default.min.css"> -->
<link rel="stylesheet" href="../../dist/mini-default.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - v2.1.0 Test page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit">
<meta name="keywords" content="mini, mini.css, CSS, framework, toolkit, minimal, responsive, style-agnostic, Sass">
<meta name="author" content="Angelos Chalaris (chalarangelo)">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit">
<meta property="og:type" content="website"/>
<meta property="og:description" content="mini.css is a tiny CSS toolkit designed to build quick, modern and responsive websites."/>
<meta property="og:image" content="page_thumb.PNG">
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/">
<link rel="icon" type="image/png" href="favicon.png">
<style>
/* Classes and ids used in multiple pages - page top and utilities */
#header-logo {
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
padding: 4px;
}
#top-logo {
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
#top-heading {
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
}
#top-version-tag {
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.box-centered { text-align: center; }
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
.box-colored.red { background: #e53935; }
.box-centered > .card.fluid {
-webkit-box-pack: start;
-webkit-box-align: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-self: auto;
align-self: auto;
}
[class^='col-'] .card.fluid { margin: 2px 0 20px; }
/* Local classes and ids for this page */
.fore-primary { color: #0d47a1; font-family: monospace, monospace; }
.fore-secondary { color: #b71c1c; font-family: monospace, monospace; }
.fore-tertiary { color: #1b5e20; font-family: monospace, monospace; }
.col-sm-12.col-sm-last.col-md-4.col-md-normal {
box-sizing: border-box;
border-right: 1px solid #bdbdbd;
}
@media (max-width: 767px){
.col-sm-12.col-sm-last.col-md-4.col-md-normal {
border: 0;
border-top: 1px solid #bdbdbd;
}
}
.box-colored.green { background: #689f38; }
.do {
border-top: 15px solid #689f38;
padding-top: 10px;
}
.dont {
border-top: 15px solid #e53935;
padding-top: 10px;
}
.box-colored {
color: #f5f5f5;
}
</style>
</head>
<body>
<header>
<a href="index.html"><img class="logo" src="mini-logo.svg" id="header-logo"></a><div style="display: inline; overflow: auto;">
<a href="index.html" class="button">Introduction</a>
<a href="modules.html" class="button">Modules</a>
<a href="flavors.html" class="button">Flavors</a>
<a href="customization.html" class="button">Customization</a>
<a href="quick_reference.html" class="button">Quick Reference</a>
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</a>
</div>
</header>
<div class="container" style="height: 320px; background: -webkit-linear-gradient(#455a64,#263238); background: linear-gradient(#455a64,#263238); box-shadow: 0 3px 9px rgba(0,0,0,0.26), 0 3px 6px rgba(0,0,0,0.35);">
<div class="row">
<div class="col-sm">
<div class="box-centered">
<img src="mini-logo.svg" id="top-logo">
<h1 id="top-heading"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></h1>
<mark class="tertiary" id="top-version-tag">v2.0</mark>
</div>
</div>
</div>
</div>
<!-- Insert your page content here-->
<main><div class="container">
<div class="row cols-sm-12" style="padding-top: 20px">
<div><h2>Quick-layout system</h2>
</div>
<div class="row cols-sm-12 cols-md-6 cols-lg-4">
<div><div class="box-colored"></div></div>
<div><div class="box-colored"></div></div>
<div><div class="box-colored"></div></div>
<div><div class="box-colored"></div></div>
<div><div class="box-colored"></div></div>
<div><div class="box-colored"></div></div>
</div>
<div class="row cols-sm-12">
<div><h2>Classic system</h2>
</div>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4"><div class="box-colored"></div></div>
<div class="col-sm-12 col-md-6 col-lg-4"><div class="box-colored"></div></div>
<div class="col-sm-12 col-md-6 col-lg-4"><div class="box-colored"></div></div>
<div class="col-sm-12 col-md-6 col-lg-4"><div class="box-colored"></div></div>
<div class="col-sm-12 col-md-6 col-lg-4"><div class="box-colored"></div></div>
<div class="col-sm-12 col-md-6 col-lg-4"><div class="box-colored"></div></div>
</div>
</div></main>
<!-- End of page content-->
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
</body>
</html>

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

@@ -135,9 +135,12 @@ $apply-link-hover-fade: true; // Should the :hover and :focus state
// Variables for grid elements
$use-four-step-grid: false; // Should the old 4-step grid system be used
// instead of the new (`true`/`false`) [1]
$include-parent-layout: true !default; // Should the classes for rows defining the column
// layout of children be included (`true`/`false`) [2]
$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-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-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-order-normal-suffix: 'normal'; // Class name suffix for grid columns with normal priority
@@ -155,6 +158,8 @@ $grid-large-prefix: 'lg'; // Large screen class prefix for grid
// Notes:
// [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.
// [2] - If the value of $include-parent-layout is `true`, the grid system will contain extra classes that will define the column
// layout of their children. In this case, a value should be specified for $grid-row-parent-layout-prefix.
// Variables for navigational elements
$header-height: 44px; // Height for <header>
$header-back-color: #263238; // Background color for <header>

367
src/mini/_grid.scss
View File

@@ -3,6 +3,7 @@
*/
// 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
$include-parent-layout: false !default; // Flag for rows defining column layouts
$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)
// Fluid grid system container definition.
@@ -27,6 +28,7 @@ $grid-row-name: 'row' !default; // Class name for the grid system ro
-webkit-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)
@@ -35,6 +37,86 @@ $grid-order-normal-suffix: 'normal' !default; // Class name suffix for g
$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.
@if $include-parent-layout {
@if $use-four-step-grid {
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-extra-small-prefix}-'] > *{
box-sizing: border-box;
// Old syntax
-webkit-box-flex: 0;
// New syntax
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
padding: $grid-column-padding;
}
@media (min-width: #{$grid-small-breakpoint}){
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix}-'] > * {
box-sizing: border-box;
// Old syntax
-webkit-box-flex: 0;
// New syntax
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
padding: $grid-column-padding;
}
}
@media (min-width: #{$grid-medium-breakpoint}){
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix}-'] > * {
box-sizing: border-box;
// Old syntax
-webkit-box-flex: 0;
// New syntax
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
padding: $grid-column-padding;
}
}
@media (min-width: #{$grid-large-breakpoint}){
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix}-'] > * {
box-sizing: border-box;
// Old syntax
-webkit-box-flex: 0;
// New syntax
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
padding: $grid-column-padding;
}
}
}
@else {
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix}-'] > * {
box-sizing: border-box;
// Old syntax
-webkit-box-flex: 0;
// New syntax
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
padding: $grid-column-padding;
}
@media (min-width: #{$grid-medium-breakpoint}){
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix}-'] > * {
box-sizing: border-box;
// Old syntax
-webkit-box-flex: 0;
// New syntax
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
padding: $grid-column-padding;
}
}
@media (min-width: #{$grid-large-breakpoint}){
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix}-'] > * {
box-sizing: border-box;
// Old syntax
-webkit-box-flex: 0;
// New syntax
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
padding: $grid-column-padding;
}
}
}
}
// Legacy grid system definitions.
@if $use-four-step-grid {
// Grid column generic definitions for extra small screens.
@@ -50,25 +132,52 @@ $grid-extra-small-prefix: 'xs' !default; // Extra small screen class pr
padding: $grid-column-padding;
}
// Grid column specific definition for flexible column.
.#{$grid-column-prefix}-#{$grid-extra-small-prefix} {
// Old syntax
-webkit-box-flex: 1;
max-width: 100%;
// New syntax
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0;
@if $include-parent-layout {
.#{$grid-column-prefix}-#{$grid-extra-small-prefix},
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-extra-small-prefix} > * {
// Old syntax
-webkit-box-flex: 1;
max-width: 100%;
// New syntax
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0;
}
}
@else {
.#{$grid-column-prefix}-#{$grid-extra-small-prefix} {
// Old syntax
-webkit-box-flex: 1;
max-width: 100%;
// New syntax
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0;
}
}
// Grid column specific definitions for predefined columns.
@for $i from 1 through $grid-column-count {
.#{$grid-column-prefix}-#{$grid-extra-small-prefix}-#{$i} {
// Old syntax
max-width: #{($i * 100% / $grid-column-count)};
// New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
@if $include-parent-layout {
.#{$grid-column-prefix}-#{$grid-extra-small-prefix}-#{$i},
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-extra-small-prefix}-#{$i} > * {
// Old syntax
max-width: #{($i * 100% / $grid-column-count)};
// New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
}
}
@else {
.#{$grid-column-prefix}-#{$grid-extra-small-prefix}-#{$i} {
// Old syntax
max-width: #{($i * 100% / $grid-column-count)};
// New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
}
}
}
// Grid column specific definitions for offset columns.
@for $i from 0 through ($grid-column-count - 1) {
@@ -113,24 +222,51 @@ $grid-small-prefix: 'sm' !default; // Small screen class prefix for g
padding: $grid-column-padding;
}
// Grid column specific definition for flexible column.
.#{$grid-column-prefix}-#{$grid-small-prefix} {
// Old syntax
-webkit-box-flex: 1;
max-width: 100%;
// New syntax
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0;
@if $include-parent-layout {
.#{$grid-column-prefix}-#{$grid-small-prefix},
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix} > * {
// Old syntax
-webkit-box-flex: 1;
max-width: 100%;
// New syntax
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0;
}
}
@else {
.#{$grid-column-prefix}-#{$grid-small-prefix} {
// Old syntax
-webkit-box-flex: 1;
max-width: 100%;
// New syntax
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0;
}
}
// Grid column specific definitions for predefined columns.
@for $i from 1 through $grid-column-count {
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$i} {
// Old syntax
max-width: #{($i * 100% / $grid-column-count)};
// New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
@if $include-parent-layout {
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$i},
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix}-#{$i} > * {
// Old syntax
max-width: #{($i * 100% / $grid-column-count)};
// New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
}
}
@else {
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$i} {
// Old syntax
max-width: #{($i * 100% / $grid-column-count)};
// New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
}
}
}
// Grid column specific definitions for offset columns.
@@ -173,24 +309,51 @@ $grid-small-prefix: 'sm' !default; // Small screen class prefix for g
padding: $grid-column-padding;
}
// Grid column specific definition for flexible column.
.#{$grid-column-prefix}-#{$grid-small-prefix} {
// Old syntax
-webkit-box-flex: 1;
max-width: 100%;
// New syntax
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0;
@if $include-parent-layout {
.#{$grid-column-prefix}-#{$grid-small-prefix},
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix} > * {
// Old syntax
-webkit-box-flex: 1;
max-width: 100%;
// New syntax
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0;
}
}
@else {
.#{$grid-column-prefix}-#{$grid-small-prefix} {
// Old syntax
-webkit-box-flex: 1;
max-width: 100%;
// New syntax
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0;
}
}
// Grid column specific definitions for predefined columns.
@for $i from 1 through $grid-column-count {
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$i} {
// Old syntax
max-width: #{($i * 100% / $grid-column-count)};
// New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
@if $include-parent-layout {
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$i},
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix}-#{$i} > * {
// Old syntax
max-width: #{($i * 100% / $grid-column-count)};
// New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
}
}
@else {
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$i} {
// Old syntax
max-width: #{($i * 100% / $grid-column-count)};
// New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
}
}
}
// Grid column specific definitions for offset columns.
@@ -235,24 +398,51 @@ $grid-medium-prefix: 'md' !default; // Medium screen class prefix for
padding: $grid-column-padding;
}
// Grid column specific definition for flexible column.
.#{$grid-column-prefix}-#{$grid-medium-prefix} {
// Old syntax
-webkit-box-flex: 1;
max-width: 100%;
// New syntax
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0;
@if $include-parent-layout {
.#{$grid-column-prefix}-#{$grid-medium-prefix},
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix} > * {
// Old syntax
-webkit-box-flex: 1;
max-width: 100%;
// New syntax
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0;
}
}
@else {
.#{$grid-column-prefix}-#{$grid-medium-prefix} {
// Old syntax
-webkit-box-flex: 1;
max-width: 100%;
// New syntax
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0;
}
}
// Grid column specific definitions for predefined columns.
@for $i from 1 through $grid-column-count {
.#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$i} {
// Old syntax
max-width: #{($i * 100% / $grid-column-count)};
// New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
@if $include-parent-layout {
.#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$i},
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix}-#{$i} > * {
// Old syntax
max-width: #{($i * 100% / $grid-column-count)};
// New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
}
}
@else {
.#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$i} {
// Old syntax
max-width: #{($i * 100% / $grid-column-count)};
// New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
}
}
}
// Grid column specific definitions for offset columns.
@@ -296,24 +486,51 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for g
padding: $grid-column-padding;
}
// Grid column specific definition for flexible column.
.#{$grid-column-prefix}-#{$grid-large-prefix} {
// Old syntax
-webkit-box-flex: 1;
max-width: 100%;
// New syntax
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0;
@if $include-parent-layout {
.#{$grid-column-prefix}-#{$grid-large-prefix},
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix} > * {
// Old syntax
-webkit-box-flex: 1;
max-width: 100%;
// New syntax
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0;
}
}
@else {
.#{$grid-column-prefix}-#{$grid-large-prefix} {
// Old syntax
-webkit-box-flex: 1;
max-width: 100%;
// New syntax
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
flex-basis: 0;
}
}
// Grid column specific definitions for predefined columns.
@for $i from 1 through $grid-column-count {
.#{$grid-column-prefix}-#{$grid-large-prefix}-#{$i} {
// Old syntax
max-width: #{($i * 100% / $grid-column-count)};
// New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
@if $include-parent-layout {
.#{$grid-column-prefix}-#{$grid-large-prefix}-#{$i},
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix}-#{$i} > * {
// Old syntax
max-width: #{($i * 100% / $grid-column-count)};
// New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
}
}
@else {
.#{$grid-column-prefix}-#{$grid-large-prefix}-#{$i} {
// Old syntax
max-width: #{($i * 100% / $grid-column-count)};
// New syntax
-webkit-flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
}
}
}
// Grid column specific definitions for offset columns.