file reordering

This commit is contained in:
Raphael Goetter 2017-12-06 09:40:30 +01:00
parent e2fde95ba5
commit 5da87c3e99
6 changed files with 274 additions and 274 deletions

View File

@ -16,6 +16,7 @@
- Utilities (width and spacers helpers)
- Responsive helpers
- WordPress reset (disabled by default)
- Grillade (Grid System)
3- Components :
- Media object
- Autogrid object
@ -28,7 +29,6 @@
- Tags
- Badges
- Alerts
- Grillade (Grid System)
*/
*,
*::before,
@ -1664,6 +1664,228 @@ ul.is-unstyled, ul.unstyled {
}
}
/* --------------------------------------- */
/* ==Grillade : ultra light Grid System */
/* --------------------------------------- */
@media (min-width: 480px) {
[class*=" grid-"],
[class^="grid-"] {
display: grid;
grid-auto-flow: dense;
}
[class*=" grid-"].has-gutter,
[class^="grid-"].has-gutter {
grid-gap: 1rem;
}
[class*=" grid-"].has-gutter-l,
[class^="grid-"].has-gutter-l {
grid-gap: 2rem;
}
[class*=" grid-"].has-gutter-xl,
[class^="grid-"].has-gutter-xl {
grid-gap: 4rem;
}
}
[class*="grid-1"] {
grid-template-columns: repeat(1, 1fr);
}
[class*="grid-2"] {
grid-template-columns: repeat(2, 1fr);
}
[class*="grid-3"] {
grid-template-columns: repeat(3, 1fr);
}
[class*="grid-4"] {
grid-template-columns: repeat(4, 1fr);
}
[class*="grid-5"] {
grid-template-columns: repeat(5, 1fr);
}
[class*="grid-6"] {
grid-template-columns: repeat(6, 1fr);
}
[class*="grid-7"] {
grid-template-columns: repeat(7, 1fr);
}
[class*="grid-8"] {
grid-template-columns: repeat(8, 1fr);
}
[class*="grid-9"] {
grid-template-columns: repeat(9, 1fr);
}
[class*="grid-10"] {
grid-template-columns: repeat(10, 1fr);
}
[class*="grid-11"] {
grid-template-columns: repeat(11, 1fr);
}
[class*="grid-12"] {
grid-template-columns: repeat(12, 1fr);
}
[class*="col-1"] {
grid-column: auto/span 1;
}
[class*="row-1"] {
grid-row: auto/span 1;
}
[class*="col-2"] {
grid-column: auto/span 2;
}
[class*="row-2"] {
grid-row: auto/span 2;
}
[class*="col-3"] {
grid-column: auto/span 3;
}
[class*="row-3"] {
grid-row: auto/span 3;
}
[class*="col-4"] {
grid-column: auto/span 4;
}
[class*="row-4"] {
grid-row: auto/span 4;
}
[class*="col-5"] {
grid-column: auto/span 5;
}
[class*="row-5"] {
grid-row: auto/span 5;
}
[class*="col-6"] {
grid-column: auto/span 6;
}
[class*="row-6"] {
grid-row: auto/span 6;
}
[class*="col-7"] {
grid-column: auto/span 7;
}
[class*="row-7"] {
grid-row: auto/span 7;
}
[class*="col-8"] {
grid-column: auto/span 8;
}
[class*="row-8"] {
grid-row: auto/span 8;
}
[class*="col-9"] {
grid-column: auto/span 9;
}
[class*="row-9"] {
grid-row: auto/span 9;
}
[class*="col-10"] {
grid-column: auto/span 10;
}
[class*="row-10"] {
grid-row: auto/span 10;
}
[class*="col-11"] {
grid-column: auto/span 11;
}
[class*="row-11"] {
grid-row: auto/span 11;
}
[class*="col-12"] {
grid-column: auto/span 12;
}
[class*="row-12"] {
grid-row: auto/span 12;
}
/* intermediate breakpoints */
@media (min-width: 480px) and (max-width: 767px) {
[class*="grid-"][class*="-small-1"] {
grid-template-columns: repeat(1, 1fr);
}
[class*="col-"][class*="-small-1"] {
grid-column: auto/span 1;
}
[class*="grid-"][class*="-small-2"] {
grid-template-columns: repeat(2, 1fr);
}
[class*="col-"][class*="-small-2"] {
grid-column: auto/span 2;
}
[class*="grid-"][class*="-small-3"] {
grid-template-columns: repeat(3, 1fr);
}
[class*="col-"][class*="-small-3"] {
grid-column: auto/span 3;
}
[class*="grid-"][class*="-small-4"] {
grid-template-columns: repeat(4, 1fr);
}
[class*="col-"][class*="-small-4"] {
grid-column: auto/span 4;
}
[class*="-small-all"] {
grid-column: 1 / -1;
}
}
.item-first {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
.item-last {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.grid-offset {
visibility: hidden;
}
.col-all {
grid-column: 1 / -1;
}
.row-all {
grid-row: 1 / -1;
}
/* ----------------------------- */
/* ==Media object */
/* ----------------------------- */
@ -2632,225 +2854,3 @@ button:focus {
.alert:empty, .alert--primary:empty, .alert--success:empty, .alert--info:empty, .alert--warning:empty, .alert--danger:empty, .alert--inverse:empty, .alert--ghost:empty {
display: none;
}
/* --------------------------------------- */
/* ==Grillade : ultra light Grid System */
/* --------------------------------------- */
@media (min-width: 480px) {
[class*=" grid-"],
[class^="grid-"] {
display: grid;
grid-auto-flow: dense;
}
[class*=" grid-"].has-gutter,
[class^="grid-"].has-gutter {
grid-gap: 1rem;
}
[class*=" grid-"].has-gutter-l,
[class^="grid-"].has-gutter-l {
grid-gap: 2rem;
}
[class*=" grid-"].has-gutter-xl,
[class^="grid-"].has-gutter-xl {
grid-gap: 4rem;
}
}
[class*="grid-1"] {
grid-template-columns: repeat(1, 1fr);
}
[class*="grid-2"] {
grid-template-columns: repeat(2, 1fr);
}
[class*="grid-3"] {
grid-template-columns: repeat(3, 1fr);
}
[class*="grid-4"] {
grid-template-columns: repeat(4, 1fr);
}
[class*="grid-5"] {
grid-template-columns: repeat(5, 1fr);
}
[class*="grid-6"] {
grid-template-columns: repeat(6, 1fr);
}
[class*="grid-7"] {
grid-template-columns: repeat(7, 1fr);
}
[class*="grid-8"] {
grid-template-columns: repeat(8, 1fr);
}
[class*="grid-9"] {
grid-template-columns: repeat(9, 1fr);
}
[class*="grid-10"] {
grid-template-columns: repeat(10, 1fr);
}
[class*="grid-11"] {
grid-template-columns: repeat(11, 1fr);
}
[class*="grid-12"] {
grid-template-columns: repeat(12, 1fr);
}
[class*="col-1"] {
grid-column: auto/span 1;
}
[class*="row-1"] {
grid-row: auto/span 1;
}
[class*="col-2"] {
grid-column: auto/span 2;
}
[class*="row-2"] {
grid-row: auto/span 2;
}
[class*="col-3"] {
grid-column: auto/span 3;
}
[class*="row-3"] {
grid-row: auto/span 3;
}
[class*="col-4"] {
grid-column: auto/span 4;
}
[class*="row-4"] {
grid-row: auto/span 4;
}
[class*="col-5"] {
grid-column: auto/span 5;
}
[class*="row-5"] {
grid-row: auto/span 5;
}
[class*="col-6"] {
grid-column: auto/span 6;
}
[class*="row-6"] {
grid-row: auto/span 6;
}
[class*="col-7"] {
grid-column: auto/span 7;
}
[class*="row-7"] {
grid-row: auto/span 7;
}
[class*="col-8"] {
grid-column: auto/span 8;
}
[class*="row-8"] {
grid-row: auto/span 8;
}
[class*="col-9"] {
grid-column: auto/span 9;
}
[class*="row-9"] {
grid-row: auto/span 9;
}
[class*="col-10"] {
grid-column: auto/span 10;
}
[class*="row-10"] {
grid-row: auto/span 10;
}
[class*="col-11"] {
grid-column: auto/span 11;
}
[class*="row-11"] {
grid-row: auto/span 11;
}
[class*="col-12"] {
grid-column: auto/span 12;
}
[class*="row-12"] {
grid-row: auto/span 12;
}
/* intermediate breakpoints */
@media (min-width: 480px) and (max-width: 767px) {
[class*="grid-"][class*="-small-1"] {
grid-template-columns: repeat(1, 1fr);
}
[class*="col-"][class*="-small-1"] {
grid-column: auto/span 1;
}
[class*="grid-"][class*="-small-2"] {
grid-template-columns: repeat(2, 1fr);
}
[class*="col-"][class*="-small-2"] {
grid-column: auto/span 2;
}
[class*="grid-"][class*="-small-3"] {
grid-template-columns: repeat(3, 1fr);
}
[class*="col-"][class*="-small-3"] {
grid-column: auto/span 3;
}
[class*="grid-"][class*="-small-4"] {
grid-template-columns: repeat(4, 1fr);
}
[class*="col-"][class*="-small-4"] {
grid-column: auto/span 4;
}
[class*="-small-all"] {
grid-column: 1 / -1;
}
}
.item-first {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
.item-last {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.grid-offset {
visibility: hidden;
}
.col-all {
grid-column: 1 / -1;
}
.row-all {
grid-row: 1 / -1;
}

File diff suppressed because one or more lines are too long

View File

@ -1,11 +1,11 @@
// Config file and project variables
// ----------------
// breakpoints zone
// Breakpoints zone
// ----------------
// warning: you should use your own values, regardless of the devices
// best practise is Mobile First: (min-width: $breakpoint)
// Warning: you should use your own values, regardless of the devices
// Best practise is Mobile First: (min-width: $breakpoint)
$tiny : 480px !default; // or 'em' if you prefer, of course
$small : 576px !default;
$medium : 768px !default;
@ -13,15 +13,15 @@ $large : 992px !default;
$extra-large : 1200px !default;
// ----------
// fonts zone
// Fonts zone
// ----------
// font families
$font-family-base : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default; // system font stack
// Font families
$font-family-base : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default; // system font stack
$font-family-headings : sans-serif !default; // font for h1, h2.. h6
$font-family-monospace : consolas, courier, monospace !default; // font for code and samples
// font sizes (1.6rem value is "16px" equivalent)
// Font sizes (1.6rem value is "16px" equivalent)
$font-size-base : 1.6rem !default;
$font-sizes: (
@ -55,17 +55,17 @@ $font-sizes: (
)
) !default;
// line heights
// Line heights
$line-height-s : 1.3 !default;
$line-height-base : 1.5 !default;
$line-height-l : 1.7 !default;
// default margin-bottom
// Default margin-bottom
$margin-bottom-base : 1rem !default;
$headings-margin-bottom : $margin-bottom-base /2 !default;
$paragraph-margin-bottom: $margin-bottom-base !default;
// font weights
// Font weights
$weight-light : 200 !default;
$weight-book : 300 !default;
$weight-regular : 400 !default;
@ -73,17 +73,17 @@ $weight-medium : 500 !default;
$weight-bold : 700 !default;
// ------------
// spacing zone
// Spacing zone
// ------------
// grid gutters (for .has-gutter-* classes)
// Grid gutters (for .has-gutter-* classes)
$grid-gutters: (
'': 1rem,
'-l': 2rem,
'-xl': 4rem
) !default;
// spacings
// Spacings
$spacer-tiny : .5rem !default;
$spacer-tiny-plus : .7rem !default;
$spacer-small : 1rem !default;
@ -107,10 +107,10 @@ $zindex-notification : 6000 !default;
$zindex-debug : 7000 !default;
// ----------
// color zone
// Color zone
// ----------
// color names
// Color names
$white : #fff !default;
$gray-100 : #f8f9fa !default;
$gray-200 : #e7e9ed !default;
@ -129,7 +129,7 @@ $green-500 : #5CB85C !default;
$orange-500 : #F0AD4E !default;
$red-500 : #D9534F !default;
// semantic colors
// Semantic colors
$color-brand : $green-500;
$color-primary : $blue-500;
$color-success : $green-500;
@ -151,19 +151,19 @@ $link-decoration-hover : underline;
$forms-color : $gray-800;
// ---------------
// components zone
// Components zone
// ---------------
// global border-radius
// Global border-radius
$border-radius: 0 !default;
// component: quotes
// Component: quotes
$quote-color : $gray-200;
// component: arrows
// Component: arrows
$arrow-color : $black;
// component: checkboxes, radios, switches
// Components: checkboxes, radios, switches
$checkbox-color : $gray-800;
$checkbox-size : 2rem;
$checkbox-border-radius : 4px;
@ -171,7 +171,7 @@ $switch-color : $gray-800;
$switch-size : 2rem;
$switch-border-radius : 3em;
// component: tables
// Component: tables
$table-border : $gray-500;
$table-caption-color : $gray-800;
$table-background : transparent;
@ -180,8 +180,8 @@ $table-head-background : transparent;
$table-footer-color : $color-base;
$table-footer-background : transparent;
// component: buttons, badges, alerts color variants list
// name - background-color - color - border
// Components: buttons, badges, alerts color variants list
// Convention is: name - background-color - color - border
$variants-list: (
(primary, $color-primary, $white, none),
(success, $color-success, $white, none),
@ -192,7 +192,7 @@ $variants-list: (
(ghost, $color-ghost, $white, 0 0 0 1px $white inset)
) !default;
// component: tabs
// Component: tabs
$tabs-border : $gray-200;
$tabs-active-border : $gray-800;
$tabs-color : $color-base;
@ -201,7 +201,7 @@ $tabs-background : transparent;
$tabs-active-background : transparent;
$tabs-border-radius : 0;
// component: nav burger button
// Component: nav burger button
$burger-color : $gray-800;
$burger-background : transparent;
$burger-hover-background : transparent;

View File

@ -17,6 +17,7 @@
- Utilities (width and spacers helpers)
- Responsive helpers
- WordPress reset (disabled by default)
- Grillade (Grid System)
3- Components :
- Media object
- Autogrid object
@ -29,7 +30,6 @@
- Tags
- Badges
- Alerts
- Grillade (Grid System)
*/
@import "_vendor/_reboot"; // Bootstrap reboot (basic reset)
@ -40,29 +40,29 @@
@import "_config/_mixins.scss";
// Libraries
@import "_library/_base.scss"; // basic styles
@import "_library/_print.scss"; // print quick reset
@import "_library/_misc.scss"; // skip links, hyphens
@import "_library/_layout.scss"; // alignment, modules, positionning
@import "_library/_utilities.scss"; // width and spacers helpers
@import "_library/_responsive.scss"; // Responsive Web Design helpers
// Core Libraries
@import "_library/_base.scss"; // basic styles
@import "_library/_print.scss"; // print quick reset
@import "_library/_misc.scss"; // skip links, hyphens
@import "_library/_layout.scss"; // alignment, modules, positionning
@import "_library/_utilities.scss"; // width and spacers helpers
@import "_library/_responsive.scss"; // Responsive Web Design helpers
// @import "_library/_wordpress.scss"; // WordPress reset and basic styles
// Components
@import "components/_media.scss"; // media object
@import "components/_autogrid.scss"; // media autogrid
@import "components/_skip-links.scss"; // skip links
@import "components/_tables.scss"; // data tables consistency
@import "components/_forms.scss"; // forms consistency and styles
@import "components/_buttons.scss"; // buttons styles
@import "components/_checkbox.scss"; // checkbox, radio, switch styles
@import "components/_tabs.scss"; // tabs styles
@import "components/_arrows.scss"; // arrows styles
@import "components/tags.scss"; // tags styles
@import "components/_badges.scss"; // badges styles
@import "components/_alerts.scss"; // alerts styles
// New Grid System by default (Grid Layout). If you prefer old "Flexbox" Grid System, replace file with "components/grillade-flex.scss"
// New Grid System by default (Grid Layout). If you prefer old "Flexbox" Grid System, replace file with "_library/grillade-flex.scss"
// Note that none of these file is prefixed by an underscore, in order to compile them.
@import "components/grillade-grid.scss"; // grid system with Grid Layout
@import "_library/grillade-grid.scss"; // grid system with Grid Layout
// Components
@import "components/_media.scss"; // media object
@import "components/_autogrid.scss"; // media autogrid
@import "components/_skip-links.scss"; // skip links
@import "components/_tables.scss"; // data tables consistency
@import "components/_forms.scss"; // forms consistency and styles
@import "components/_buttons.scss"; // buttons styles
@import "components/_checkbox.scss"; // checkbox, radio, switch styles
@import "components/_tabs.scss"; // tabs styles
@import "components/_arrows.scss"; // arrows styles
@import "components/tags.scss"; // tags styles
@import "components/_badges.scss"; // badges styles
@import "components/_alerts.scss"; // alerts styles