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.
- 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.

35
src/mini/_grid.scss
View file

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