beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Unprefixed grid

Browse source 
Grid module now does not use -webkit- prefix anywhere.
This commit is contained in:
Angelos Chalaris 2017-10-24 21:11:31 +03:00
parent 51f422c944
commit 4b8ef58171
2 changed files with 37 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
docs/v3/DEVLOG.md
View file

@ -66,3 +66,5 @@
- Copied `grid` module from the **Fermion** branch, removed 4-step system with `xs` screen size. - Copied `grid` module from the **Fermion** branch, removed 4-step system with `xs` screen size.
- Removed legacy code from `grid`, specifically the one targeting `box-flex` (old syntax). - This trimmed the module size from `940bytes` down to `848bytes`. - Removed legacy code from `grid`, specifically the one targeting `box-flex` (old syntax). - This trimmed the module size from `940bytes` down to `848bytes`.
- Removed legacy support for prefixed flexbox (`-webkit-`), trimmed off another `91bytes`.
- Improved indentation for `grid` module, now that prefixed code is gone.

105
src/mini/_grid.scss
View file

@ -32,10 +32,8 @@ $grid-large-prefix: 'lg' !default; // Large screen class pref
box-sizing: border-box; box-sizing: border-box;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-flex: 0 1 auto; flex: 0 1 auto;
flex: 0 1 auto; flex-flow: row wrap;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
} }
// Small screen grid definitions. // Small screen grid definitions.
@if $include-parent-layout { @if $include-parent-layout {
@ -45,18 +43,15 @@ $grid-large-prefix: 'lg' !default; // Large screen class pref
[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-column-offset-suffix}-'], [class^='#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-column-offset-suffix}-'],
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix}-'] > * { .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix}-'] > * {
box-sizing: border-box; box-sizing: border-box;
-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.
.#{$grid-column-prefix}-#{$grid-small-prefix}, .#{$grid-column-prefix}-#{$grid-small-prefix},
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix} > * { .#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix} > * {
// max-width: 100%; -- TODO: Are we certain we don't need this? // max-width: 100%; -- TODO: Are we certain we don't need this?
-webkit-flex-grow: 1; flex-grow: 1;
flex-grow: 1; flex-basis: 0;
-webkit-flex-basis: 0;
flex-basis: 0;
} }
} }
@else { @else {
@ -64,17 +59,14 @@ $grid-large-prefix: 'lg' !default; // Large screen class pref
.#{$grid-column-prefix}-#{$grid-small-prefix}, .#{$grid-column-prefix}-#{$grid-small-prefix},
[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-'], [class^='#{$grid-column-prefix}-#{$grid-small-prefix}-'],
[class^='#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-column-offset-suffix}-'] { [class^='#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-column-offset-suffix}-'] {
-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.
.#{$grid-column-prefix}-#{$grid-small-prefix} { .#{$grid-column-prefix}-#{$grid-small-prefix} {
// max-width: 100%; -- TODO: Are we certain we don't need this? // max-width: 100%; -- TODO: Are we certain we don't need this?
-webkit-flex-grow: 1; flex-grow: 1;
flex-grow: 1; flex-basis: 0;
-webkit-flex-basis: 0;
flex-basis: 0;
} }
} }
// Grid column specific definitions for predefined columns. // Grid column specific definitions for predefined columns.
@ -82,14 +74,12 @@ $grid-large-prefix: 'lg' !default; // Large screen class pref
@if $include-parent-layout { @if $include-parent-layout {
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$i}, .#{$grid-column-prefix}-#{$grid-small-prefix}-#{$i},
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix}-#{$i} > * { .#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-small-prefix}-#{$i} > * {
-webkit-flex-basis: #{($i * 100% / $grid-column-count)}; flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
} }
} }
@else { @else {
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$i} { .#{$grid-column-prefix}-#{$grid-small-prefix}-#{$i} {
-webkit-flex-basis: #{($i * 100% / $grid-column-count)}; flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
} }
} }
} }
@ -105,16 +95,13 @@ $grid-large-prefix: 'lg' !default; // Large screen class pref
} }
} }
.#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-normal-suffix} { .#{$grid-column-prefix}-#{$grid-small-prefix}-#{$grid-order-normal-suffix} {
-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; 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; order: 999;
order: 999;
} }
// Medium screen breakpoint. // Medium screen breakpoint.
@media screen and (min-width: #{$grid-medium-breakpoint}){ @media screen and (min-width: #{$grid-medium-breakpoint}){
@ -124,18 +111,15 @@ $grid-large-prefix: 'lg' !default; // Large screen class pref
[class^='#{$grid-column-prefix}-#{$grid-medium-prefix}-'], [class^='#{$grid-column-prefix}-#{$grid-medium-prefix}-'],
[class^='#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-column-offset-suffix}-'], .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix}-'] > * { [class^='#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-column-offset-suffix}-'], .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix}-'] > * {
box-sizing: border-box; box-sizing: border-box;
-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.
.#{$grid-column-prefix}-#{$grid-medium-prefix}, .#{$grid-column-prefix}-#{$grid-medium-prefix},
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix} > * { .#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix} > * {
// max-width: 100%; -- TODO: Are we certain we don't need this? // max-width: 100%; -- TODO: Are we certain we don't need this?
-webkit-flex-grow: 1; flex-grow: 1;
flex-grow: 1; flex-basis: 0;
-webkit-flex-basis: 0;
flex-basis: 0;
} }
} }
@else { @else {
@ -144,17 +128,14 @@ $grid-large-prefix: 'lg' !default; // Large screen class pref
[class^='#{$grid-column-prefix}-#{$grid-medium-prefix}-'], [class^='#{$grid-column-prefix}-#{$grid-medium-prefix}-'],
[class^='#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-column-offset-suffix}-'] { [class^='#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-column-offset-suffix}-'] {
box-sizing: border-box; box-sizing: border-box;
-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.
.#{$grid-column-prefix}-#{$grid-medium-prefix} { .#{$grid-column-prefix}-#{$grid-medium-prefix} {
// max-width: 100%; -- TODO: Are we certain we don't need this? // max-width: 100%; -- TODO: Are we certain we don't need this?
-webkit-flex-grow: 1; flex-grow: 1;
flex-grow: 1; flex-basis: 0;
-webkit-flex-basis: 0;
flex-basis: 0;
} }
} }
// Grid column specific definitions for predefined columns. // Grid column specific definitions for predefined columns.
@ -162,14 +143,12 @@ $grid-large-prefix: 'lg' !default; // Large screen class pref
@if $include-parent-layout { @if $include-parent-layout {
.#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$i}, .#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$i},
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix}-#{$i} > * { .#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-medium-prefix}-#{$i} > * {
-webkit-flex-basis: #{($i * 100% / $grid-column-count)}; flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
} }
} }
@else { @else {
.#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$i} { .#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$i} {
-webkit-flex-basis: #{($i * 100% / $grid-column-count)}; flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
} }
} }
} }
@ -185,16 +164,13 @@ $grid-large-prefix: 'lg' !default; // Large screen class pref
} }
} }
.#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-order-normal-suffix} { .#{$grid-column-prefix}-#{$grid-medium-prefix}-#{$grid-order-normal-suffix} {
-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; 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; order: 999;
order: 999;
} }
} }
// Large screen breakpoint. // Large screen breakpoint.
@ -206,18 +182,15 @@ $grid-large-prefix: 'lg' !default; // Large screen class pref
[class^='#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-column-offset-suffix}-'], [class^='#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-column-offset-suffix}-'],
.#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix}-'] > * { .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix}-'] > * {
box-sizing: border-box; box-sizing: border-box;
-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.
.#{$grid-column-prefix}-#{$grid-large-prefix}, .#{$grid-column-prefix}-#{$grid-large-prefix},
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix} > * { .#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix} > * {
// max-width: 100%; -- TODO: Are we certain we don't need this? // max-width: 100%; -- TODO: Are we certain we don't need this?
-webkit-flex-grow: 1; flex-grow: 1;
flex-grow: 1; flex-basis: 0;
-webkit-flex-basis: 0;
flex-basis: 0;
} }
} }
@else { @else {
@ -226,17 +199,14 @@ $grid-large-prefix: 'lg' !default; // Large screen class pref
[class^='#{$grid-column-prefix}-#{$grid-large-prefix}-'], [class^='#{$grid-column-prefix}-#{$grid-large-prefix}-'],
[class^='#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-column-offset-suffix}-'] { [class^='#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-column-offset-suffix}-'] {
box-sizing: border-box; box-sizing: border-box;
-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.
.#{$grid-column-prefix}-#{$grid-large-prefix} { .#{$grid-column-prefix}-#{$grid-large-prefix} {
// max-width: 100%; -- TODO: Are we certain we don't need this? // max-width: 100%; -- TODO: Are we certain we don't need this?
-webkit-flex-grow: 1; flex-grow: 1;
flex-grow: 1; flex-basis: 0;
-webkit-flex-basis: 0;
flex-basis: 0;
} }
} }
// Grid column specific definitions for predefined columns. // Grid column specific definitions for predefined columns.
@ -244,14 +214,12 @@ $grid-large-prefix: 'lg' !default; // Large screen class pref
@if $include-parent-layout { @if $include-parent-layout {
.#{$grid-column-prefix}-#{$grid-large-prefix}-#{$i}, .#{$grid-column-prefix}-#{$grid-large-prefix}-#{$i},
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix}-#{$i} > * { .#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$grid-large-prefix}-#{$i} > * {
-webkit-flex-basis: #{($i * 100% / $grid-column-count)}; flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
} }
} }
@else { @else {
.#{$grid-column-prefix}-#{$grid-large-prefix}-#{$i} { .#{$grid-column-prefix}-#{$grid-large-prefix}-#{$i} {
-webkit-flex-basis: #{($i * 100% / $grid-column-count)}; flex-basis: #{($i * 100% / $grid-column-count)};
flex-basis: #{($i * 100% / $grid-column-count)};
} }
} }
} }
@ -267,15 +235,12 @@ $grid-large-prefix: 'lg' !default; // Large screen class pref
} }
} }
.#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-order-normal-suffix} { .#{$grid-column-prefix}-#{$grid-large-prefix}-#{$grid-order-normal-suffix} {
-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; 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; order: 999;
order: 999;
} }
} }