Grid update
This commit is contained in:
Angelos Chalaris
parent
70991255d6
commit
08062eff88
|
|
@ -178,3 +178,8 @@
|
|||
- Proof-of-concept for `button` module defaults and core, file input is not styled yet (will be done via label hack).
|
||||
- *TODO* Softcode the `button` module's defaults, add extra styles, classes etc.
|
||||
- Deployed live demo with hardcoded buttons to test.
|
||||
|
||||
## 20161024
|
||||
|
||||
- Rebuilt grid system to work with 3 screen sizes instead of 4. Legacy system is now used only if a flag (`$use-four-step-grid`) is enabled.
|
||||
- Three-step grid breakpoints tweaked to `800px` and `1080px` accordingly.
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
<body>
|
||||
<div class="container" style="height: 320px; background: -webkit-linear-gradient(#455a64,#263238); background: linear-gradient(#455a64,#263238); box-shadow: 0 1px 3px rgba(0,0,0,0.35);">
|
||||
<div class="row">
|
||||
<div class="col-xs">
|
||||
<div class="col-sm">
|
||||
<div class="box-centered">
|
||||
<img src="mini-logo.svg" id="top-logo">
|
||||
<h1 id="top-header"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></h1>
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md">
|
||||
<div class="col-sm-12 col-md">
|
||||
<div class="box-centered">
|
||||
<h2>Minimal</h2>
|
||||
<i class="fa fa-compress fa-4x" aria-hidden="true"></i>
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
<p><strong>mini.css</strong> is one of the lightest front-end frameworks on the web: about 5KB gzipped. This helps your websites load faster, while still looking great!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md">
|
||||
<div class="col-sm-12 col-md">
|
||||
<div class="box-centered">
|
||||
<h2>Reponsive</h2>
|
||||
<i class="fa fa-mobile fa-4x" aria-hidden="true"></i>
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
<p><strong>mini.css</strong> is built in such a way that it will look great on most devices and especially phones and tablets. This allows you to easily tailor your websites to different users!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md">
|
||||
<div class="col-sm-12 col-md">
|
||||
<div class="box-centered">
|
||||
<h2>Style-agnostic</h2>
|
||||
<i class="fa fa-paint-brush fa-4x" aria-hidden="true"></i>
|
||||
|
|
@ -67,7 +67,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs">
|
||||
<div class="col-sm">
|
||||
<div>
|
||||
<br><hr>
|
||||
<p>Below you can see a showcase of the features and styles included in the <strong>default</strong> flavor of <strong>mini.css</strong>.</p>
|
||||
|
|
@ -75,36 +75,36 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs">
|
||||
<div class="col-sm">
|
||||
<div>
|
||||
<h2>Typography <small>Styles for common textual elements</small></h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-4">
|
||||
<div class="col-sm-12 col-md-4">
|
||||
<div><h1>Heading 1 <small>Subheading</small></h1></div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-4">
|
||||
<div class="col-sm-12 col-md-4">
|
||||
<div><h2>Heading 2 <small>Subheading</small></h2></div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-4">
|
||||
<div class="col-sm-12 col-md-4">
|
||||
<div><h3>Heading 3 <small>Subheading</small></h3></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-4">
|
||||
<div class="col-sm-12 col-md-4">
|
||||
<div><h4>Heading 4 <small>Subheading</small></h4></div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-4">
|
||||
<div class="col-sm-12 col-md-4">
|
||||
<div><h5>Heading 5 <small>Subheading</small></h5></div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-4">
|
||||
<div class="col-sm-12 col-md-4">
|
||||
<div><h6>Heading 6 <small>Subheading</small></h6></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs">
|
||||
<div class="col-sm">
|
||||
<div>
|
||||
<br>
|
||||
<p>This is a paragraph with some sample text. Did you know <strong>mini.css</strong> v2.0 is codenamed <strong>Fermion</strong>? No? Well, now you do! Maybe you want to know what our inline elements look like. For example a <a href="https://github.com/Chalarangelo/mini.css">link to the Github repository of mini.css</a> looks like that! Neat, right? Maybe you want to see some <code>inline code</code> or some sample <kbd>input</kbd>. Oh, also <small>small text</small> is cool, along with its siblings: the subscript<sub>hi!</sub> and the superscript<sup>hello!</sup>. We use <mark>highlights</mark> quite a lot as well. Apart from the primary color, you can also try the <mark class="secondary">secondary</mark> and <mark class="tertiary">tertiary</mark> colors. If you wanna be fancy, maybe use a <mark class="tag">tag</mark> or a <mark class="bubble">bubble</mark>. All of these work well inside headings and the like. To finish our typography tour, check out the preformatted code block below.</p><br>
|
||||
|
|
@ -119,7 +119,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs">
|
||||
<div class="col-sm">
|
||||
<div>
|
||||
<hr>
|
||||
<h2>Grid system <small>Easy layout using flexbox</small></h2>
|
||||
|
|
@ -127,64 +127,64 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs">
|
||||
<div class="col-sm">
|
||||
<div>
|
||||
<p><strong>mini.css</strong> uses the Flexible Layout Module (commonly known as <code>flexbox</code>) to create a grid system for easy page layout. The grid system is not the most feature-rich one, but it contains all the essential components. The <code>container</code> of the grid is fluid by default, meaning it will adjust to fill its parent container. Rows are easily created using the <code>row</code> class and columns can be created using the usual <code>col-SZ-XX</code> syntax where <code>SZ</code> and <code>XX</code> are replaced by a screen size and a number of vertical columns respectively. Columns can also scale themselves automatically if you omit the number of vertical columns in the class name. Similarly, you can use offsets with the <code>col-SZ-offset-XX</code> syntax. The <strong>default</strong> grid is separated into 12 vertical columns. You can see some examples below.</p><br>
|
||||
</p></div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xs">
|
||||
<div class="col-sm">
|
||||
<div class="box-colored"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div class="col-sm-6">
|
||||
<div class="box-colored"></div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div class="col-sm-6">
|
||||
<div class="box-colored"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-7">
|
||||
<div class="col-sm-7">
|
||||
<div class="box-colored"></div>
|
||||
</div>
|
||||
<div class="col-xs-5">
|
||||
<div class="col-sm-5">
|
||||
<div class="box-colored"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-2">
|
||||
<div class="col-sm-2">
|
||||
<div class="box-colored"></div>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<div class="col-sm-4">
|
||||
<div class="box-colored"></div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div class="col-sm-6">
|
||||
<div class="box-colored"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-6 col-xs-offset-3">
|
||||
<div class="col-sm-6 col-sm-offset-3">
|
||||
<div class="box-colored"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-4 col-xs-offset-2">
|
||||
<div class="col-sm-4 col-sm-offset-2">
|
||||
<div class="box-colored"></div>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<div class="col-sm-4">
|
||||
<div class="box-colored"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-3 col-xs-offset-1">
|
||||
<div class="col-sm-3 col-sm-offset-1">
|
||||
<div class="box-colored"></div>
|
||||
</div>
|
||||
<div class="col-xs-2 col-xs-offset-3">
|
||||
<div class="col-sm-2 col-sm-offset-3">
|
||||
<div class="box-colored"></div>
|
||||
</div>
|
||||
<div class="col-xs">
|
||||
<div class="col-sm">
|
||||
<div class="box-colored"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -192,7 +192,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs">
|
||||
<div class="col-sm">
|
||||
<div>
|
||||
<hr>
|
||||
<h2>Common Elements <small>Styles for common HTML elements</small></h2>
|
||||
|
|
@ -200,7 +200,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs">
|
||||
<div class="col-sm">
|
||||
<div>
|
||||
<p><strong>mini.css</strong> adds modern styles for many of the HTML elements.</p><br>
|
||||
<h3>Progress bars</h3>
|
||||
|
|
|
|||
|
|
@ -137,16 +137,16 @@ a {
|
|||
-webkit-flex-flow: row wrap;
|
||||
flex-flow: row wrap; }
|
||||
|
||||
.col-xs,
|
||||
[class^='col-xs-'],
|
||||
[class^='col-xs-offset-'] {
|
||||
.col-sm,
|
||||
[class^='col-sm-'],
|
||||
[class^='col-sm-offset-'] {
|
||||
box-sizing: border-box;
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
padding: 0 4px; }
|
||||
|
||||
.col-xs {
|
||||
.col-sm {
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
-webkit-flex-grow: 1;
|
||||
|
|
@ -154,216 +154,103 @@ a {
|
|||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0; }
|
||||
|
||||
.col-xs-1 {
|
||||
.col-sm-1 {
|
||||
max-width: 8.33333%;
|
||||
-webkit-flex-basis: 8.33333%;
|
||||
flex-basis: 8.33333%; }
|
||||
|
||||
.col-xs-2 {
|
||||
.col-sm-2 {
|
||||
max-width: 16.66667%;
|
||||
-webkit-flex-basis: 16.66667%;
|
||||
flex-basis: 16.66667%; }
|
||||
|
||||
.col-xs-3 {
|
||||
.col-sm-3 {
|
||||
max-width: 25%;
|
||||
-webkit-flex-basis: 25%;
|
||||
flex-basis: 25%; }
|
||||
|
||||
.col-xs-4 {
|
||||
.col-sm-4 {
|
||||
max-width: 33.33333%;
|
||||
-webkit-flex-basis: 33.33333%;
|
||||
flex-basis: 33.33333%; }
|
||||
|
||||
.col-xs-5 {
|
||||
.col-sm-5 {
|
||||
max-width: 41.66667%;
|
||||
-webkit-flex-basis: 41.66667%;
|
||||
flex-basis: 41.66667%; }
|
||||
|
||||
.col-xs-6 {
|
||||
.col-sm-6 {
|
||||
max-width: 50%;
|
||||
-webkit-flex-basis: 50%;
|
||||
flex-basis: 50%; }
|
||||
|
||||
.col-xs-7 {
|
||||
.col-sm-7 {
|
||||
max-width: 58.33333%;
|
||||
-webkit-flex-basis: 58.33333%;
|
||||
flex-basis: 58.33333%; }
|
||||
|
||||
.col-xs-8 {
|
||||
.col-sm-8 {
|
||||
max-width: 66.66667%;
|
||||
-webkit-flex-basis: 66.66667%;
|
||||
flex-basis: 66.66667%; }
|
||||
|
||||
.col-xs-9 {
|
||||
.col-sm-9 {
|
||||
max-width: 75%;
|
||||
-webkit-flex-basis: 75%;
|
||||
flex-basis: 75%; }
|
||||
|
||||
.col-xs-10 {
|
||||
.col-sm-10 {
|
||||
max-width: 83.33333%;
|
||||
-webkit-flex-basis: 83.33333%;
|
||||
flex-basis: 83.33333%; }
|
||||
|
||||
.col-xs-11 {
|
||||
.col-sm-11 {
|
||||
max-width: 91.66667%;
|
||||
-webkit-flex-basis: 91.66667%;
|
||||
flex-basis: 91.66667%; }
|
||||
|
||||
.col-xs-12 {
|
||||
.col-sm-12 {
|
||||
max-width: 100%;
|
||||
-webkit-flex-basis: 100%;
|
||||
flex-basis: 100%; }
|
||||
|
||||
.col-xs-offset-0 {
|
||||
.col-sm-offset-0 {
|
||||
margin-left: 0; }
|
||||
|
||||
.col-xs-offset-1 {
|
||||
.col-sm-offset-1 {
|
||||
margin-left: 8.33333%; }
|
||||
|
||||
.col-xs-offset-2 {
|
||||
.col-sm-offset-2 {
|
||||
margin-left: 16.66667%; }
|
||||
|
||||
.col-xs-offset-3 {
|
||||
.col-sm-offset-3 {
|
||||
margin-left: 25%; }
|
||||
|
||||
.col-xs-offset-4 {
|
||||
.col-sm-offset-4 {
|
||||
margin-left: 33.33333%; }
|
||||
|
||||
.col-xs-offset-5 {
|
||||
.col-sm-offset-5 {
|
||||
margin-left: 41.66667%; }
|
||||
|
||||
.col-xs-offset-6 {
|
||||
.col-sm-offset-6 {
|
||||
margin-left: 50%; }
|
||||
|
||||
.col-xs-offset-7 {
|
||||
.col-sm-offset-7 {
|
||||
margin-left: 58.33333%; }
|
||||
|
||||
.col-xs-offset-8 {
|
||||
.col-sm-offset-8 {
|
||||
margin-left: 66.66667%; }
|
||||
|
||||
.col-xs-offset-9 {
|
||||
.col-sm-offset-9 {
|
||||
margin-left: 75%; }
|
||||
|
||||
.col-xs-offset-10 {
|
||||
.col-sm-offset-10 {
|
||||
margin-left: 83.33333%; }
|
||||
|
||||
.col-xs-offset-11 {
|
||||
.col-sm-offset-11 {
|
||||
margin-left: 91.66667%; }
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.col-sm,
|
||||
[class^='col-sm-'],
|
||||
[class^='col-sm-offset-'] {
|
||||
box-sizing: border-box;
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
padding: 0 4px; }
|
||||
|
||||
.col-sm {
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-flex-basis: 0;
|
||||
flex-basis: 0; }
|
||||
|
||||
.col-sm-1 {
|
||||
max-width: 8.33333%;
|
||||
-webkit-flex-basis: 8.33333%;
|
||||
flex-basis: 8.33333%; }
|
||||
|
||||
.col-sm-2 {
|
||||
max-width: 16.66667%;
|
||||
-webkit-flex-basis: 16.66667%;
|
||||
flex-basis: 16.66667%; }
|
||||
|
||||
.col-sm-3 {
|
||||
max-width: 25%;
|
||||
-webkit-flex-basis: 25%;
|
||||
flex-basis: 25%; }
|
||||
|
||||
.col-sm-4 {
|
||||
max-width: 33.33333%;
|
||||
-webkit-flex-basis: 33.33333%;
|
||||
flex-basis: 33.33333%; }
|
||||
|
||||
.col-sm-5 {
|
||||
max-width: 41.66667%;
|
||||
-webkit-flex-basis: 41.66667%;
|
||||
flex-basis: 41.66667%; }
|
||||
|
||||
.col-sm-6 {
|
||||
max-width: 50%;
|
||||
-webkit-flex-basis: 50%;
|
||||
flex-basis: 50%; }
|
||||
|
||||
.col-sm-7 {
|
||||
max-width: 58.33333%;
|
||||
-webkit-flex-basis: 58.33333%;
|
||||
flex-basis: 58.33333%; }
|
||||
|
||||
.col-sm-8 {
|
||||
max-width: 66.66667%;
|
||||
-webkit-flex-basis: 66.66667%;
|
||||
flex-basis: 66.66667%; }
|
||||
|
||||
.col-sm-9 {
|
||||
max-width: 75%;
|
||||
-webkit-flex-basis: 75%;
|
||||
flex-basis: 75%; }
|
||||
|
||||
.col-sm-10 {
|
||||
max-width: 83.33333%;
|
||||
-webkit-flex-basis: 83.33333%;
|
||||
flex-basis: 83.33333%; }
|
||||
|
||||
.col-sm-11 {
|
||||
max-width: 91.66667%;
|
||||
-webkit-flex-basis: 91.66667%;
|
||||
flex-basis: 91.66667%; }
|
||||
|
||||
.col-sm-12 {
|
||||
max-width: 100%;
|
||||
-webkit-flex-basis: 100%;
|
||||
flex-basis: 100%; }
|
||||
|
||||
.col-sm-offset-0 {
|
||||
margin-left: 0; }
|
||||
|
||||
.col-sm-offset-1 {
|
||||
margin-left: 8.33333%; }
|
||||
|
||||
.col-sm-offset-2 {
|
||||
margin-left: 16.66667%; }
|
||||
|
||||
.col-sm-offset-3 {
|
||||
margin-left: 25%; }
|
||||
|
||||
.col-sm-offset-4 {
|
||||
margin-left: 33.33333%; }
|
||||
|
||||
.col-sm-offset-5 {
|
||||
margin-left: 41.66667%; }
|
||||
|
||||
.col-sm-offset-6 {
|
||||
margin-left: 50%; }
|
||||
|
||||
.col-sm-offset-7 {
|
||||
margin-left: 58.33333%; }
|
||||
|
||||
.col-sm-offset-8 {
|
||||
margin-left: 66.66667%; }
|
||||
|
||||
.col-sm-offset-9 {
|
||||
margin-left: 75%; }
|
||||
|
||||
.col-sm-offset-10 {
|
||||
margin-left: 83.33333%; }
|
||||
|
||||
.col-sm-offset-11 {
|
||||
margin-left: 91.66667%; } }
|
||||
@media only screen and (min-width: 1024px) {
|
||||
@media only screen and (min-width: 800px) {
|
||||
.col-md,
|
||||
[class^='col-md-'],
|
||||
[class^='col-md-offset-'] {
|
||||
|
|
@ -476,7 +363,7 @@ a {
|
|||
|
||||
.col-md-offset-11 {
|
||||
margin-left: 91.66667%; } }
|
||||
@media only screen and (min-width: 1200px) {
|
||||
@media only screen and (min-width: 1080px) {
|
||||
.col-lg,
|
||||
[class^='col-lg-'],
|
||||
[class^='col-lg-offset-'] {
|
||||
|
|
|
|||
2
flavors/v2/mini-default.min.css
vendored
2
flavors/v2/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -105,6 +105,8 @@ $apply-link-hover-fade: true; // Should the :hover and :focus state
|
|||
// [9] - 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.
|
||||
// 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]
|
||||
$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
|
||||
|
|
@ -112,13 +114,16 @@ $grid-column-prefix: 'col'; // Class name prefix for the grid's colu
|
|||
$grid-column-offset-suffix: 'offset'; // Class name suffix for the grid's offsets
|
||||
$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-extra-small-prefix: 'xs'; // Extra small screen class prefix for grid
|
||||
$grid-small-breakpoint: 768px; // Small screen breakpoint 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-prefix: 'sm'; // Small screen class prefix for grid
|
||||
$grid-medium-breakpoint: 1024px; // Medium screen breakpoint for grid
|
||||
$grid-medium-breakpoint: 800px; // Medium screen breakpoint for grid
|
||||
$grid-medium-prefix: 'md'; // Medium screen class prefix for grid
|
||||
$grid-large-breakpoint: 1200px; // Large screen breakpoint for grid
|
||||
$grid-large-breakpoint: 1080px; // Large screen breakpoint for grid
|
||||
$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.
|
||||
// Variables for responsive tables
|
||||
$table-border-style: 1px solid #bdbdbd; // Border style for <table> and children
|
||||
$table-border-radius: 2px; // Border radius for <table> and children
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
// Definitions for the grid system.
|
||||
// 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
|
||||
$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.
|
||||
|
|
@ -29,6 +30,8 @@ $grid-column-offset-suffix: 'offset' !default; // Class name suffix for
|
|||
$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-extra-small-prefix: 'xs' !default; // Extra small screen class prefix for grid
|
||||
// Legacy grid system definitions.
|
||||
@if $use-four-step-grid {
|
||||
// Grid column generic definitions for extra small screens.
|
||||
.#{$grid-column-prefix}-#{$grid-extra-small-prefix},
|
||||
[class^='#{$grid-column-prefix}-#{$grid-extra-small-prefix}-'],
|
||||
|
|
@ -73,8 +76,11 @@ $grid-extra-small-prefix: 'xs' !default; // Extra small screen class pr
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
$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.
|
||||
@if $use-four-step-grid {
|
||||
// Small screen breakpoint.
|
||||
@media only screen and (min-width: #{$grid-small-breakpoint}){
|
||||
// Grid column generic definitions for small screens.
|
||||
|
|
@ -122,6 +128,55 @@ $grid-small-prefix: 'sm' !default; // Small screen class prefix for g
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Non-legacy grid system definitions.
|
||||
@else {
|
||||
// Grid column generic definitions for small screens.
|
||||
.#{$grid-column-prefix}-#{$grid-small-prefix},
|
||||
[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-'],
|
||||
[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-column-offset-suffix}-'] {
|
||||
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;
|
||||
}
|
||||
// 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;
|
||||
}
|
||||
// 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)};
|
||||
}
|
||||
}
|
||||
// Grid column specific definitions for offset columns.
|
||||
@for $i from 0 through ($grid-column-count - 1) {
|
||||
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-column-offset-suffix}-#{$i} {
|
||||
@if $i == 0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
@else {
|
||||
margin-left: #{($i * 100% / $grid-column-count)};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 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.
|
||||
|
|
|
|||
Loading…
Reference in a new issue