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

Housekeeping for grid module

Browse Source 
Part 1/2: Variables moved and flavor files updated. Screen media queries are still not done.
This commit is contained in:
Angelos Chalaris
2017-03-30 13:33:23 +03:00
parent 17de1b1d2f
commit 7b22333c59
6 changed files with 164 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
docs/v2/DEVLOG.md
View File

@@ -889,3 +889,8 @@
- Started code cleanup and updating.
- Updated `core` by moving all of the variable definitions and defaults at the top of the module's file.
- Updated both flavor files to deal with the indentation and column problems (only for the `core` module so far). Readability is a lot better, but consistency is a little bit worse. For all intents and purposes, this is the way to go for this release, as the previous styling was impossible to read for the most part in many setups.
## 20170330
- Updated `grid` by moving variable definitions and defaults to the top of the module.
- Updated flavor files, dealing with indentation and readability.

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

@@ -134,7 +134,7 @@ $apply-link-hover-fade: true; // Should the :hover and :focus state o
// 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
$include-parent-layout: true; // 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)

4
src/flavors/mini-sucroa.scss
View File

@@ -136,7 +136,7 @@ $apply-link-hover-fade: true; // Should the :hover and :focus state o
// 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
$include-parent-layout: true; // 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)
@@ -149,8 +149,6 @@ $grid-order-first-suffix: 'first'; // Class name suffix for grid colum
$grid-order-last-suffix: 'last'; // Class name suffix for grid columns with lowest priorty
$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: 480px; // Small screen breakpoint for grid
$grid-small-prefix: 'sm'; // Small screen class prefix for grid
$grid-medium-breakpoint: 768px; // Medium screen breakpoint for grid
$grid-medium-prefix: 'md'; // Medium screen class prefix for grid

40
src/mini/_grid.scss
View File

@@ -2,17 +2,32 @@
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
$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)
$use-four-step-grid: false !default; // Flag for the grid system choice (`true`/`false`).
$include-parent-layout: false !default; // Flag for rows defining column layouts (`true`/`false`).
$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).
$grid-row-name: 'row' !default; // Class name for the grid system rows.
$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).
$grid-column-padding: 0 4px !default; // Padding for the columns of the grid.
$grid-order-normal-suffix: 'normal' !default; // Class name suffix for grid columns with normal priority.
$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 (four-step-grid-only).
$grid-small-breakpoint: 768px !default; // Small screen breakpoint for grid (four-step-grid-only).
$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: 1280px !default; // Large screen breakpoint for grid.
$grid-large-prefix: 'lg' !default; // Large screen class prefix for grid.
// Fluid grid system container definition.
.#{$grid-container-name} {
margin: 0 auto;
padding: 0 $grid-container-side-padding;
}
// Grid row definition.
$grid-row-name: 'row' !default; // Class name for the grid system rows
.#{$grid-row-name} {
box-sizing: border-box;
// Old syntax
@@ -28,15 +43,6 @@ $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)
$grid-column-padding: 0 4px !default; // Padding for the columns of the grid
$grid-order-normal-suffix: 'normal' !default; // Class name suffix for grid columns with normal priority
$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 {
@@ -203,8 +209,6 @@ $grid-extra-small-prefix: 'xs' !default; // Extra small screen class pr
order: 999;
}
}
$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.
@@ -381,8 +385,6 @@ $grid-small-prefix: 'sm' !default; // Small screen class prefix for g
}
}
// 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.
@media (min-width: #{$grid-medium-breakpoint}){
// Grid column generic definitions for medium screens.
@@ -469,8 +471,6 @@ $grid-medium-prefix: 'md' !default; // Medium screen class prefix for
order: 999;
}
}
$grid-large-breakpoint: 1280px !default; // Large screen breakpoint for grid
$grid-large-prefix: 'lg' !default; // Large screen class prefix for grid
// Large screen breakpoint.
@media (min-width: #{$grid-large-breakpoint}){
// Grid column generic definitions for large screens.