dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

file reordering

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

446
css/knacss-unminified.css
View file

@ -16,6 +16,7 @@
- Utilities (width and spacers helpers) - Utilities (width and spacers helpers)
- Responsive helpers - Responsive helpers
- WordPress reset (disabled by default) - WordPress reset (disabled by default)
- Grillade (Grid System)
3- Components : 3- Components :
- Media object - Media object
- Autogrid object - Autogrid object
@ -28,7 +29,6 @@
- Tags - Tags
- Badges - Badges
- Alerts - Alerts
- Grillade (Grid System)
*/ */
*, *,
*::before, *::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 */ /* ==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 { .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; 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;
}

2
css/knacss.css
View file

File diff suppressed because one or more lines are too long

52
sass/_config/_variables.scss
View file

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

0
sass/components/grillade-flex.scss → sass/_library/grillade-flex.scss
View file

0
sass/components/grillade-grid.scss → sass/_library/grillade-grid.scss
View file

48
sass/knacss.scss
View file

@ -17,6 +17,7 @@
- Utilities (width and spacers helpers) - Utilities (width and spacers helpers)
- Responsive helpers - Responsive helpers
- WordPress reset (disabled by default) - WordPress reset (disabled by default)
- Grillade (Grid System)
3- Components : 3- Components :
- Media object - Media object
- Autogrid object - Autogrid object
@ -29,7 +30,6 @@
- Tags - Tags
- Badges - Badges
- Alerts - Alerts
- Grillade (Grid System)
*/ */
@import "_vendor/_reboot"; // Bootstrap reboot (basic reset) @import "_vendor/_reboot"; // Bootstrap reboot (basic reset)
@ -40,29 +40,29 @@
@import "_config/_mixins.scss"; @import "_config/_mixins.scss";
// Libraries // Core Libraries
@import "_library/_base.scss"; // basic styles @import "_library/_base.scss"; // basic styles
@import "_library/_print.scss"; // print quick reset @import "_library/_print.scss"; // print quick reset
@import "_library/_misc.scss"; // skip links, hyphens @import "_library/_misc.scss"; // skip links, hyphens
@import "_library/_layout.scss"; // alignment, modules, positionning @import "_library/_layout.scss"; // alignment, modules, positionning
@import "_library/_utilities.scss"; // width and spacers helpers @import "_library/_utilities.scss"; // width and spacers helpers
@import "_library/_responsive.scss"; // Responsive Web Design helpers @import "_library/_responsive.scss"; // Responsive Web Design helpers
// @import "_library/_wordpress.scss"; // WordPress reset and basic styles // @import "_library/_wordpress.scss"; // WordPress reset and basic styles
// Components // New Grid System by default (Grid Layout). If you prefer old "Flexbox" Grid System, replace file with "_library/grillade-flex.scss"
@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"
// Note that none of these file is prefixed by an underscore, in order to compile them. // 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