mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-03-14 01:09:38 +01:00
Code Issues Releases Wiki Activity

Minor change in grid system (customization)

Browse Source
This commit is contained in:
Angelos Chalaris 2016-10-21 15:01:00 +03:00
parent 85abbcb382
commit 13d31c82ed
3 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/v2/DEVLOG.md
View File

@ -152,3 +152,4 @@
- Added definitions for extra small screen sizes, using loops etc. Optimized accordingly, tested on local demo.
- Added definitions for small screen sizes, optimized, test on local demo.
- Added definitions for medium and large screen sizes, optimized and tested locally.
- Updated grid definitions to add `$grid-column-padding` so that users can customize the padding for columns.

1
flavors/v2/mini-default.scss
View File

@ -146,6 +146,7 @@ $grid-row-name: 'row'; // Class name for the grid's rows
$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-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-small-prefix: 'sm'; // Small screen class prefix for grid

24
scss/v2/mini-core/_grid.scss
View File

@ -27,13 +27,8 @@ $grid-row-name: 'row' !default; // Class name for the grid system ro
$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-extra-small-prefix: 'xs' !default; // Extra small screen class prefix for grid
$grid-small-breakpoint: 768px !default; // Small screen breakpoint for grid
$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: 1200px !default; // Large screen breakpoint for grid
$grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
// Grid column generic definitions for extra small screens.
.#{$grid-column-prefix}-#{$grid-extra-small-prefix},
[class^='#{$grid-column-prefix}-#{$grid-extra-small-prefix}-'],
@ -44,7 +39,7 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for g
// New syntax
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
padding: 0 4px;
padding: $grid-column-padding;
}
// Grid column specific definition for flexible column.
.#{$grid-column-prefix}-#{$grid-extra-small-prefix} {
@ -78,7 +73,8 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for g
}
}
}
$grid-small-breakpoint: 768px !default; // Small screen breakpoint for grid
$grid-small-prefix: 'sm' !default; // Small screen class prefix for grid
// Small screen breakpoint.
@media only screen and (min-width: #{$grid-small-breakpoint}){
// Grid column generic definitions for small screens.
@ -91,7 +87,7 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for g
// New syntax
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
padding: 0 4px;
padding: $grid-column-padding;
}
// Grid column specific definition for flexible column.
.#{$grid-column-prefix}-#{$grid-small-prefix} {
@ -126,7 +122,8 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for g
}
}
}
$grid-medium-breakpoint: 1024px !default; // Medium screen breakpoint for grid
$grid-medium-prefix: 'md' !default; // Medium screen class prefix for grid
// Medium screen breakpoint.
@media only screen and (min-width: #{$grid-medium-breakpoint}){
// Grid column generic definitions for medium screens.
@ -139,7 +136,7 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for g
// New syntax
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
padding: 0 4px;
padding: $grid-column-padding;
}
// Grid column specific definition for flexible column.
.#{$grid-column-prefix}-#{$grid-medium-prefix} {
@ -174,7 +171,8 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for g
}
}
}
$grid-large-breakpoint: 1200px !default; // Large screen breakpoint for grid
$grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
// Large screen breakpoint.
@media only screen and (min-width: #{$grid-large-breakpoint}){
// Grid column generic definitions for large screens.
@ -187,7 +185,7 @@ $grid-large-prefix: 'lg' !default; // Large screen class prefix for g
// New syntax
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
padding: 0 4px;
padding: $grid-column-padding;
}
// Grid column specific definition for flexible column.
.#{$grid-column-prefix}-#{$grid-large-prefix} {