From 7a8701c929ee0429ee680be3969ee4d58fdd7390 Mon Sep 17 00:00:00 2001 From: Arnaud CARIOU Date: Mon, 6 Mar 2017 17:35:08 +0100 Subject: [PATCH 1/6] create folder and files in rep styl --- styl/config/_breakpoints.styl | 9 + styl/config/_mixins.styl | 33 +++ styl/config/_variables.styl | 50 ++++ styl/grids/_grillade.styl | 293 ++++++++++++++++++++++ styl/knacss.styl | 64 +++++ styl/library/_base.styl | 169 +++++++++++++ styl/library/_forms.styl | 99 ++++++++ styl/library/_misc.styl | 46 ++++ styl/library/_print.styl | 83 +++++++ styl/library/_styling.styl | 97 ++++++++ styl/library/_tables.styl | 25 ++ styl/objects/_autogrid.styl | 19 ++ styl/objects/_media.styl | 18 ++ styl/utilities/_helpers.styl | 278 +++++++++++++++++++++ styl/utilities/_layout.styl | 98 ++++++++ styl/utilities/_responsive.styl | 230 ++++++++++++++++++ styl/vendor/_normalize.styl | 419 ++++++++++++++++++++++++++++++++ 17 files changed, 2030 insertions(+) create mode 100644 styl/config/_breakpoints.styl create mode 100644 styl/config/_mixins.styl create mode 100644 styl/config/_variables.styl create mode 100644 styl/grids/_grillade.styl create mode 100644 styl/knacss.styl create mode 100644 styl/library/_base.styl create mode 100644 styl/library/_forms.styl create mode 100644 styl/library/_misc.styl create mode 100644 styl/library/_print.styl create mode 100644 styl/library/_styling.styl create mode 100644 styl/library/_tables.styl create mode 100644 styl/objects/_autogrid.styl create mode 100644 styl/objects/_media.styl create mode 100644 styl/utilities/_helpers.styl create mode 100644 styl/utilities/_layout.styl create mode 100644 styl/utilities/_responsive.styl create mode 100644 styl/vendor/_normalize.styl diff --git a/styl/config/_breakpoints.styl b/styl/config/_breakpoints.styl new file mode 100644 index 0000000..e1e9221 --- /dev/null +++ b/styl/config/_breakpoints.styl @@ -0,0 +1,9 @@ +// Responsive breakpoints variables + +// Warning : you should use your own values, regardless of the devices +// Best practise : (max-width: $BP) and (min-width: ($BP + 1)) +tiny = 543px // or 'em' if you prefer, of course +small = 767px +medium = 991px +large = 1199px +extra-large = 1439px diff --git a/styl/config/_mixins.styl b/styl/config/_mixins.styl new file mode 100644 index 0000000..16dd059 --- /dev/null +++ b/styl/config/_mixins.styl @@ -0,0 +1,33 @@ +// Additionnal "utility" breakpoints aliases +// ex. @include respond-to("medium-up") {...} +breakpoint(bp) + if bp == 'tiny' + return '(max-width: {tiny})' + else if bp == 'small' + return '(max-width: {small})' + else if bp == 'medium' + return '(max-width: {medium})' + else if bp == 'large' + return '(max-width: {large})' + else if bp == 'extra-large' + return '(max-width: {extra-large})' + else if bp == 'tiny-up' + return '(min-width: {tiny + 1})' + else if bp == 'small-up' + return '(min-width: {small + 1})' + else if bp == 'medium-up' + return '(min-width: {medium + 1})' + else if bp == 'large-up' + return '(min-width: {large + 1})' + else if bp == 'extra-large-up' + return '(min-width: {extra-large + 1})' + else if bp == 'retina' + return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)' + + +/* +respond-to(value) + string = breakpoint(value) + @media screen and {string} + {block} +*/ diff --git a/styl/config/_variables.styl b/styl/config/_variables.styl new file mode 100644 index 0000000..7ddde94 --- /dev/null +++ b/styl/config/_variables.styl @@ -0,0 +1,50 @@ +// Config file and project variables + +// font sizes +base-font-size = 1.6rem // ex. 1.6rem would be "16px" equivalent +line-height = 1.5 // equiv line-height 1.5 +h1-size = 3.2rem // equiv "32px" +h2-size = 2.8rem // equiv "28px" +h3-size = 2.4rem // equiv "24px" +h4-size = 2.0rem // equiv "20px" +h5-size = 1.8rem // equiv "18px" +h6-size = 1.6rem // equiv "16px" + +// font stacks +font-stack-common = sans-serif // common font +font-stack-headings = sans-serif // headings font +font-stack-monospace = consolas, courier, monospace // monospace font + +// color scheme +color1 = #000 +color2 = #fff +color3 = #333 +color4 = #000 +color5 = #6FA939 + +// colors used in project +base-color = color1 +link-color = color3 +base-background = color2 +// If you don't want any effect on focused/hovered links, +// comment variable below or make it equal to either link-color or false or null +link-hover-color = color4 +brand-primary = color5 + + +// spacings (choose unit you prefer) +tiny-value = .5rem // tiny value for margins / paddings +tiny-plus-value = .7rem // tiny+ value for margins / paddings +small-value = 1rem // small value for margins / paddings +small-plus-value = 1.5rem // small+ value for margins / paddings +medium-value = 2rem // medium value for margins / paddings +medium-plus-value = 3rem // medium+ value for margins / paddings +large-value = 4rem // large value for margins / paddings +large-plus-value = 6rem // large value for margins / paddings +extra-large-value = 8rem // extra large value for margins / paddings +extra-large-plus-value = 12rem // extra large value for margins / paddings +ultra-large-value = 16rem // ultra large value for margins / paddings +ultra-large-plus-value = 20rem // ultra large value for margins / paddings + +//kna-namespace (default : null) +kna-namespace = null; diff --git a/styl/grids/_grillade.styl b/styl/grids/_grillade.styl new file mode 100644 index 0000000..5c7f34d --- /dev/null +++ b/styl/grids/_grillade.styl @@ -0,0 +1,293 @@ +/* ---------------------------------- */ +/* ==Grillade : Simple Grid System */ +/* ---------------------------------- */ +/* Doc : http://grillade.knacss.com */ +// gutter values for grid layouts. Unit can be: %, px, em, rem +grid-gutters = { '': 1rem, '-l': 2rem, '-xl': 4rem } +// IEfixing, see +// https://github.com/alsacreations/KNACSS/issues/133; +iefix = 0.01px + +tiny = 543px +small = 767px +medium = 991px +large = 1199px +extra-large = 1439px + +displayFlex() + display: -webkit-box + display: -ms-flexbox + display: flex + +@media (min-width: tiny + 1) + [class*=" grid-"] + [class^="grid-"] + displayFlex() + -webkit-box-orient: horizontal + -webkit-box-direction: normal + flex-direction: row + flex-wrap: wrap + & > * + box-sizing: border-box + min-width: 0 + min-height: 0 + +// Multi-line grid constructor +// example : .grid-perso { @include grid(12, 3rem); } +grid(grid-number = 1, own-gutter = 0) + & > * + width: calc(100% / grid-number - iefix) + + for key, size in grid-gutters + &.has-gutter{key} + margin-right: -(size / 2) + margin-left: -(size / 2) + & > * + width: calc(100% / grid-number - size - iefix) + margin-right size / 2 + margin-left size / 2 + + if own-gutter != 0 + margin-right: own-gutter / 2 + margin-left: own-gutter / 2 + +// Mono-line grid constructor (.grid) +@media (min-width: tiny + 1) + .grid + .grid--reverse + displayFlex() + & > * + flex: 1 1 0% + box-sizing: border-box + min-width: 0 + min-height: 0 + + for key, size in grid-gutters + &.has-gutter{key} > * + * + margin-left: size - iefix + +// Constructing grids : will be compiled in CSS +@media (min-width: tiny + 1) + for i in 2..12 + grid-selector = 'grid-%s' % i + [class*={grid-selector}] > * + grid(i, 0) + +.push { + margin-left: auto !important; +} + +.pull { + margin-right: auto !important; +} + +.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; +} + +/*[class*="grid-"][class*="--reverse"] { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; +}*/ + +/*@media (min-width: 544px) { + .full { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: calc(100% / 1 - 0.01px); + } + .has-gutter .full { + width: calc(100% / 1 - 1rem - 0.01px); + } + .has-gutter-l .full { + width: calc(100% / 1 - 2rem - 0.01px); + } + .has-gutter-xl .full { + width: calc(100% / 1 - 4rem - 0.01px); + } + .one-half { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: calc(100% / 2 - 0.01px); + } + .has-gutter .one-half { + width: calc(100% / 2 - 1rem - 0.01px); + } + .has-gutter-l .one-half { + width: calc(100% / 2 - 2rem - 0.01px); + } + .has-gutter-xl .one-half { + width: calc(100% / 2 - 4rem - 0.01px); + } + .one-third { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: calc(100% / 3 - 0.01px); + } + .has-gutter .one-third { + width: calc(100% / 3 - 1rem - 0.01px); + } + .has-gutter-l .one-third { + width: calc(100% / 3 - 2rem - 0.01px); + } + .has-gutter-xl .one-third { + width: calc(100% / 3 - 4rem - 0.01px); + } + .one-quarter { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: calc(100% / 4 - 0.01px); + } + .has-gutter .one-quarter { + width: calc(100% / 4 - 1rem - 0.01px); + } + .has-gutter-l .one-quarter { + width: calc(100% / 4 - 2rem - 0.01px); + } + .has-gutter-xl .one-quarter { + width: calc(100% / 4 - 4rem - 0.01px); + } + .one-fifth { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: calc(100% / 5 - 0.01px); + } + .has-gutter .one-fifth { + width: calc(100% / 5 - 1rem - 0.01px); + } + .has-gutter-l .one-fifth { + width: calc(100% / 5 - 2rem - 0.01px); + } + .has-gutter-xl .one-fifth { + width: calc(100% / 5 - 4rem - 0.01px); + } + .one-sixth { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: calc(100% / 6 - 0.01px); + } + .has-gutter .one-sixth { + width: calc(100% / 6 - 1rem - 0.01px); + } + .has-gutter-l .one-sixth { + width: calc(100% / 6 - 2rem - 0.01px); + } + .has-gutter-xl .one-sixth { + width: calc(100% / 6 - 4rem - 0.01px); + } + .two-thirds { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: calc(100% / 3 * 2 - 0.01px); + } + .has-gutter .two-thirds { + width: calc(100% / 3 * 2 - 1rem - 0.01px); + } + .has-gutter-l .two-thirds { + width: calc(100% / 3 * 2 - 2rem - 0.01px); + } + .has-gutter-xl .two-thirds { + width: calc(100% / 3 * 2 - 4rem - 0.01px); + } + .three-quarters { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: calc(100% / 4 * 3 - 0.01px); + } + .has-gutter .three-quarters { + width: calc(100% / 4 * 3 - 1rem - 0.01px); + } + .has-gutter-l .three-quarters { + width: calc(100% / 4 * 3 - 2rem - 0.01px); + } + .has-gutter-xl .three-quarters { + width: calc(100% / 4 * 3 - 4rem - 0.01px); + } + .five-sixths { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: calc(100% / 6 * 5 - 0.01px); + } + .has-gutter .five-sixths { + width: calc(100% / 6 * 5 - 1rem - 0.01px); + } + .has-gutter-l .five-sixths { + width: calc(100% / 6 * 5 - 2rem - 0.01px); + } + .has-gutter-xl .five-sixths { + width: calc(100% / 6 * 5 - 4rem - 0.01px); + } +}*/ + +/* Responsive Small Breakpoint */ +/* +@media (min-width: 544px) and (max-width: 991px) { + [class*="-small-1"] > * { + width: calc(100% / 1 - 0.01px); + } + [class*="-small-1"].has-gutter > * { + width: calc(100% / 1 - 1rem - 0.01px); + } + [class*="-small-1"].has-gutter-l > * { + width: calc(100% / 1 - 2rem - 0.01px); + } + [class*="-small-1"].has-gutter-xl > * { + width: calc(100% / 1 - 4rem - 0.01px); + } + [class*="-small-2"] > * { + width: calc(100% / 2 - 0.01px); + } + [class*="-small-2"].has-gutter > * { + width: calc(100% / 2 - 1rem - 0.01px); + } + [class*="-small-2"].has-gutter-l > * { + width: calc(100% / 2 - 2rem - 0.01px); + } + [class*="-small-2"].has-gutter-xl > * { + width: calc(100% / 2 - 4rem - 0.01px); + } + [class*="-small-3"] > * { + width: calc(100% / 3 - 0.01px); + } + [class*="-small-3"].has-gutter > * { + width: calc(100% / 3 - 1rem - 0.01px); + } + [class*="-small-3"].has-gutter-l > * { + width: calc(100% / 3 - 2rem - 0.01px); + } + [class*="-small-3"].has-gutter-xl > * { + width: calc(100% / 3 - 4rem - 0.01px); + } + [class*="-small-4"] > * { + width: calc(100% / 4 - 0.01px); + } + [class*="-small-4"].has-gutter > * { + width: calc(100% / 4 - 1rem - 0.01px); + } + [class*="-small-4"].has-gutter-l > * { + width: calc(100% / 4 - 2rem - 0.01px); + } + [class*="-small-4"].has-gutter-xl > * { + width: calc(100% / 4 - 4rem - 0.01px); + } +} +*/ diff --git a/styl/knacss.styl b/styl/knacss.styl new file mode 100644 index 0000000..0374b38 --- /dev/null +++ b/styl/knacss.styl @@ -0,0 +1,64 @@ +/*! +* www.KNACSS.com V6.0.5 (1er décembre 2016) @author: Alsacreations, Raphael Goetter +* Licence WTFPL http://www.wtfpl.net/ +*/ + +/* ----------------------------- */ +/* ==Table Of Content */ +/* ----------------------------- */ + +/* 1- Normalize (basic reset) */ +/* 2- Base (basic styles) */ +/* 3- Print (print quick reset) */ +/* 4- Stylings (minor stylings) */ +/* 5- Misc (skip links, hyphens) */ +/* 6- Tables (data tables consistency) */ +/* 7- Forms (forms consistency) */ +/* 8- Media object */ +/* 9- Autogrid object */ +/* 10- Global Layout (alignment, modules, positionning) */ +/* 11- Helpers (width and spacers helpers) */ +/* (12- WordPress reset (disabled by default)) */ +/* 13- Responsive (Responsive Web Design helpers) */ +/* 14- Grid Layout (grillade) */ + +/* ---------------------------------- */ +/* ==Normalize (basic reset) */ +/* ---------------------------------- */ + +@import 'vendor/_normalize.styl' // normalize (basic reset) + +// WARNING : you should comment the following @import (variables) +// and move variables file from knacss folder to your own project folder! +@import 'config/_variables.styl' +@import 'config/_breakpoints.styl' +@import 'config/_mixins.styl' + +// Libraries +@import 'library/_base.styl' // basic styles +@import 'library/_print.styl' // print quick reset +@import 'library/_styling.styl' // minor stylings +@import 'library/_misc.styl'; // skip links, hyphens +@import 'library/_tables.styl'; // data tables consistency +@import 'library/_forms.styl'; // forms consistency + +// Objects +@import 'objects/_media.styl'; // media object +@import 'objects/_autogrid.styl'; // media autogrid + +// Utilities +@import 'utilities/_layout.styl'; // alignment, modules, positionning +@import 'utilities/_helpers.styl'; // width and spacers helpers +@import 'utilities/_responsive.styl'; // Responsive Web Design helpers + +// Grids +@import 'grids/_grillade.styl'; // grids + + +/* ----------------------------- */ +/* ==Own stylesheet */ +/* ----------------------------- */ + +/* Here should go your own CSS styles */ +// You can also link them with a Sass @import +// @import "my-styles"; diff --git a/styl/library/_base.styl b/styl/library/_base.styl new file mode 100644 index 0000000..646a1a0 --- /dev/null +++ b/styl/library/_base.styl @@ -0,0 +1,169 @@ +/* ----------------------------- */ +/* ==Base (basic styles) */ +/* ----------------------------- */ + +/* switching to border-box model for all elements */ +html + box-sizing border-box + +* + box-sizing inherit + +html + /* set base font-size to equiv "10px", which is adapted to rem unit */ + font-size 62.5% + /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */ + /* thanks to @guardian, @victorbritopro and @eQRoeil */ + font-size calc(1em * 0.625) + +body + font-size base-font-size + background-color base-background + color base-color + font-family font-stack-common + line-height line-height + +a + color link-color + + // No styling on focus/hover if there's no effect. Avoids to then have to + // override it countless times. See Issue #232 + if link-hover-color is defined // && ( null == list( (link-color, null, false), link-hover-color) ) + &:focus, + &:hover, + &:active + color link-hover-color + +ul +ol + padding-left 2em + +img + vertical-align middle + +blockquote +figure + margin-left 0 + margin-right 0 + +/* font-sizing for content */ +p +.{kna-namespace}p-like +ul +ol +dl +blockquote +pre +td +th +label +textarea +caption +details +figure + margin-top 0.75em + margin-bottom 0 + line-height line-height + +h1 .{kna-namespace}h1-like + font-size h1-size + if font-stack-headings is defined && font-stack-headings != font-stack-common + font-family font-stack-headings + +h2 .{kna-namespace}h2-like + font-size h2-size + if font-stack-headings is defined && font-stack-headings != font-stack-common + font-family font-stack-headings + +h3 .{kna-namespace}h3-like + font-size h3-size + +h4 .{kna-namespace}h4-like + font-size h4-size + +h5 .{kna-namespace}h5-like + font-size h5-size + +h6 .{kna-namespace}h6-like + font-size h6-size + +/* alternate font-sizing */ +.{kna-namespace}smaller + font-size 0.6em + +.{kna-namespace}small + font-size 0.8em + +.{kna-namespace}big + font-size 1.2em + +.{kna-namespace}bigger + font-size: 1.5em + +.{kna-namespace}biggest + font-size 2em + +code +pre +samp +kbd + /* IE fix */ + white-space pre-line + white-space pre-wrap + font-family font-stack-monospace + line-height normal + +em +.{kna-namespace}italic +address +cite +i +var + font-style italic + +/* avoid top margins on first content element */ +p +.{kna-namespace}p-like +ul +ol +dl +blockquote +pre +h1 +.{kna-namespace}h1-like +h2 +.{kna-namespace}h2-like +h3 +.{kna-namespace}h3-like +h4 +.{kna-namespace}h4-like +h5 +.{kna-namespace}h5-like +h6 +.{kna-namespace}h6-like + &:first-child + margin-top 0 + +/* avoid margins on nested elements */ +li p +li .{kna-namespace}p-like +li ul +li ol + margin-top 0 + margin-bottom 0 + +/* max values */ +img +table +td +blockquote +code +pre +textarea +input +video +svg + max-width 100% + +img + height auto diff --git a/styl/library/_forms.styl b/styl/library/_forms.styl new file mode 100644 index 0000000..0830e75 --- /dev/null +++ b/styl/library/_forms.styl @@ -0,0 +1,99 @@ +/* ----------------------------- */ +/* ==Forms */ +/* ----------------------------- */ + +/* thanks to HTML5boilerplate, +* github.com/nathansmith/formalize and www.sitepen.com +*/ + +/* buttons */ +.{kna-namespace}btn + display inline-block + +/* forms items */ +form +fieldset + border none + +input +button +select +label +.{kna-namespace}btn + font-family inherit + font-size inherit + +button +input +optgroup +select +textarea + color base-color + +label + vertical-align middle + cursor pointer + +legend + border 0 + white-space normal + +textarea + min-height 5em + vertical-align top + font-family inherit + font-size inherit + resize vertical + +select + -webkit-appearance menulist-button + +/* if select styling bugs on WebKit */ +/* select { -webkit-appearance: none; } */ + +/* 'x' appears on right of search input when text is entered. This removes it */ +input[type="search"] + &::-webkit-search-decoration + &::-webkit-search-cancel-button + &::-webkit-search-results-button + &::-webkit-search-results-decoration + display: none + +::-webkit-input-placeholder + color #777 + +input:-moz-placeholder +textarea:-moz-placeholder + color #777 + +.{kna-namespace}btn +input[type="button"] +button + &:focus + -webkit-tap-highlight-color transparent + -webkit-user-select none + -moz-user-select none + -ms-user-select none + user-select none + +/* unstyled forms */ + +button +input[type="button"] +input[type="submit"] +input[type="reset"] + &.{kna-namespace}unstyled + padding 0 + border none + line-height 1 + text-align left + background none + border-radius 0 + box-shadow none + -webkit-appearance none + -moz-appearance none + appearance none + + &:focus + box-shadow none + outline none diff --git a/styl/library/_misc.styl b/styl/library/_misc.styl new file mode 100644 index 0000000..e69a384 --- /dev/null +++ b/styl/library/_misc.styl @@ -0,0 +1,46 @@ +/* ----------------------------- */ +/* ==Misc (skip links, hyphens) */ +/* ----------------------------- */ + +/* styling skip links */ +.{kna-namespace}skip-links + position absolute + + & a + position absolute + overflow hidden + clip rect(1px, 1px, 1px, 1px) + padding 0.5em + background black + color white + text-decoration none + + &:focus + position static + overflow visible + clip auto + +// hyphens on tiny screens +@media (max-width: tiny) + /* you shall not pass */ + div + textarea + table + td + th + code + pre + samp + word-wrap break-word + hyphens auto + +// use .no-wrapping to disallow hyphens on tiny screens +@media (max-width: tiny) + .no-wrapping + word-wrap normal + hyphens manual + +// SVG width IE fix +@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) + img[src$=".svg"] + width 100% diff --git a/styl/library/_print.styl b/styl/library/_print.styl new file mode 100644 index 0000000..723c4c0 --- /dev/null +++ b/styl/library/_print.styl @@ -0,0 +1,83 @@ +/* ----------------------------- */ +/* ==Print (quick print reset) */ +/* ----------------------------- */ + +@media print + * + background transparent !important + box-shadow none !important + text-shadow none !important + + body + width auto + margin auto + font-family serif + font-size 12pt + + p + .{kna-namespace}p-like + h1 + .{kna-namespace}h1-like + h2 + .{kna-namespace}h2-like + h3 + .{kna-namespace}h3-like + h4 + .{kna-namespace}h4-like + h5 + .{kna-namespace}h5-like + h6 + .{kna-namespace}h6-like + blockquote + ul + ol + color #000 + margin auto + + .{kna-namespace}print + display block + + .{kna-namespace}no-print + display none + + /* no orphans, no widows */ + p + .{kna-namespace}p-like + blockquote + orphans 3 + widows 3 + + /* no breaks inside these elements */ + blockquote + ul + ol + page-break-inside avoid + + /* page break before main headers + h1 + .h1-like + page-break-before always + */ + + /* no breaks after these elements */ + h1 + .{kna-namespace}h1-like + h2 + .{kna-namespace}h2-like + h3 + .{kna-namespace}h3-like + caption + page-break-after avoid + + a + color #000 + + /* displaying URLs + a[href]::after + content " (" attr(href) ")" + */ + + a[href^="javascript:"] + a[href^="#"] + &::after + content: "" diff --git a/styl/library/_styling.styl b/styl/library/_styling.styl new file mode 100644 index 0000000..216c02f --- /dev/null +++ b/styl/library/_styling.styl @@ -0,0 +1,97 @@ +/* ----------------------------- */ +/* ==Stylings (minor stylings) */ +/* ----------------------------- */ + +/* styling elements */ +code +kbd +mark + border-radius 2px + +kbd + padding 0 2px + border 1px solid #999 + +code + padding 2px 4px + background rgba(0, 0, 0, 0.04) + color #b11 + +pre code + padding 0 + background none + color inherit + border-radius 0 + +mark + padding 2px 4px + +sup +sub + vertical-align 0 + +sup + bottom 1ex + +sub + top 0.5ex + +blockquote + position relative + padding-left 3em + min-height 2em + +blockquote::before + content "\201C" + position absolute + left 0 + top 0 + font-family georgia, serif + font-size 5em + height .4em + line-height .9 + color rgba(0, 0, 0, .3) + +blockquote > footer + margin-top .75em + font-size 0.9em + color rgba(0, 0, 0, .7) + + &::before + content "\2014 \0020" + +q + font-style normal + +q +.{kna-namespace}q + quotes: "“\00a0" "\00a0”" + + &:lang(fr) + quotes "«\00a0" "\00a0»" + +hr + display block + clear both + height 1px + margin 1em 0 2em + padding 0 + border 0 + color #ccc + background-color #ccc + +/* tables */ +table +.{kna-namespace}table + border 1px solid #ccc + +caption + padding small-value + color #555 + font-style italic + +td +th + padding 0.3em 0.8em + border 1px #aaa dotted + text-align left diff --git a/styl/library/_tables.styl b/styl/library/_tables.styl new file mode 100644 index 0000000..6556957 --- /dev/null +++ b/styl/library/_tables.styl @@ -0,0 +1,25 @@ +/* ----------------------------- */ +/* ==Tables */ +/* ----------------------------- */ + +table +.{kna-namespace}table + width 100% + max-width 100% + table-layout fixed + border-collapse collapse + vertical-align top + margin-bottom medium-value + +.{kna-namespace}table + display table + +#recaptcha_table +.{kna-namespace}table-auto + table-layout auto + +td +th + vertical-align top + min-width medium-value + cursor default diff --git a/styl/objects/_autogrid.styl b/styl/objects/_autogrid.styl new file mode 100644 index 0000000..8383f8a --- /dev/null +++ b/styl/objects/_autogrid.styl @@ -0,0 +1,19 @@ +/* Autogrid object */ +/* see http://codepen.io/raphaelgoetter/pen/KMgBJd */ +@media (min-width: (tiny + 1)) + [class^="autogrid"] + [class*=" autogrid"] + display flex + + [class^="autogrid"] > * + [class*=" autogrid"] > * + flex 1 + min-width 0 /* avoid min-width:auto */ + +/* Autogrid variants */ +@media (min-width: (tiny + 1)) + .has-gutter > *:not(:first-child) + margin-left 1rem + + [class*="--reverse"] + flex-direction: row-reverse diff --git a/styl/objects/_media.styl b/styl/objects/_media.styl new file mode 100644 index 0000000..04ca114 --- /dev/null +++ b/styl/objects/_media.styl @@ -0,0 +1,18 @@ +/* Media object */ +/* see http://codepen.io/raphaelgoetter/pen/KMWWwj */ +@media (min-width: (tiny + 1)) + .o-media + display flex + align-items flex-start + + .o-media-content + flex 1 + min-width 0 /* avoid min-width:auto */ + +/* Media variants */ +@media (min-width: (tiny + 1)) + .o-media--reverse + flex-direction row-reverse + + .o-media-figure--center + align-self center diff --git a/styl/utilities/_helpers.styl b/styl/utilities/_helpers.styl new file mode 100644 index 0000000..175074a --- /dev/null +++ b/styl/utilities/_helpers.styl @@ -0,0 +1,278 @@ +/* ---------------------------------- */ +/* ==Helpers */ +/* ---------------------------------- */ + +/* State Helpers */ +/* ------------- */ + +/* invisible for all */ +.is-hidden +[hidden] + display none + +/* hidden but not for an assistive technology like a screen reader, Yahoo! method */ +.visually-hidden + position absolute !important + border 0 !important + height 1px !important + width 1px !important + padding 0 !important + overflow hidden !important + clip rect(0, 0, 0, 0) !important + +.is-disabled +[disabled] + opacity 0.5 + pointer-events none + cursor not-allowed + filter grayscale(1) + + +ul + &.is-unstyled + &.unstyled + list-style none + padding-left 0 + +/* Width Helpers */ +/* ------------- */ + +/* blocks widths (percentage and pixels) */ +.{kna-namespace}w10 + width 10% + +.{kna-namespace}w20 + width 20% + +.{kna-namespace}w25 + width 25% + +.{kna-namespace}w30 + width 30% + +.{kna-namespace}w33 + width 33.3333% + +.{kna-namespace}w40 + width 40% + +.{kna-namespace}w50 + width 50% + +.{kna-namespace}w60 + width 60% + +.{kna-namespace}w66 + width 66.6666% + +.{kna-namespace}w70 + width 70% + +.{kna-namespace}w75 + width 75% + +.{kna-namespace}w80 + width 80% + +.{kna-namespace}w90 + width 90% + +.{kna-namespace}w100 + width 100% + +.{kna-namespace}w50p + width 50px + +.{kna-namespace}w100p + width 100px + +.{kna-namespace}w150p + width 150px + +.{kna-namespace}w200p + width 200px + +.{kna-namespace}w300p + width 300px + +@media (min-width: 401px) + .{kna-namespace}w400p + width 400px + + .{kna-namespace}w500p + width 500px + + .{kna-namespace}w600p + width 600px + +@media (min-width: 701px) + + .{kna-namespace}w700p + width 700px + + .{kna-namespace}w800p + width 800px + +@media (min-width: 961px) + .{kna-namespace}w960p + width 960px + + .{kna-namespace}mw960p + max-width 960px + + .{kna-namespace}w1140p + width 1140px + + .{kna-namespace}mw1140p + max-width 1140px + +.{kna-namespace}wauto + width auto + +/* Spacing Helpers */ +/* --------------- */ + +.{kna-namespace}man +.{kna-namespace}ma0 + margin 0 + +.{kna-namespace}pan +.{kna-namespace}pa0 + padding 0 + +.{kna-namespace}mas + margin small-value + +.{kna-namespace}mam + margin medium-value + +.{kna-namespace}mal + margin large-value + +.{kna-namespace}pas + padding small-value + +.{kna-namespace}pam + padding medium-value + +.{kna-namespace}pal + padding large-value + +.{kna-namespace}mtn +.{kna-namespace}mt0 + margin-top 0 + +.{kna-namespace}mts + margin-top small-value + +.{kna-namespace}mtm + margin-top medium-value + +.{kna-namespace}mtl + margin-top large-value + +.{kna-namespace}mrn +.{kna-namespace}mr0 + margin-right 0 + +.{kna-namespace}mrs + margin-right small-value + +.{kna-namespace}mrm + margin-right medium-value + +.{kna-namespace}mrl + margin-right large-value + +.{kna-namespace}mbn +.{kna-namespace}mb0 + margin-bottom 0 + +.{kna-namespace}mbs + margin-bottom small-value + +.{kna-namespace}mbm + margin-bottom medium-value + +.{kna-namespace}mbl + margin-bottom large-value + +.{kna-namespace}mln +.{kna-namespace}ml0 + margin-left 0 + +.{kna-namespace}mls + margin-left small-value + +.{kna-namespace}mlm + margin-left medium-value + +.{kna-namespace}mll + margin-left large-value + +.{kna-namespace}mauto + margin auto + +.{kna-namespace}mtauto + margin-top auto + +.{kna-namespace}mrauto + margin-right auto + +.{kna-namespace}mbauto + margin-bottom auto + +.{kna-namespace}mlauto + margin-left: auto + +.{kna-namespace}ptn +.{kna-namespace}pt0 + padding-top 0 + +.{kna-namespace}pts + padding-top small-value + +.{kna-namespace}ptm + padding-top medium-value + +.{kna-namespace}ptl + padding-top large-value + +.{kna-namespace}prn +.{kna-namespace}pr0 + padding-right 0 + +.{kna-namespace}prs + padding-right small-value + +.{kna-namespace}prm + padding-right medium-value + +.{kna-namespace}prl + padding-right large-value + +.{kna-namespace}pbn +.{kna-namespace}pb0 + padding-bottom 0 + +.{kna-namespace}pbs + padding-bottom small-value + +.{kna-namespace}pbm + padding-bottom medium-value + +.{kna-namespace}pbl + padding-bottom large-value + +.{kna-namespace}pln +.{kna-namespace}pl0 + padding-left 0 + +.{kna-namespace}pls + padding-left small-value + +.{kna-namespace}plm + padding-left medium-value + +.{kna-namespace}pll + padding-left large-value diff --git a/styl/utilities/_layout.styl b/styl/utilities/_layout.styl new file mode 100644 index 0000000..4bae1a2 --- /dev/null +++ b/styl/utilities/_layout.styl @@ -0,0 +1,98 @@ +/* ----------------------------- */ +/* ==Global Layout */ +/* ----------------------------- */ + +/* module, gains superpower "BFC" Block Formating Context */ +.mod +.bfc + overflow hidden + +/* blocks that needs to be placed under floats */ +.clear + clear both + +/* blocks that must contain floats */ +.clearfix + &::after + content "" + display table + clear both + border-collapse collapse + +/* simple blocks alignment */ +.{kna-namespace}left + margin-right auto + +.{kna-namespace}right + margin-left auto + +.{kna-namespace}center + margin-left auto + margin-right auto + +/* text and contents alignment */ +.{kna-namespace}txtleft + text-align left + +.{kna-namespace}txtright + text-align right + +.{kna-namespace}txtcenter + text-align center + +/* floating elements */ +.{kna-namespace}fl + float left + +img.{kna-namespace}fl + margin-right small-value + +.{kna-namespace}fr + float right + +img.{kna-namespace}fr + margin-left small-value + +img.{kna-namespace}fl +img.{kna-namespace}fr + margin-bottom tiny-value + +/* inline-block */ +.{kna-namespace}inbl + display inline-block + vertical-align top + +/* flexbox layout +http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html +*/ + +[class*="{kna-namespace}flex-container"] +.{kna-namespace}flex-container + display flex + flex-wrap wrap + +.{kna-namespace}flex-container-h + flex-direction row + +.{kna-namespace}flex-container-v + flex-direction column + +.{kna-namespace}flex-item-fluid + flex 1 + min-width 0 + +.{kna-namespace}flex-item-first +.{kna-namespace}item-first + order -1 + +.{kna-namespace}flex-item-medium +.{kna-namespace}item-medium + order 0 + +.{kna-namespace}flex-item-last +.{kna-namespace}item-last + order 1 + +.{kna-namespace}flex-item-center +.{kna-namespace}item-center + margin auto diff --git a/styl/utilities/_responsive.styl b/styl/utilities/_responsive.styl new file mode 100644 index 0000000..4996461 --- /dev/null +++ b/styl/utilities/_responsive.styl @@ -0,0 +1,230 @@ +/* -------------------------- */ +/* ==Responsive helpers */ +/* -------------------------- */ + +/* large screens */ +/* ------------- */ + +@media (min-width: (medium + 1)) + + /* layouts for large screens */ + .{kna-namespace}large-hidden + display none !important + + .{kna-namespace}large-visible + display block !important + + .{kna-namespace}large-no-float + float none + + .{kna-namespace}large-inbl + display inline-block + float none + vertical-align top + + /* widths for large screens */ + .{kna-namespace}large-w25 + width 25% !important + + .{kna-namespace}large-w33 + width 33.333333% !important + + .{kna-namespace}large-w50 + width 50% !important + + .{kna-namespace}large-w66 + width 66.666666% !important + + .{kna-namespace}large-w75 + width 75% !important + + .{kna-namespace}large-w100 + .{kna-namespace}large-wauto + display block !important + float none !important + clear none !important + width auto !important + margin-left 0 !important + margin-right 0 !important + border 0 + + /* margins for large screens */ + .{kna-namespace}large-man + .{kna-namespace}large-ma0 + margin 0 !important + +/* medium screens */ +/* -------------- */ + +@media (min-width: (small + 1)) and (max-width: large) + + /* layouts for medium screens */ + .{kna-namespace}medium-hidden + display none !important + + .{kna-namespace}medium-visible + display block !important + + .{kna-namespace}medium-no-float + float none + + .{kna-namespace}medium-inbl + display inline-block + float none + vertical-align top + + /* widths for medium screens */ + .{kna-namespace}medium-w25 + width 25% !important + + .{kna-namespace}medium-w33 + width 33.333333% !important + + .{kna-namespace}medium-w50 + width 50% !important + + .{kna-namespace}medium-w66 + width 66.666666% !important + + .{kna-namespace}medium-w75 + width 75% !important + + .{kna-namespace}medium-w100 + .{kna-namespace}medium-wauto + display block !important + float none !important + clear none !important + width auto !important + margin-left 0 !important + margin-right 0 !important + border 0 + + /* margins for medium screens */ + .{kna-namespace}medium-man + .{kna-namespace}medium-ma0 + margin 0 !important + +/* small screens */ +/* ------------- */ + +@media (min-width: (tiny + 1)) and (max-width: small) + + /* layouts for small screens */ + .{kna-namespace}small-hidden + display none !important + + .{kna-namespace}small-visible + display block !important + + .{kna-namespace}small-no-float + float none + + .{kna-namespace}small-inbl + display inline-block + float none + vertical-align top + + /* widths for small screens */ + .{kna-namespace}small-w25 + width 25% !important + + .{kna-namespace}small-w33 + width 33.333333% !important + + .{kna-namespace}small-w50 + width 50% !important + + .{kna-namespace}small-w66 + width 66.666666% !important + + .{kna-namespace}small-w75 + width 75% !important + + .{kna-namespace}small-w100 + .{kna-namespace}small-wauto + display block !important + float none !important + clear none !important + width auto !important + margin-left 0 !important + margin-right 0 !important + border 0 + + /* margins for small screens */ + .{kna-namespace}small-man + .{kna-namespace}small-ma0 + margin 0 !important + + .{kna-namespace}small-pan + .{kna-namespace}small-pa0 + padding 0 !important + +/* tiny screens */ +/* ------------ */ + +@media (max-width: tiny) + + /* quick small resolution reset */ + .{kna-namespace}mod + .{kna-namespace}col + fieldset + display block !important + float none !important + clear none !important + width auto !important + margin-left 0 !important + margin-right 0 !important + border 0 + + .{kna-namespace}flex-container + flex-direction column + + /* layouts for tiny screens */ + .{kna-namespace}tiny-hidden + display none !important + + .{kna-namespace}tiny-visible + display block !important + + .{kna-namespace}tiny-no-float + float none + + .{kna-namespace}tiny-inbl + display inline-block + float none + vertical-align top + + /* widths for tiny screens */ + .{kna-namespace}tiny-w25 + width 25% !important + + .{kna-namespace}tiny-w33 + width 33.333333% !important + + .{kna-namespace}tiny-w50 + width 50% !important + + .{kna-namespace}tiny-w66 + width 66.666666% !important + + .{kna-namespace}tiny-w75 + width 75% !important + + .{kna-namespace}tiny-w100 + .{kna-namespace}tiny-wauto + display block !important + float none !important + clear none !important + width auto !important + margin-left 0 !important + margin-right 0 !important + border 0 + + /* margins for tiny screens */ + .{kna-namespace}tiny-man + .{kna-namespace}tiny-ma0 + margin 0 !important + + .{kna-namespace}tiny-pan + .{kna-namespace}tiny-pa0 + padding 0 !important diff --git a/styl/vendor/_normalize.styl b/styl/vendor/_normalize.styl new file mode 100644 index 0000000..18ddf7f --- /dev/null +++ b/styl/vendor/_normalize.styl @@ -0,0 +1,419 @@ +/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ + +/** + * 1. Change the default font family in all browsers (opinionated). + * 2. Prevent adjustments of font size after orientation changes in IE and iOS. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove the margin in all browsers (opinionated). + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + * 2. Add the correct display in IE. + */ + +article, +aside, +details, /* 1 */ +figcaption, +figure, +footer, +header, +main, /* 2 */ +menu, +nav, +section, +summary { /* 1 */ + display: block; +} + +/** + * Add the correct display in IE 9-. + */ + +audio, +canvas, +progress, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Add the correct display in IE 10-. + * 1. Add the correct display in IE. + */ + +template, /* 1 */ +[hidden] { + display: none; +} + +/* Links + ========================================================================== */ + +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + +a { + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ +} + +/** + * Remove the outline on focused links when they are also active or hovered + * in all browsers (opinionated). + */ + +a:active, +a:hover { + outline-width: 0; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * 1. Remove the bottom border in Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ + +b, +strong { + font-weight: inherit; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * Add the correct font style in Android 4.3-. + */ + +dfn { + font-style: italic; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Add the correct background and color in IE 9-. + */ + +mark { + background-color: #ff0; + color: #000; +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct margin in IE 8. + */ + +figure { + margin: 1em 40px; +} + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change font properties to `inherit` in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +select, +textarea { + font: inherit; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Restore the font weight unset by the previous rule. + */ + +optgroup { + font-weight: bold; +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ + +button, +html [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Change the border, margin, and padding in all browsers (opinionated). + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Remove the default vertical scrollbar in IE. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. + */ + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} From 603e9c2fa942034e145204418fb29d09f8087895 Mon Sep 17 00:00:00 2001 From: Arnaud CARIOU Date: Tue, 7 Mar 2017 17:43:34 +0100 Subject: [PATCH 2/6] Creation de mixin multinavigateurs et comp grillade --- styl/config/_mixins.styl | 42 ++++-- styl/grids/_grillade.styl | 285 +++++++------------------------------- 2 files changed, 80 insertions(+), 247 deletions(-) diff --git a/styl/config/_mixins.styl b/styl/config/_mixins.styl index 16dd059..7dbb788 100644 --- a/styl/config/_mixins.styl +++ b/styl/config/_mixins.styl @@ -2,32 +2,50 @@ // ex. @include respond-to("medium-up") {...} breakpoint(bp) if bp == 'tiny' - return '(max-width: {tiny})' + return '(max-width: %s)' % tiny else if bp == 'small' - return '(max-width: {small})' + return '(max-width: %s)' % small else if bp == 'medium' - return '(max-width: {medium})' + return '(max-width: %s)' % medium else if bp == 'large' - return '(max-width: {large})' + return '(max-width: %s)' % large else if bp == 'extra-large' - return '(max-width: {extra-large})' + return '(max-width: %s)' % extra-large else if bp == 'tiny-up' - return '(min-width: {tiny + 1})' + return '(min-width: %s + 1)' % tiny else if bp == 'small-up' - return '(min-width: {small + 1})' + return '(min-width: %s + 1)' % small else if bp == 'medium-up' - return '(min-width: {medium + 1})' + return '(min-width: %s + 1)' % medium else if bp == 'large-up' - return '(min-width: {large + 1})' + return '(min-width: %s + 1)' % large else if bp == 'extra-large-up' - return '(min-width: {extra-large + 1})' + return '(min-width: %s + 1)' % extra-large else if bp == 'retina' return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)' - /* respond-to(value) string = breakpoint(value) - @media screen and {string} + @media screen and string {block} */ + +displayFlex() + display: -webkit-box + display: -ms-flexbox + display: flex + +box-orient() + -webkit-box-orient arguments + +box-direction() + -webkit-box-direction arguments + +flex-direction() + -ms-flex-direction arguments + flex-direction arguments + +flex-wrap() + -ms-flex-wrap arguments + flex-wrap arguments diff --git a/styl/grids/_grillade.styl b/styl/grids/_grillade.styl index 5c7f34d..ea65fce 100644 --- a/styl/grids/_grillade.styl +++ b/styl/grids/_grillade.styl @@ -14,16 +14,11 @@ medium = 991px large = 1199px extra-large = 1439px -displayFlex() - display: -webkit-box - display: -ms-flexbox - display: flex - @media (min-width: tiny + 1) [class*=" grid-"] [class^="grid-"] displayFlex() - -webkit-box-orient: horizontal + box-orient(horizontal) -webkit-box-direction: normal flex-direction: row flex-wrap: wrap @@ -36,20 +31,18 @@ displayFlex() // example : .grid-perso { @include grid(12, 3rem); } grid(grid-number = 1, own-gutter = 0) & > * - width: calc(100% / grid-number - iefix) - - for key, size in grid-gutters + width 'calc(100% / %s - %s)' % (grid-number iefix) + for key, size in grid-gutters &.has-gutter{key} - margin-right: -(size / 2) - margin-left: -(size / 2) + margin-right -(size / 2) + margin-left -(size / 2) & > * - width: calc(100% / grid-number - size - iefix) - margin-right size / 2 - margin-left size / 2 - - if own-gutter != 0 - margin-right: own-gutter / 2 - margin-left: own-gutter / 2 + width 'calc(100% / %s - %s - %s)' % (grid-number size iefix) + margin-right (size / 2) + margin-left (size / 2) + if own-gutter != 0 + margin-right (own-gutter / 2) + margin-left (own-gutter / 2) // Mono-line grid constructor (.grid) @media (min-width: tiny + 1) @@ -57,14 +50,13 @@ grid(grid-number = 1, own-gutter = 0) .grid--reverse displayFlex() & > * - flex: 1 1 0% - box-sizing: border-box - min-width: 0 - min-height: 0 - + flex 1 1 0% + box-sizing border-box + min-width 0 + min-height 0 for key, size in grid-gutters &.has-gutter{key} > * + * - margin-left: size - iefix + margin-left 'calc(%s - %s)' % (size iefix) // Constructing grids : will be compiled in CSS @media (min-width: tiny + 1) @@ -73,221 +65,44 @@ grid(grid-number = 1, own-gutter = 0) [class*={grid-selector}] > * grid(i, 0) -.push { - margin-left: auto !important; -} +.push + margin-left auto !important -.pull { - margin-right: auto !important; -} +.pull + margin-right auto !important -.item-first { - -webkit-box-ordinal-group: 0; - -ms-flex-order: -1; - order: -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; -} +.item-last + -webkit-box-ordinal-group 2 + -ms-flex-order 1 + order 1 -/*[class*="grid-"][class*="--reverse"] { - -webkit-box-orient: horizontal; - -webkit-box-direction: reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; -}*/ +[class*="grid-"][class*="--reverse"] + -webkit-box-orient: horizontal + -webkit-box-direction: reverse + flex-direction row-reverse -/*@media (min-width: 544px) { - .full { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: calc(100% / 1 - 0.01px); - } - .has-gutter .full { - width: calc(100% / 1 - 1rem - 0.01px); - } - .has-gutter-l .full { - width: calc(100% / 1 - 2rem - 0.01px); - } - .has-gutter-xl .full { - width: calc(100% / 1 - 4rem - 0.01px); - } - .one-half { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: calc(100% / 2 - 0.01px); - } - .has-gutter .one-half { - width: calc(100% / 2 - 1rem - 0.01px); - } - .has-gutter-l .one-half { - width: calc(100% / 2 - 2rem - 0.01px); - } - .has-gutter-xl .one-half { - width: calc(100% / 2 - 4rem - 0.01px); - } - .one-third { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: calc(100% / 3 - 0.01px); - } - .has-gutter .one-third { - width: calc(100% / 3 - 1rem - 0.01px); - } - .has-gutter-l .one-third { - width: calc(100% / 3 - 2rem - 0.01px); - } - .has-gutter-xl .one-third { - width: calc(100% / 3 - 4rem - 0.01px); - } - .one-quarter { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: calc(100% / 4 - 0.01px); - } - .has-gutter .one-quarter { - width: calc(100% / 4 - 1rem - 0.01px); - } - .has-gutter-l .one-quarter { - width: calc(100% / 4 - 2rem - 0.01px); - } - .has-gutter-xl .one-quarter { - width: calc(100% / 4 - 4rem - 0.01px); - } - .one-fifth { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: calc(100% / 5 - 0.01px); - } - .has-gutter .one-fifth { - width: calc(100% / 5 - 1rem - 0.01px); - } - .has-gutter-l .one-fifth { - width: calc(100% / 5 - 2rem - 0.01px); - } - .has-gutter-xl .one-fifth { - width: calc(100% / 5 - 4rem - 0.01px); - } - .one-sixth { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: calc(100% / 6 - 0.01px); - } - .has-gutter .one-sixth { - width: calc(100% / 6 - 1rem - 0.01px); - } - .has-gutter-l .one-sixth { - width: calc(100% / 6 - 2rem - 0.01px); - } - .has-gutter-xl .one-sixth { - width: calc(100% / 6 - 4rem - 0.01px); - } - .two-thirds { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: calc(100% / 3 * 2 - 0.01px); - } - .has-gutter .two-thirds { - width: calc(100% / 3 * 2 - 1rem - 0.01px); - } - .has-gutter-l .two-thirds { - width: calc(100% / 3 * 2 - 2rem - 0.01px); - } - .has-gutter-xl .two-thirds { - width: calc(100% / 3 * 2 - 4rem - 0.01px); - } - .three-quarters { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: calc(100% / 4 * 3 - 0.01px); - } - .has-gutter .three-quarters { - width: calc(100% / 4 * 3 - 1rem - 0.01px); - } - .has-gutter-l .three-quarters { - width: calc(100% / 4 * 3 - 2rem - 0.01px); - } - .has-gutter-xl .three-quarters { - width: calc(100% / 4 * 3 - 4rem - 0.01px); - } - .five-sixths { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: calc(100% / 6 * 5 - 0.01px); - } - .has-gutter .five-sixths { - width: calc(100% / 6 * 5 - 1rem - 0.01px); - } - .has-gutter-l .five-sixths { - width: calc(100% / 6 * 5 - 2rem - 0.01px); - } - .has-gutter-xl .five-sixths { - width: calc(100% / 6 * 5 - 4rem - 0.01px); - } -}*/ +@media (min-width: tiny + 1) + flowToDivid = {'full': 1, 'one-half': 2, 'one-third': 3, 'one-quarter': 4, 'one-fifth': 5, 'one-sixth': 6, 'two-thirds': 3 * 2, 'three-quarters': 4 * 3, 'five-sixths': 6 * 5} + for flow, divider in flowToDivid + .{flow} + flex 0 0 auto + width 'calc(100% / %s - %s)' % (divider iefix) + for key, size in grid-gutters + .has-gutter{key} .{flow} + width 'calc(100% / %s - %s - %s)' % (divider size iefix) /* Responsive Small Breakpoint */ -/* -@media (min-width: 544px) and (max-width: 991px) { - [class*="-small-1"] > * { - width: calc(100% / 1 - 0.01px); - } - [class*="-small-1"].has-gutter > * { - width: calc(100% / 1 - 1rem - 0.01px); - } - [class*="-small-1"].has-gutter-l > * { - width: calc(100% / 1 - 2rem - 0.01px); - } - [class*="-small-1"].has-gutter-xl > * { - width: calc(100% / 1 - 4rem - 0.01px); - } - [class*="-small-2"] > * { - width: calc(100% / 2 - 0.01px); - } - [class*="-small-2"].has-gutter > * { - width: calc(100% / 2 - 1rem - 0.01px); - } - [class*="-small-2"].has-gutter-l > * { - width: calc(100% / 2 - 2rem - 0.01px); - } - [class*="-small-2"].has-gutter-xl > * { - width: calc(100% / 2 - 4rem - 0.01px); - } - [class*="-small-3"] > * { - width: calc(100% / 3 - 0.01px); - } - [class*="-small-3"].has-gutter > * { - width: calc(100% / 3 - 1rem - 0.01px); - } - [class*="-small-3"].has-gutter-l > * { - width: calc(100% / 3 - 2rem - 0.01px); - } - [class*="-small-3"].has-gutter-xl > * { - width: calc(100% / 3 - 4rem - 0.01px); - } - [class*="-small-4"] > * { - width: calc(100% / 4 - 0.01px); - } - [class*="-small-4"].has-gutter > * { - width: calc(100% / 4 - 1rem - 0.01px); - } - [class*="-small-4"].has-gutter-l > * { - width: calc(100% / 4 - 2rem - 0.01px); - } - [class*="-small-4"].has-gutter-xl > * { - width: calc(100% / 4 - 4rem - 0.01px); - } -} -*/ +@media (min-width: tiny + 1) and (max-width: small) + for i in 1..4 + index = '-small-%s' % i + [class*={index}] + & > * + width: 'calc(100% / %s - %s)' % (i iefix) + for key, size in grid-gutters + &.has-gutter{key} > * + width: 'calc(100% / %s - %s - %s)' % (i size iefix) From b8c60d3286c025c222c9030f0812245d32492ca3 Mon Sep 17 00:00:00 2001 From: Arnaud CARIOU Date: Thu, 9 Mar 2017 10:56:37 +0100 Subject: [PATCH 3/6] add submodule flexbox-stylus --- .gitmodules | 3 +++ styl/grids/_grillade.styl | 7 +------ styl/vendor/flexbox-stylus | 1 + 3 files changed, 5 insertions(+), 6 deletions(-) create mode 100644 .gitmodules create mode 160000 styl/vendor/flexbox-stylus diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 0000000..5f15df4 --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "styl/vendor/flexbox-stylus"] + path = styl/vendor/flexbox-stylus + url = git@github.com:psa-acariou/flexbox-stylus.git diff --git a/styl/grids/_grillade.styl b/styl/grids/_grillade.styl index ea65fce..bdd4c6f 100644 --- a/styl/grids/_grillade.styl +++ b/styl/grids/_grillade.styl @@ -1,6 +1,7 @@ /* ---------------------------------- */ /* ==Grillade : Simple Grid System */ /* ---------------------------------- */ +@import '../vendor/flexbox-stylus/stylus/flexbox.styl' /* Doc : http://grillade.knacss.com */ // gutter values for grid layouts. Unit can be: %, px, em, rem grid-gutters = { '': 1rem, '-l': 2rem, '-xl': 4rem } @@ -8,12 +9,6 @@ grid-gutters = { '': 1rem, '-l': 2rem, '-xl': 4rem } // https://github.com/alsacreations/KNACSS/issues/133; iefix = 0.01px -tiny = 543px -small = 767px -medium = 991px -large = 1199px -extra-large = 1439px - @media (min-width: tiny + 1) [class*=" grid-"] [class^="grid-"] diff --git a/styl/vendor/flexbox-stylus b/styl/vendor/flexbox-stylus new file mode 160000 index 0000000..b060889 --- /dev/null +++ b/styl/vendor/flexbox-stylus @@ -0,0 +1 @@ +Subproject commit b060889b8100e9f2d69ffc69b4da368d1a40f297 From c330c7f704f0a11c57a30ca6d770d33500ecedd7 Mon Sep 17 00:00:00 2001 From: Arnaud CARIOU Date: Thu, 9 Mar 2017 12:00:22 +0100 Subject: [PATCH 4/6] add mixin flex box and comp blackberry in flexbox-stylus --- styl/grids/_grillade.styl | 12 ++++-------- styl/vendor/flexbox-stylus | 2 +- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/styl/grids/_grillade.styl b/styl/grids/_grillade.styl index bdd4c6f..a8191ee 100644 --- a/styl/grids/_grillade.styl +++ b/styl/grids/_grillade.styl @@ -12,11 +12,9 @@ iefix = 0.01px @media (min-width: tiny + 1) [class*=" grid-"] [class^="grid-"] - displayFlex() - box-orient(horizontal) - -webkit-box-direction: normal - flex-direction: row - flex-wrap: wrap + flexbox(flex) + flex-direction(row) + flex-wrap(wrap) & > * box-sizing: border-box min-width: 0 @@ -77,9 +75,7 @@ grid(grid-number = 1, own-gutter = 0) order 1 [class*="grid-"][class*="--reverse"] - -webkit-box-orient: horizontal - -webkit-box-direction: reverse - flex-direction row-reverse + flex-direction(row-reverse) @media (min-width: tiny + 1) flowToDivid = {'full': 1, 'one-half': 2, 'one-third': 3, 'one-quarter': 4, 'one-fifth': 5, 'one-sixth': 6, 'two-thirds': 3 * 2, 'three-quarters': 4 * 3, 'five-sixths': 6 * 5} diff --git a/styl/vendor/flexbox-stylus b/styl/vendor/flexbox-stylus index b060889..f6b3c6a 160000 --- a/styl/vendor/flexbox-stylus +++ b/styl/vendor/flexbox-stylus @@ -1 +1 @@ -Subproject commit b060889b8100e9f2d69ffc69b4da368d1a40f297 +Subproject commit f6b3c6ab21a597b721011d14ba33f0f0cd92b7b1 From 4bccce7af6e4b19840032d7ac02a15fc3c945c06 Mon Sep 17 00:00:00 2001 From: Arnaud CARIOU Date: Thu, 9 Mar 2017 14:21:09 +0100 Subject: [PATCH 5/6] add task gulp --- css/stylus/knacss-unminified.css | 1893 ++++++++++++++++++++++++++++++ css/stylus/knacss.css | 1 + gulpfile.js | 17 + package.json | 9 +- styl/config/_mixins.styl | 19 - styl/grids/_grillade.styl | 16 +- styl/utilities/_layout.styl | 12 +- 7 files changed, 1930 insertions(+), 37 deletions(-) create mode 100644 css/stylus/knacss-unminified.css create mode 100644 css/stylus/knacss.css diff --git a/css/stylus/knacss-unminified.css b/css/stylus/knacss-unminified.css new file mode 100644 index 0000000..7c75115 --- /dev/null +++ b/css/stylus/knacss-unminified.css @@ -0,0 +1,1893 @@ +/* +* www.KNACSS.com V6.0.5 (1er décembre 2016) @author: Alsacreations, Raphael Goetter +* Licence WTFPL http://www.wtfpl.net/ +*/ +/* ----------------------------- */ +/* ==Table Of Content */ +/* ----------------------------- */ +/* 1- Normalize (basic reset) */ +/* 2- Base (basic styles) */ +/* 3- Print (print quick reset) */ +/* 4- Stylings (minor stylings) */ +/* 5- Misc (skip links, hyphens) */ +/* 6- Tables (data tables consistency) */ +/* 7- Forms (forms consistency) */ +/* 8- Media object */ +/* 9- Autogrid object */ +/* 10- Global Layout (alignment, modules, positionning) */ +/* 11- Helpers (width and spacers helpers) */ +/* (12- WordPress reset (disabled by default)) */ +/* 13- Responsive (Responsive Web Design helpers) */ +/* 14- Grid Layout (grillade) */ +/* ---------------------------------- */ +/* ==Normalize (basic reset) */ +/* ---------------------------------- */ +/* normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} +body { + margin: 0; +} +article, +aside, +details, +figcaption, +figure, +footer, +header, +main, +menu, +nav, +section, +summary { +/* 1 */ + display: block; +} +audio, +canvas, +progress, +video { + display: inline-block; +} +audio:not([controls]) { + display: none; + height: 0; +} +progress { + vertical-align: baseline; +} +template, +[hidden] { + display: none; +} +a { + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ +} +a:active, +a:hover { + outline-width: 0; +} +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} +b, +strong { + font-weight: inherit; +} +b, +strong { + font-weight: bolder; +} +dfn { + font-style: italic; +} +h1 { + font-size: 2em; + margin: 0.67em 0; +} +mark { + background-color: #ff0; + color: #000; +} +small { + font-size: 80%; +} +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sub { + bottom: -0.25em; +} +sup { + top: -0.5em; +} +img { + border-style: none; +} +svg:not(:root) { + overflow: hidden; +} +code, +kbd, +pre, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} +figure { + margin: 1em 40px; +} +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} +button, +input, +select, +textarea { + font: inherit; /* 1 */ + margin: 0; /* 2 */ +} +optgroup { + font-weight: bold; +} +button, +input { +/* 1 */ + overflow: visible; +} +button, +select { +/* 1 */ + text-transform: none; +} +button, +html [type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ +} +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} +textarea { + overflow: auto; +} +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; +} +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} +html { + box-sizing: border-box; +} +* { + box-sizing: inherit; +} +html { +/* set base font-size to equiv "10px", which is adapted to rem unit */ + font-size: 62.5%; +/* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */ +/* thanks to @guardian, @victorbritopro and @eQRoeil */ + font-size: calc(1em * 0.625); +} +body { + font-size: 1.6rem; + background-color: #fff; + color: #000; + font-family: sans-serif; + line-height: 1.5; +} +a { + color: #333; +} +a:focus, +a:hover, +a:active { + color: #000; +} +ul, +ol { + padding-left: 2em; +} +img { + vertical-align: middle; +} +blockquote, +figure { + margin-left: 0; + margin-right: 0; +} +p, +.p-like, +ul, +ol, +dl, +blockquote, +pre, +td, +th, +label, +textarea, +caption, +details, +figure { + margin-top: 0.75em; + margin-bottom: 0; + line-height: 1.5; +} +h1 .h1-like { + font-size: 3.2rem; +} +h2 .h2-like { + font-size: 2.8rem; +} +h3 .h3-like { + font-size: 2.4rem; +} +h4 .h4-like { + font-size: 2rem; +} +h5 .h5-like { + font-size: 1.8rem; +} +h6 .h6-like { + font-size: 1.6rem; +} +.smaller { + font-size: 0.6em; +} +.small { + font-size: 0.8em; +} +.big { + font-size: 1.2em; +} +.bigger { + font-size: 1.5em; +} +.biggest { + font-size: 2em; +} +code, +pre, +samp, +kbd { +/* IE fix */ + white-space: pre-line; + white-space: pre-wrap; + font-family: consolas, courier, monospace; + line-height: normal; +} +em, +.italic, +address, +cite, +i, +var { + font-style: italic; +} +p:first-child, +.p-like:first-child, +ul:first-child, +ol:first-child, +dl:first-child, +blockquote:first-child, +pre:first-child, +h1:first-child, +.h1-like:first-child, +h2:first-child, +.h2-like:first-child, +h3:first-child, +.h3-like:first-child, +h4:first-child, +.h4-like:first-child, +h5:first-child, +.h5-like:first-child, +h6:first-child, +.h6-like:first-child { + margin-top: 0; +} +li p, +li .p-like, +li ul, +li ol { + margin-top: 0; + margin-bottom: 0; +} +img, +table, +td, +blockquote, +code, +pre, +textarea, +input, +video, +svg { + max-width: 100%; +} +img { + height: auto; +} +@media print { + * { + background: transparent !important; + box-shadow: none !important; + text-shadow: none !important; + } + body { + width: auto; + margin: auto; + font-family: serif; + font-size: 12pt; + } + .p-like, + h1, + .h1-like, + h2, + .h2-like, + h3, + .h3-like, + h4, + .h4-like, + h5, + .h5-like, + h6, + .h6-like, + blockquote, + ul, + ol { + color: #000; + margin: auto; + } + .print { + display: block; + } + .no-print { + display: none; + } + .p-like, + blockquote { + orphans: 3; + widows: 3; + } + blockquote, + ul, + ol { + page-break-inside: avoid; + } + .h1-like, + h2, + .h2-like, + h3, + .h3-like, + caption { + page-break-after: avoid; + } + a { + color: #000; + } + a[href^="javascript:"]::after, + a[href^="#"]::after { + content: ""; + } +} +code, +kbd, +mark { + border-radius: 2px; +} +kbd { + padding: 0 2px; + border: 1px solid #999; +} +code { + padding: 2px 4px; + background: rgba(0,0,0,0.04); + color: #b11; +} +pre code { + padding: 0; + background: none; + color: inherit; + border-radius: 0; +} +mark { + padding: 2px 4px; +} +sup, +sub { + vertical-align: 0; +} +sup { + bottom: 1ex; +} +sub { + top: 0.5ex; +} +blockquote { + position: relative; + padding-left: 3em; + min-height: 2em; +} +blockquote::before { + content: "\201C"; + position: absolute; + left: 0; + top: 0; + font-family: georgia, serif; + font-size: 5em; + height: 0.4em; + line-height: 0.9; + color: rgba(0,0,0,0.3); +} +blockquote > footer { + margin-top: 0.75em; + font-size: 0.9em; + color: rgba(0,0,0,0.7); +} +blockquote > footer::before { + content: "\2014 \0020"; +} +q { + font-style: normal; +} +q, +.q { + quotes: "“\00a0" "\00a0”"; +} +q:lang(fr), +.q:lang(fr) { + quotes: "«\00a0" "\00a0»"; +} +hr { + display: block; + clear: both; + height: 1px; + margin: 1em 0 2em; + padding: 0; + border: 0; + color: #ccc; + background-color: #ccc; +} +table, +.table { + border: 1px solid #ccc; +} +caption { + padding: 1rem; + color: #555; + font-style: italic; +} +td, +th { + padding: 0.3em 0.8em; + border: 1px #aaa dotted; + text-align: left; +} +.skip-links { + position: absolute; +} +.skip-links a { + position: absolute; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); + padding: 0.5em; + background: #000; + color: #fff; + text-decoration: none; +} +.skip-links a:focus { + position: static; + overflow: visible; + clip: auto; +} +@media (max-width: 543px) { + div, + textarea, + table, + td, + th, + code, + pre, + samp { + word-wrap: break-word; + -webkit-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; + } +} +@media (max-width: 543px) { + .no-wrapping { + word-wrap: normal; + -webkit-hyphens: manual; + -ms-hyphens: manual; + hyphens: manual; + } +} +@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + img[src$=".svg"] { + width: 100%; + } +} +table, +.table { + width: 100%; + max-width: 100%; + table-layout: fixed; + border-collapse: collapse; + vertical-align: top; + margin-bottom: 2rem; +} +.table { + display: table; +} +#recaptcha_table, +.table-auto { + table-layout: auto; +} +td, +th { + vertical-align: top; + min-width: 2rem; + cursor: default; +} +.btn { + display: inline-block; +} +form, +fieldset { + border: none; +} +input, +button, +select, +label, +.btn { + font-family: inherit; + font-size: inherit; +} +button, +input, +optgroup, +select, +textarea { + color: #000; +} +label { + vertical-align: middle; + cursor: pointer; +} +legend { + border: 0; + white-space: normal; +} +textarea { + min-height: 5em; + vertical-align: top; + font-family: inherit; + font-size: inherit; + resize: vertical; +} +select { + -webkit-appearance: menulist-button; +} +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-results-button, +input[type="search"]::-webkit-search-results-decoration { + display: none; +} +::-webkit-input-placeholder { + color: #777; +} +input:-moz-placeholder, +textarea:-moz-placeholder { + color: #777; +} +.btn:focus, +input[type="button"]:focus, +button:focus { + -webkit-tap-highlight-color: transparent; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +button.unstyled, +input[type="button"].unstyled, +input[type="submit"].unstyled, +input[type="reset"].unstyled { + padding: 0; + border: none; + line-height: 1; + text-align: left; + background: none; + border-radius: 0; + box-shadow: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} +button.unstyled:focus, +input[type="button"].unstyled:focus, +input[type="submit"].unstyled:focus, +input[type="reset"].unstyled:focus { + box-shadow: none; + outline: none; +} +@media (min-width: 544px) { + .o-media { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + } + .o-media-content { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + min-width: 0 /* avoid min-width:auto */; + } +} +@media (min-width: 544px) { + .o-media--reverse { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + } + .o-media-figure--center { + -ms-flex-item-align: center; + -ms-grid-row-align: center; + align-self: center; + } +} +@media (min-width: 544px) { + [class^="autogrid"], + [class*=" autogrid"] { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + } + [class^="autogrid"] > *, + [class*=" autogrid"] > * { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + min-width: 0 /* avoid min-width:auto */; + } +} +@media (min-width: 544px) { + .has-gutter > *:not(:first-child) { + margin-left: 1rem; + } + [class*="--reverse"] { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + } +} +.mod, +.bfc { + overflow: hidden; +} +.clear { + clear: both; +} +.clearfix::after { + content: ""; + display: table; + clear: both; + border-collapse: collapse; +} +.left { + margin-right: auto; +} +.right { + margin-left: auto; +} +.center { + margin-left: auto; + margin-right: auto; +} +.txtleft { + text-align: left; +} +.txtright { + text-align: right; +} +.txtcenter { + text-align: center; +} +.fl { + float: left; +} +img.fl { + margin-right: 1rem; +} +.fr { + float: right; +} +img.fr { + margin-left: 1rem; +} +img.fl, +img.fr { + margin-bottom: 0.5rem; +} +.inbl { + display: inline-block; + vertical-align: top; +} +[class*="flex-container"], +.flex-container { + display: -ms-flexbox; + display: -webkit-box; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} +.flex-container-h { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; +} +.flex-container-v { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} +.flex-item-fluid { + -ms-flex: 1; + -webkit-box-flex: 1; + flex: 1; + min-width: 0; +} +.flex-item-first, +.item-first { + -ms-flex-order: -1; + -webkit-box-ordinal-group: 0; + order: -1; +} +.flex-item-medium, +.item-medium { + -ms-flex-order: 0; + -webkit-box-ordinal-group: 1; + order: 0; +} +.flex-item-last, +.item-last { + -ms-flex-order: 1; + -webkit-box-ordinal-group: 2; + order: 1; +} +.flex-item-center, +.item-center { + margin: auto; +} +.is-hidden, +[hidden] { + display: none; +} +.visually-hidden { + position: absolute !important; + border: 0 !important; + height: 1px !important; + width: 1px !important; + padding: 0 !important; + overflow: hidden !important; + clip: rect(0, 0, 0, 0) !important; +} +.is-disabled, +[disabled] { + opacity: 0.5; + pointer-events: none; + cursor: not-allowed; + -webkit-filter: grayscale(1); + filter: grayscale(1); +} +ul.is-unstyled, +ul.unstyled { + list-style: none; + padding-left: 0; +} +.w10 { + width: 10%; +} +.w20 { + width: 20%; +} +.w25 { + width: 25%; +} +.w30 { + width: 30%; +} +.w33 { + width: 33.3333%; +} +.w40 { + width: 40%; +} +.w50 { + width: 50%; +} +.w60 { + width: 60%; +} +.w66 { + width: 66.6666%; +} +.w70 { + width: 70%; +} +.w75 { + width: 75%; +} +.w80 { + width: 80%; +} +.w90 { + width: 90%; +} +.w100 { + width: 100%; +} +.w50p { + width: 50px; +} +.w100p { + width: 100px; +} +.w150p { + width: 150px; +} +.w200p { + width: 200px; +} +.w300p { + width: 300px; +} +@media (min-width: 401px) { + .w400p { + width: 400px; + } + .w500p { + width: 500px; + } + .w600p { + width: 600px; + } +} +@media (min-width: 701px) { + .w700p { + width: 700px; + } + .w800p { + width: 800px; + } +} +@media (min-width: 961px) { + .w960p { + width: 960px; + } + .mw960p { + max-width: 960px; + } + .w1140p { + width: 1140px; + } + .mw1140p { + max-width: 1140px; + } +} +.wauto { + width: auto; +} +.man, +.ma0 { + margin: 0; +} +.pan, +.pa0 { + padding: 0; +} +.mas { + margin: 1rem; +} +.mam { + margin: 2rem; +} +.mal { + margin: 4rem; +} +.pas { + padding: 1rem; +} +.pam { + padding: 2rem; +} +.pal { + padding: 4rem; +} +.mtn, +.mt0 { + margin-top: 0; +} +.mts { + margin-top: 1rem; +} +.mtm { + margin-top: 2rem; +} +.mtl { + margin-top: 4rem; +} +.mrn, +.mr0 { + margin-right: 0; +} +.mrs { + margin-right: 1rem; +} +.mrm { + margin-right: 2rem; +} +.mrl { + margin-right: 4rem; +} +.mbn, +.mb0 { + margin-bottom: 0; +} +.mbs { + margin-bottom: 1rem; +} +.mbm { + margin-bottom: 2rem; +} +.mbl { + margin-bottom: 4rem; +} +.mln, +.ml0 { + margin-left: 0; +} +.mls { + margin-left: 1rem; +} +.mlm { + margin-left: 2rem; +} +.mll { + margin-left: 4rem; +} +.mauto { + margin: auto; +} +.mtauto { + margin-top: auto; +} +.mrauto { + margin-right: auto; +} +.mbauto { + margin-bottom: auto; +} +.mlauto { + margin-left: auto; +} +.ptn, +.pt0 { + padding-top: 0; +} +.pts { + padding-top: 1rem; +} +.ptm { + padding-top: 2rem; +} +.ptl { + padding-top: 4rem; +} +.prn, +.pr0 { + padding-right: 0; +} +.prs { + padding-right: 1rem; +} +.prm { + padding-right: 2rem; +} +.prl { + padding-right: 4rem; +} +.pbn, +.pb0 { + padding-bottom: 0; +} +.pbs { + padding-bottom: 1rem; +} +.pbm { + padding-bottom: 2rem; +} +.pbl { + padding-bottom: 4rem; +} +.pln, +.pl0 { + padding-left: 0; +} +.pls { + padding-left: 1rem; +} +.plm { + padding-left: 2rem; +} +.pll { + padding-left: 4rem; +} +@media (min-width: 992px) { + .large-hidden { + display: none !important; + } + .large-visible { + display: block !important; + } + .large-no-float { + float: none; + } + .large-inbl { + display: inline-block; + float: none; + vertical-align: top; + } + .large-w25 { + width: 25% !important; + } + .large-w33 { + width: 33.333333% !important; + } + .large-w50 { + width: 50% !important; + } + .large-w66 { + width: 66.666666% !important; + } + .large-w75 { + width: 75% !important; + } + .large-w100, + .large-wauto { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; + } + .large-man, + .large-ma0 { + margin: 0 !important; + } +} +@media (min-width: 768px) and (max-width: 1199px) { + .medium-hidden { + display: none !important; + } + .medium-visible { + display: block !important; + } + .medium-no-float { + float: none; + } + .medium-inbl { + display: inline-block; + float: none; + vertical-align: top; + } + .medium-w25 { + width: 25% !important; + } + .medium-w33 { + width: 33.333333% !important; + } + .medium-w50 { + width: 50% !important; + } + .medium-w66 { + width: 66.666666% !important; + } + .medium-w75 { + width: 75% !important; + } + .medium-w100, + .medium-wauto { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; + } + .medium-man, + .medium-ma0 { + margin: 0 !important; + } +} +@media (min-width: 544px) and (max-width: 767px) { + .small-hidden { + display: none !important; + } + .small-visible { + display: block !important; + } + .small-no-float { + float: none; + } + .small-inbl { + display: inline-block; + float: none; + vertical-align: top; + } + .small-w25 { + width: 25% !important; + } + .small-w33 { + width: 33.333333% !important; + } + .small-w50 { + width: 50% !important; + } + .small-w66 { + width: 66.666666% !important; + } + .small-w75 { + width: 75% !important; + } + .small-w100, + .small-wauto { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; + } + .small-man, + .small-ma0 { + margin: 0 !important; + } + .small-pan, + .small-pa0 { + padding: 0 !important; + } +} +@media (max-width: 543px) { + .mod, + .col, + fieldset { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; + } + .flex-container { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + } + .tiny-hidden { + display: none !important; + } + .tiny-visible { + display: block !important; + } + .tiny-no-float { + float: none; + } + .tiny-inbl { + display: inline-block; + float: none; + vertical-align: top; + } + .tiny-w25 { + width: 25% !important; + } + .tiny-w33 { + width: 33.333333% !important; + } + .tiny-w50 { + width: 50% !important; + } + .tiny-w66 { + width: 66.666666% !important; + } + .tiny-w75 { + width: 75% !important; + } + .tiny-w100, + .tiny-wauto { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; + } + .tiny-man, + .tiny-ma0 { + margin: 0 !important; + } + .tiny-pan, + .tiny-pa0 { + padding: 0 !important; + } +} +@media (min-width: 544px) { + [class*=" grid-"], + [class^="grid-"] { + display: -ms-flexbox; + display: -webkit-box; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + } + [class*=" grid-"] > *, + [class^="grid-"] > * { + box-sizing: border-box; + min-width: 0; + min-height: 0; + } +} +@media (min-width: 544px) { + .grid, + .grid--reverse { + display: -ms-flexbox; + display: -webkit-box; + display: flex; + } + .grid > *, + .grid--reverse > * { + -ms-flex: 1 1 0%; + -webkit-box-flex: 1; + flex: 1 1 0%; + box-sizing: border-box; + min-width: 0; + min-height: 0; + } + .grid.has-gutter > * + *, + .grid--reverse.has-gutter > * + * { + margin-left: calc(1rem - 0.01px); + } + .grid.has-gutter-l > * + *, + .grid--reverse.has-gutter-l > * + * { + margin-left: calc(2rem - 0.01px); + } + .grid.has-gutter-xl > * + *, + .grid--reverse.has-gutter-xl > * + * { + margin-left: calc(4rem - 0.01px); + } +} +@media (min-width: 544px) { + [class*="grid-2"] > * { + width: calc(100% / 2 - 0.01px); + } + [class*="grid-2"].has-gutter { + margin-right: -0.5rem; + margin-left: -0.5rem; + } + [class*="grid-2"].has-gutter > * { + width: calc(100% / 2 - 1rem - 0.01px); + margin-right: 0.5rem; + margin-left: 0.5rem; + } + [class*="grid-2"].has-gutter-l { + margin-right: -1rem; + margin-left: -1rem; + } + [class*="grid-2"].has-gutter-l > * { + width: calc(100% / 2 - 2rem - 0.01px); + margin-right: 1rem; + margin-left: 1rem; + } + [class*="grid-2"].has-gutter-xl { + margin-right: -2rem; + margin-left: -2rem; + } + [class*="grid-2"].has-gutter-xl > * { + width: calc(100% / 2 - 4rem - 0.01px); + margin-right: 2rem; + margin-left: 2rem; + } + [class*="grid-3"] > * { + width: calc(100% / 3 - 0.01px); + } + [class*="grid-3"].has-gutter { + margin-right: -0.5rem; + margin-left: -0.5rem; + } + [class*="grid-3"].has-gutter > * { + width: calc(100% / 3 - 1rem - 0.01px); + margin-right: 0.5rem; + margin-left: 0.5rem; + } + [class*="grid-3"].has-gutter-l { + margin-right: -1rem; + margin-left: -1rem; + } + [class*="grid-3"].has-gutter-l > * { + width: calc(100% / 3 - 2rem - 0.01px); + margin-right: 1rem; + margin-left: 1rem; + } + [class*="grid-3"].has-gutter-xl { + margin-right: -2rem; + margin-left: -2rem; + } + [class*="grid-3"].has-gutter-xl > * { + width: calc(100% / 3 - 4rem - 0.01px); + margin-right: 2rem; + margin-left: 2rem; + } + [class*="grid-4"] > * { + width: calc(100% / 4 - 0.01px); + } + [class*="grid-4"].has-gutter { + margin-right: -0.5rem; + margin-left: -0.5rem; + } + [class*="grid-4"].has-gutter > * { + width: calc(100% / 4 - 1rem - 0.01px); + margin-right: 0.5rem; + margin-left: 0.5rem; + } + [class*="grid-4"].has-gutter-l { + margin-right: -1rem; + margin-left: -1rem; + } + [class*="grid-4"].has-gutter-l > * { + width: calc(100% / 4 - 2rem - 0.01px); + margin-right: 1rem; + margin-left: 1rem; + } + [class*="grid-4"].has-gutter-xl { + margin-right: -2rem; + margin-left: -2rem; + } + [class*="grid-4"].has-gutter-xl > * { + width: calc(100% / 4 - 4rem - 0.01px); + margin-right: 2rem; + margin-left: 2rem; + } + [class*="grid-5"] > * { + width: calc(100% / 5 - 0.01px); + } + [class*="grid-5"].has-gutter { + margin-right: -0.5rem; + margin-left: -0.5rem; + } + [class*="grid-5"].has-gutter > * { + width: calc(100% / 5 - 1rem - 0.01px); + margin-right: 0.5rem; + margin-left: 0.5rem; + } + [class*="grid-5"].has-gutter-l { + margin-right: -1rem; + margin-left: -1rem; + } + [class*="grid-5"].has-gutter-l > * { + width: calc(100% / 5 - 2rem - 0.01px); + margin-right: 1rem; + margin-left: 1rem; + } + [class*="grid-5"].has-gutter-xl { + margin-right: -2rem; + margin-left: -2rem; + } + [class*="grid-5"].has-gutter-xl > * { + width: calc(100% / 5 - 4rem - 0.01px); + margin-right: 2rem; + margin-left: 2rem; + } + [class*="grid-6"] > * { + width: calc(100% / 6 - 0.01px); + } + [class*="grid-6"].has-gutter { + margin-right: -0.5rem; + margin-left: -0.5rem; + } + [class*="grid-6"].has-gutter > * { + width: calc(100% / 6 - 1rem - 0.01px); + margin-right: 0.5rem; + margin-left: 0.5rem; + } + [class*="grid-6"].has-gutter-l { + margin-right: -1rem; + margin-left: -1rem; + } + [class*="grid-6"].has-gutter-l > * { + width: calc(100% / 6 - 2rem - 0.01px); + margin-right: 1rem; + margin-left: 1rem; + } + [class*="grid-6"].has-gutter-xl { + margin-right: -2rem; + margin-left: -2rem; + } + [class*="grid-6"].has-gutter-xl > * { + width: calc(100% / 6 - 4rem - 0.01px); + margin-right: 2rem; + margin-left: 2rem; + } + [class*="grid-7"] > * { + width: calc(100% / 7 - 0.01px); + } + [class*="grid-7"].has-gutter { + margin-right: -0.5rem; + margin-left: -0.5rem; + } + [class*="grid-7"].has-gutter > * { + width: calc(100% / 7 - 1rem - 0.01px); + margin-right: 0.5rem; + margin-left: 0.5rem; + } + [class*="grid-7"].has-gutter-l { + margin-right: -1rem; + margin-left: -1rem; + } + [class*="grid-7"].has-gutter-l > * { + width: calc(100% / 7 - 2rem - 0.01px); + margin-right: 1rem; + margin-left: 1rem; + } + [class*="grid-7"].has-gutter-xl { + margin-right: -2rem; + margin-left: -2rem; + } + [class*="grid-7"].has-gutter-xl > * { + width: calc(100% / 7 - 4rem - 0.01px); + margin-right: 2rem; + margin-left: 2rem; + } + [class*="grid-8"] > * { + width: calc(100% / 8 - 0.01px); + } + [class*="grid-8"].has-gutter { + margin-right: -0.5rem; + margin-left: -0.5rem; + } + [class*="grid-8"].has-gutter > * { + width: calc(100% / 8 - 1rem - 0.01px); + margin-right: 0.5rem; + margin-left: 0.5rem; + } + [class*="grid-8"].has-gutter-l { + margin-right: -1rem; + margin-left: -1rem; + } + [class*="grid-8"].has-gutter-l > * { + width: calc(100% / 8 - 2rem - 0.01px); + margin-right: 1rem; + margin-left: 1rem; + } + [class*="grid-8"].has-gutter-xl { + margin-right: -2rem; + margin-left: -2rem; + } + [class*="grid-8"].has-gutter-xl > * { + width: calc(100% / 8 - 4rem - 0.01px); + margin-right: 2rem; + margin-left: 2rem; + } + [class*="grid-9"] > * { + width: calc(100% / 9 - 0.01px); + } + [class*="grid-9"].has-gutter { + margin-right: -0.5rem; + margin-left: -0.5rem; + } + [class*="grid-9"].has-gutter > * { + width: calc(100% / 9 - 1rem - 0.01px); + margin-right: 0.5rem; + margin-left: 0.5rem; + } + [class*="grid-9"].has-gutter-l { + margin-right: -1rem; + margin-left: -1rem; + } + [class*="grid-9"].has-gutter-l > * { + width: calc(100% / 9 - 2rem - 0.01px); + margin-right: 1rem; + margin-left: 1rem; + } + [class*="grid-9"].has-gutter-xl { + margin-right: -2rem; + margin-left: -2rem; + } + [class*="grid-9"].has-gutter-xl > * { + width: calc(100% / 9 - 4rem - 0.01px); + margin-right: 2rem; + margin-left: 2rem; + } + [class*="grid-10"] > * { + width: calc(100% / 10 - 0.01px); + } + [class*="grid-10"].has-gutter { + margin-right: -0.5rem; + margin-left: -0.5rem; + } + [class*="grid-10"].has-gutter > * { + width: calc(100% / 10 - 1rem - 0.01px); + margin-right: 0.5rem; + margin-left: 0.5rem; + } + [class*="grid-10"].has-gutter-l { + margin-right: -1rem; + margin-left: -1rem; + } + [class*="grid-10"].has-gutter-l > * { + width: calc(100% / 10 - 2rem - 0.01px); + margin-right: 1rem; + margin-left: 1rem; + } + [class*="grid-10"].has-gutter-xl { + margin-right: -2rem; + margin-left: -2rem; + } + [class*="grid-10"].has-gutter-xl > * { + width: calc(100% / 10 - 4rem - 0.01px); + margin-right: 2rem; + margin-left: 2rem; + } + [class*="grid-11"] > * { + width: calc(100% / 11 - 0.01px); + } + [class*="grid-11"].has-gutter { + margin-right: -0.5rem; + margin-left: -0.5rem; + } + [class*="grid-11"].has-gutter > * { + width: calc(100% / 11 - 1rem - 0.01px); + margin-right: 0.5rem; + margin-left: 0.5rem; + } + [class*="grid-11"].has-gutter-l { + margin-right: -1rem; + margin-left: -1rem; + } + [class*="grid-11"].has-gutter-l > * { + width: calc(100% / 11 - 2rem - 0.01px); + margin-right: 1rem; + margin-left: 1rem; + } + [class*="grid-11"].has-gutter-xl { + margin-right: -2rem; + margin-left: -2rem; + } + [class*="grid-11"].has-gutter-xl > * { + width: calc(100% / 11 - 4rem - 0.01px); + margin-right: 2rem; + margin-left: 2rem; + } + [class*="grid-12"] > * { + width: calc(100% / 12 - 0.01px); + } + [class*="grid-12"].has-gutter { + margin-right: -0.5rem; + margin-left: -0.5rem; + } + [class*="grid-12"].has-gutter > * { + width: calc(100% / 12 - 1rem - 0.01px); + margin-right: 0.5rem; + margin-left: 0.5rem; + } + [class*="grid-12"].has-gutter-l { + margin-right: -1rem; + margin-left: -1rem; + } + [class*="grid-12"].has-gutter-l > * { + width: calc(100% / 12 - 2rem - 0.01px); + margin-right: 1rem; + margin-left: 1rem; + } + [class*="grid-12"].has-gutter-xl { + margin-right: -2rem; + margin-left: -2rem; + } + [class*="grid-12"].has-gutter-xl > * { + width: calc(100% / 12 - 4rem - 0.01px); + margin-right: 2rem; + margin-left: 2rem; + } +} +.push { + margin-left: auto !important; +} +.pull { + margin-right: auto !important; +} +.item-first { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; + -ms-flex-order: -1; + order: -1; +} +.item-last { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + -ms-flex-order: 1; + order: 1; +} +[class*="grid-"][class*="--reverse"] { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; +} +@media (min-width: 544px) { + .full { + -ms-flex: 0 0 auto; + -webkit-box-flex: 0; + flex: 0 0 auto; + width: calc(100% / 1 - 0.01px); + } + .full .has-gutter .full { + width: calc(100% / 1 - 1rem - 0.01px); + } + .full .has-gutter-l .full { + width: calc(100% / 1 - 2rem - 0.01px); + } + .full .has-gutter-xl .full { + width: calc(100% / 1 - 4rem - 0.01px); + } + .one-half { + -ms-flex: 0 0 auto; + -webkit-box-flex: 0; + flex: 0 0 auto; + width: calc(100% / 2 - 0.01px); + } + .one-half .has-gutter .one-half { + width: calc(100% / 2 - 1rem - 0.01px); + } + .one-half .has-gutter-l .one-half { + width: calc(100% / 2 - 2rem - 0.01px); + } + .one-half .has-gutter-xl .one-half { + width: calc(100% / 2 - 4rem - 0.01px); + } + .one-third { + -ms-flex: 0 0 auto; + -webkit-box-flex: 0; + flex: 0 0 auto; + width: calc(100% / 3 - 0.01px); + } + .one-third .has-gutter .one-third { + width: calc(100% / 3 - 1rem - 0.01px); + } + .one-third .has-gutter-l .one-third { + width: calc(100% / 3 - 2rem - 0.01px); + } + .one-third .has-gutter-xl .one-third { + width: calc(100% / 3 - 4rem - 0.01px); + } + .one-quarter { + -ms-flex: 0 0 auto; + -webkit-box-flex: 0; + flex: 0 0 auto; + width: calc(100% / 4 - 0.01px); + } + .one-quarter .has-gutter .one-quarter { + width: calc(100% / 4 - 1rem - 0.01px); + } + .one-quarter .has-gutter-l .one-quarter { + width: calc(100% / 4 - 2rem - 0.01px); + } + .one-quarter .has-gutter-xl .one-quarter { + width: calc(100% / 4 - 4rem - 0.01px); + } + .one-fifth { + -ms-flex: 0 0 auto; + -webkit-box-flex: 0; + flex: 0 0 auto; + width: calc(100% / 5 - 0.01px); + } + .one-fifth .has-gutter .one-fifth { + width: calc(100% / 5 - 1rem - 0.01px); + } + .one-fifth .has-gutter-l .one-fifth { + width: calc(100% / 5 - 2rem - 0.01px); + } + .one-fifth .has-gutter-xl .one-fifth { + width: calc(100% / 5 - 4rem - 0.01px); + } + .one-sixth { + -ms-flex: 0 0 auto; + -webkit-box-flex: 0; + flex: 0 0 auto; + width: calc(100% / 6 - 0.01px); + } + .one-sixth .has-gutter .one-sixth { + width: calc(100% / 6 - 1rem - 0.01px); + } + .one-sixth .has-gutter-l .one-sixth { + width: calc(100% / 6 - 2rem - 0.01px); + } + .one-sixth .has-gutter-xl .one-sixth { + width: calc(100% / 6 - 4rem - 0.01px); + } + .two-thirds { + -ms-flex: 0 0 auto; + -webkit-box-flex: 0; + flex: 0 0 auto; + width: calc(100% / 6 - 0.01px); + } + .two-thirds .has-gutter .two-thirds { + width: calc(100% / 6 - 1rem - 0.01px); + } + .two-thirds .has-gutter-l .two-thirds { + width: calc(100% / 6 - 2rem - 0.01px); + } + .two-thirds .has-gutter-xl .two-thirds { + width: calc(100% / 6 - 4rem - 0.01px); + } + .three-quarters { + -ms-flex: 0 0 auto; + -webkit-box-flex: 0; + flex: 0 0 auto; + width: calc(100% / 12 - 0.01px); + } + .three-quarters .has-gutter .three-quarters { + width: calc(100% / 12 - 1rem - 0.01px); + } + .three-quarters .has-gutter-l .three-quarters { + width: calc(100% / 12 - 2rem - 0.01px); + } + .three-quarters .has-gutter-xl .three-quarters { + width: calc(100% / 12 - 4rem - 0.01px); + } + .five-sixths { + -ms-flex: 0 0 auto; + -webkit-box-flex: 0; + flex: 0 0 auto; + width: calc(100% / 30 - 0.01px); + } + .five-sixths .has-gutter .five-sixths { + width: calc(100% / 30 - 1rem - 0.01px); + } + .five-sixths .has-gutter-l .five-sixths { + width: calc(100% / 30 - 2rem - 0.01px); + } + .five-sixths .has-gutter-xl .five-sixths { + width: calc(100% / 30 - 4rem - 0.01px); + } +} +@media (min-width: 544px) and (max-width: 991px) { + [class*="-small-1"] > * { + width: calc(100% / 1 - 0.01px); + } + [class*="-small-1"] > *.has-gutter > * { + width: calc(100% / 1 - 1rem - 0.01px); + } + [class*="-small-1"] > *.has-gutter-l > * { + width: calc(100% / 1 - 2rem - 0.01px); + } + [class*="-small-1"] > *.has-gutter-xl > * { + width: calc(100% / 1 - 4rem - 0.01px); + } + [class*="-small-2"] > * { + width: calc(100% / 2 - 0.01px); + } + [class*="-small-2"] > *.has-gutter > * { + width: calc(100% / 2 - 1rem - 0.01px); + } + [class*="-small-2"] > *.has-gutter-l > * { + width: calc(100% / 2 - 2rem - 0.01px); + } + [class*="-small-2"] > *.has-gutter-xl > * { + width: calc(100% / 2 - 4rem - 0.01px); + } + [class*="-small-3"] > * { + width: calc(100% / 3 - 0.01px); + } + [class*="-small-3"] > *.has-gutter > * { + width: calc(100% / 3 - 1rem - 0.01px); + } + [class*="-small-3"] > *.has-gutter-l > * { + width: calc(100% / 3 - 2rem - 0.01px); + } + [class*="-small-3"] > *.has-gutter-xl > * { + width: calc(100% / 3 - 4rem - 0.01px); + } + [class*="-small-4"] > * { + width: calc(100% / 4 - 0.01px); + } + [class*="-small-4"] > *.has-gutter > * { + width: calc(100% / 4 - 1rem - 0.01px); + } + [class*="-small-4"] > *.has-gutter-l > * { + width: calc(100% / 4 - 2rem - 0.01px); + } + [class*="-small-4"] > *.has-gutter-xl > * { + width: calc(100% / 4 - 4rem - 0.01px); + } +} +/* ----------------------------- */ +/* ==Own stylesheet */ +/* ----------------------------- */ +/* Here should go your own CSS styles */ diff --git a/css/stylus/knacss.css b/css/stylus/knacss.css new file mode 100644 index 0000000..ed14b28 --- /dev/null +++ b/css/stylus/knacss.css @@ -0,0 +1 @@ +html,legend{box-sizing:border-box}a:active,a:focus,a:hover,body,mark{color:#000}code,mark{padding:2px 4px}button,hr,input{overflow:visible}hr,legend,pre code{padding:0}.table,blockquote,code,img,input,legend,pre,svg,table,td,textarea,video{max-width:100%}.table,table,td,th{vertical-align:top}.clear,hr{clear:both}.txtleft,td,th{text-align:left}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#333}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:0}sub{bottom:-.25em;top:.5ex}sup{top:-.5em;bottom:1ex}img{border-style:none;vertical-align:middle;height:auto}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-size:1em}figure{margin:1em 40px}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{margin:0 2px;padding:.35em .625em .75em}legend{color:inherit;display:table}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}html{font-size:62.5%;font-size:calc(1em * .625)}*{box-sizing:inherit}body{margin:0;font-size:1.6rem;background-color:#fff;font-family:sans-serif;line-height:1.5}ol,ul{padding-left:2em}blockquote,figure{margin-left:0;margin-right:0}.p-like,blockquote,caption,details,dl,figure,label,ol,p,pre,td,textarea,th,ul{margin-top:.75em;margin-bottom:0;line-height:1.5}h1 .h1-like{font-size:3.2rem}h2 .h2-like{font-size:2.8rem}h3 .h3-like{font-size:2.4rem}h4 .h4-like{font-size:2rem}h5 .h5-like{font-size:1.8rem}h6 .h6-like{font-size:1.6rem}.smaller{font-size:.6em}.small{font-size:.8em}.big{font-size:1.2em}.bigger{font-size:1.5em}.biggest{font-size:2em}code,kbd,pre,samp{white-space:pre-line;white-space:pre-wrap;font-family:consolas,courier,monospace;line-height:normal}.italic,address,cite,em,i,var{font-style:italic}.h1-like:first-child,.h2-like:first-child,.h3-like:first-child,.h4-like:first-child,.h5-like:first-child,.h6-like:first-child,.p-like:first-child,blockquote:first-child,dl:first-child,h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child,ol:first-child,p:first-child,pre:first-child,ul:first-child{margin-top:0}li .p-like,li ol,li p,li ul{margin-top:0;margin-bottom:0}@media print{*{background:0 0!important;box-shadow:none!important;text-shadow:none!important}body{width:auto;margin:auto;font-family:serif;font-size:12pt}.h1-like,.h2-like,.h3-like,.h4-like,.h5-like,.h6-like,.p-like,blockquote,h1,h2,h3,h4,h5,h6,ol,ul{color:#000;margin:auto}.print{display:block}.no-print{display:none}.p-like,blockquote{orphans:3;widows:3}blockquote,ol,ul{page-break-inside:avoid}.h1-like,.h2-like,.h3-like,caption,h2,h3{page-break-after:avoid}a{color:#000}a[href^="javascript:"]::after,a[href^="#"]::after{content:""}}code,kbd,mark{border-radius:2px}kbd{padding:0 2px;border:1px solid #999}code{background:rgba(0,0,0,.04);color:#b11}pre code{background:0 0;color:inherit;border-radius:0}blockquote{position:relative;padding-left:3em;min-height:2em}.skip-links,.skip-links a{position:absolute}blockquote::before{content:"\201C";position:absolute;left:0;top:0;font-family:georgia,serif;font-size:5em;height:.4em;line-height:.9;color:rgba(0,0,0,.3)}blockquote>footer{margin-top:.75em;font-size:.9em;color:rgba(0,0,0,.7)}.btn,button,input,label,select,textarea{font-family:inherit;font-size:inherit}blockquote>footer::before{content:"\2014 \0020"}q{font-style:normal}.q,q{quotes:"“\00a0" "\00a0”"}.q:lang(fr),q:lang(fr){quotes:"«\00a0" "\00a0»"}hr{box-sizing:content-box;display:block;height:1px;margin:1em 0 2em;border:0;color:#ccc;background-color:#ccc}.center,.left{margin-right:auto}.table,table{border:1px solid #ccc;width:100%;table-layout:fixed;border-collapse:collapse;margin-bottom:2rem}caption{padding:1rem;color:#555;font-style:italic}td,th{padding:.3em .8em;border:1px dotted #aaa;min-width:2rem;cursor:default}.skip-links a{overflow:hidden;clip:rect(1px,1px,1px,1px);padding:.5em;background:#000;color:#fff;text-decoration:none}.skip-links a:focus{position:static;overflow:visible;clip:auto}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){img[src$=".svg"]{width:100%}}.table{display:table}#recaptcha_table,.table-auto{table-layout:auto}.btn{display:inline-block}fieldset,form{border:none}button,input,optgroup,select,textarea{color:#000}label{vertical-align:middle;cursor:pointer}.inbl,textarea{vertical-align:top}legend{border:0;white-space:normal}textarea{min-height:5em;resize:vertical}select{-webkit-appearance:menulist-button}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}::-webkit-input-placeholder{opacity:.54;color:#777}input:-moz-placeholder,textarea:-moz-placeholder{color:#777}.btn:focus,button:focus,input[type=button]:focus{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}button.unstyled,input[type=button].unstyled,input[type=reset].unstyled,input[type=submit].unstyled{padding:0;border:none;line-height:1;text-align:left;background:0 0;border-radius:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}button.unstyled:focus,input[type=button].unstyled:focus,input[type=reset].unstyled:focus,input[type=submit].unstyled:focus{box-shadow:none;outline:0}@media (min-width:544px){.o-media{display:flex;align-items:flex-start}.o-media-content{flex:1;min-width:0}.o-media--reverse{flex-direction:row-reverse}.o-media-figure--center{align-self:center}[class*=" autogrid"],[class^=autogrid]{display:flex}[class*=" autogrid"]>*,[class^=autogrid]>*{flex:1;min-width:0}.has-gutter>:not(:first-child){margin-left:1rem}[class*="--reverse"]{flex-direction:row-reverse}}.center,.right{margin-left:auto}.bfc,.mod{overflow:hidden}.clearfix::after{content:"";display:table;clear:both;border-collapse:collapse}.txtright{text-align:right}.txtcenter{text-align:center}.fl{float:left}img.fl{margin-right:1rem}.fr{float:right}img.fr{margin-left:1rem}img.fl,img.fr{margin-bottom:.5rem}.inbl{display:inline-block}.flex-container,[class*=flex-container]{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-container-h{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-moz-box-direction:row;-ms-flex-direction:row;flex-direction:row}.flex-container-v{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-direction:column;-ms-flex-direction:column;flex-direction:column}.flex-item-fluid{-webkit-flex:1;-ms-flex:1;flex:1;min-width:0}.flex-item-first,.item-first{-ms-flex-order:-1;-webkit-order:-1;order:-1}.flex-item-medium,.item-medium{-ms-flex-order:0;-webkit-order:0;order:0}.flex-item-last,.item-last{-ms-flex-order:1;-webkit-order:1;order:1}.flex-item-center,.item-center{margin:auto}.is-hidden,[hidden]{display:none}.visually-hidden{position:absolute!important;border:0!important;height:1px!important;width:1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}.is-disabled,[disabled]{opacity:.5;pointer-events:none;cursor:not-allowed;filter:grayscale(1)}ul.is-unstyled,ul.unstyled{list-style:none;padding-left:0}.w10{width:10%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w33{width:33.3333%}.w40{width:40%}.w50{width:50%}.w60{width:60%}.w66{width:66.6666%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w90{width:90%}.w100{width:100%}.w50p{width:50px}.w100p{width:100px}.w150p{width:150px}.w200p{width:200px}.w300p{width:300px}@media (min-width:401px){.w400p{width:400px}.w500p{width:500px}.w600p{width:600px}}@media (min-width:701px){.w700p{width:700px}.w800p{width:800px}}@media (min-width:961px){.w960p{width:960px}.mw960p{max-width:960px}.w1140p{width:1140px}.mw1140p{max-width:1140px}}.wauto{width:auto}.ma0,.man{margin:0}.pa0,.pan{padding:0}.mas{margin:1rem}.mam{margin:2rem}.mal{margin:4rem}.pas{padding:1rem}.pam{padding:2rem}.pal{padding:4rem}.mt0,.mtn{margin-top:0}.mts{margin-top:1rem}.mtm{margin-top:2rem}.mtl{margin-top:4rem}.mr0,.mrn{margin-right:0}.mrs{margin-right:1rem}.mrm{margin-right:2rem}.mrl{margin-right:4rem}.mb0,.mbn{margin-bottom:0}.mbs{margin-bottom:1rem}.mbm{margin-bottom:2rem}.mbl{margin-bottom:4rem}.ml0,.mln{margin-left:0}.mls{margin-left:1rem}.mlm{margin-left:2rem}.mll{margin-left:4rem}.mauto{margin:auto}.mtauto{margin-top:auto}.mrauto{margin-right:auto}.mbauto{margin-bottom:auto}.mlauto{margin-left:auto}.pt0,.ptn{padding-top:0}.pts{padding-top:1rem}.ptm{padding-top:2rem}.ptl{padding-top:4rem}.pr0,.prn{padding-right:0}.prs{padding-right:1rem}.prm{padding-right:2rem}.prl{padding-right:4rem}.pb0,.pbn{padding-bottom:0}.pbs{padding-bottom:1rem}.pbm{padding-bottom:2rem}.pbl{padding-bottom:4rem}.pl0,.pln{padding-left:0}.pls{padding-left:1rem}.plm{padding-left:2rem}.pll{padding-left:4rem}@media (min-width:992px){.large-hidden{display:none!important}.large-visible{display:block!important}.large-no-float{float:none}.large-inbl{display:inline-block;float:none;vertical-align:top}.large-w25{width:25%!important}.large-w33{width:33.333333%!important}.large-w50{width:50%!important}.large-w66{width:66.666666%!important}.large-w75{width:75%!important}.large-w100,.large-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.large-ma0,.large-man{margin:0!important}}@media (min-width:768px) and (max-width:1199px){.medium-hidden{display:none!important}.medium-visible{display:block!important}.medium-no-float{float:none}.medium-inbl{display:inline-block;float:none;vertical-align:top}.medium-w25{width:25%!important}.medium-w33{width:33.333333%!important}.medium-w50{width:50%!important}.medium-w66{width:66.666666%!important}.medium-w75{width:75%!important}.medium-w100,.medium-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.medium-ma0,.medium-man{margin:0!important}}@media (min-width:544px) and (max-width:767px){.small-hidden{display:none!important}.small-visible{display:block!important}.small-no-float{float:none}.small-inbl{display:inline-block;float:none;vertical-align:top}.small-w25{width:25%!important}.small-w33{width:33.333333%!important}.small-w50{width:50%!important}.small-w66{width:66.666666%!important}.small-w75{width:75%!important}.small-w100,.small-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.small-ma0,.small-man{margin:0!important}.small-pa0,.small-pan{padding:0!important}}@media (max-width:543px){code,div,pre,samp,table,td,textarea,th{word-wrap:break-word;hyphens:auto}.no-wrapping{word-wrap:normal;hyphens:manual}.col,.mod,.tiny-w100,.tiny-wauto,fieldset{clear:none!important;margin-left:0!important;margin-right:0!important;border:0}.col,.mod,fieldset{display:block!important;float:none!important;width:auto!important}.tiny-inbl,.tiny-no-float{float:none}.flex-container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-direction:column;-ms-flex-direction:column;flex-direction:column}.tiny-hidden{display:none!important}.tiny-visible{display:block!important}.tiny-inbl{display:inline-block;vertical-align:top}.tiny-w25{width:25%!important}.tiny-w33{width:33.333333%!important}.tiny-w50{width:50%!important}.tiny-w66{width:66.666666%!important}.tiny-w75{width:75%!important}.tiny-w100,.tiny-wauto{display:block!important;float:none!important;width:auto!important}.tiny-ma0,.tiny-man{margin:0!important}.tiny-pa0,.tiny-pan{padding:0!important}}@media (min-width:544px){[class*=" grid-"],[class^=grid-]{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-moz-box-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}[class*=" grid-"]>*,[class^=grid-]>*{box-sizing:border-box;min-width:0;min-height:0}.grid--reverse>*,.grid>*{-webkit-flex:1;-ms-flex:1;flex:1;box-sizing:border-box;min-width:0;min-height:0}.grid--reverse.has-gutter>*+*,.grid.has-gutter>*+*{margin-left:calc(1rem - .01px)}.grid--reverse.has-gutter-l>*+*,.grid.has-gutter-l>*+*{margin-left:calc(2rem - .01px)}.grid--reverse.has-gutter-xl>*+*,.grid.has-gutter-xl>*+*{margin-left:calc(4rem - .01px)}[class*=grid-2]>*>*{width:calc(100% / 2 - .01px)}[class*=grid-2]>.has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-2]>.has-gutter>*{width:calc(100% / 2 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-2]>.has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-2]>.has-gutter-l>*{width:calc(100% / 2 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-2]>.has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-2]>.has-gutter-xl>*{width:calc(100% / 2 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-3]>*>*{width:calc(100% / 3 - .01px)}[class*=grid-3]>.has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-3]>.has-gutter>*{width:calc(100% / 3 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-3]>.has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-3]>.has-gutter-l>*{width:calc(100% / 3 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-3]>.has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-3]>.has-gutter-xl>*{width:calc(100% / 3 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-4]>*>*{width:calc(100% / 4 - .01px)}[class*=grid-4]>.has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-4]>.has-gutter>*{width:calc(100% / 4 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-4]>.has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-4]>.has-gutter-l>*{width:calc(100% / 4 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-4]>.has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-4]>.has-gutter-xl>*{width:calc(100% / 4 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-5]>*>*{width:calc(100% / 5 - .01px)}[class*=grid-5]>.has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-5]>.has-gutter>*{width:calc(100% / 5 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-5]>.has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-5]>.has-gutter-l>*{width:calc(100% / 5 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-5]>.has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-5]>.has-gutter-xl>*{width:calc(100% / 5 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-6]>*>*{width:calc(100% / 6 - .01px)}[class*=grid-6]>.has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-6]>.has-gutter>*{width:calc(100% / 6 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-6]>.has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-6]>.has-gutter-l>*{width:calc(100% / 6 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-6]>.has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-6]>.has-gutter-xl>*{width:calc(100% / 6 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-7]>*>*{width:calc(100% / 7 - .01px)}[class*=grid-7]>.has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-7]>.has-gutter>*{width:calc(100% / 7 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-7]>.has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-7]>.has-gutter-l>*{width:calc(100% / 7 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-7]>.has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-7]>.has-gutter-xl>*{width:calc(100% / 7 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-8]>*>*{width:calc(100% / 8 - .01px)}[class*=grid-8]>.has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-8]>.has-gutter>*{width:calc(100% / 8 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-8]>.has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-8]>.has-gutter-l>*{width:calc(100% / 8 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-8]>.has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-8]>.has-gutter-xl>*{width:calc(100% / 8 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-9]>*>*{width:calc(100% / 9 - .01px)}[class*=grid-9]>.has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-9]>.has-gutter>*{width:calc(100% / 9 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-9]>.has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-9]>.has-gutter-l>*{width:calc(100% / 9 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-9]>.has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-9]>.has-gutter-xl>*{width:calc(100% / 9 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-10]>*>*{width:calc(100% / 10 - .01px)}[class*=grid-10]>.has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-10]>.has-gutter>*{width:calc(100% / 10 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-10]>.has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-10]>.has-gutter-l>*{width:calc(100% / 10 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-10]>.has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-10]>.has-gutter-xl>*{width:calc(100% / 10 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-11]>*>*{width:calc(100% / 11 - .01px)}[class*=grid-11]>.has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-11]>.has-gutter>*{width:calc(100% / 11 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-11]>.has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-11]>.has-gutter-l>*{width:calc(100% / 11 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-11]>.has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-11]>.has-gutter-xl>*{width:calc(100% / 11 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-12]>*>*{width:calc(100% / 12 - .01px)}[class*=grid-12]>.has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-12]>.has-gutter>*{width:calc(100% / 12 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-12]>.has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-12]>.has-gutter-l>*{width:calc(100% / 12 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-12]>.has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-12]>.has-gutter-xl>*{width:calc(100% / 12 - 4rem - .01px);margin-right:2rem;margin-left:2rem}}.push{margin-left:auto!important}.pull{margin-right:auto!important}.item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;-webkit-order:-1;order:-1}.item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;-webkit-order:1;order:1}[class*=grid-][class*="--reverse"]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-moz-box-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}@media (min-width:544px){.full{-webkit-flex:0;-ms-flex:0;flex:0;width:calc(100% / 1 - .01px)}.full .has-gutter .full{width:calc(100% / 1 - 1rem - .01px)}.full .has-gutter-l .full{width:calc(100% / 1 - 2rem - .01px)}.full .has-gutter-xl .full{width:calc(100% / 1 - 4rem - .01px)}.one-half{-webkit-flex:0;-ms-flex:0;flex:0;width:calc(100% / 2 - .01px)}.one-half .has-gutter .one-half{width:calc(100% / 2 - 1rem - .01px)}.one-half .has-gutter-l .one-half{width:calc(100% / 2 - 2rem - .01px)}.one-half .has-gutter-xl .one-half{width:calc(100% / 2 - 4rem - .01px)}.one-third{-webkit-flex:0;-ms-flex:0;flex:0;width:calc(100% / 3 - .01px)}.one-third .has-gutter .one-third{width:calc(100% / 3 - 1rem - .01px)}.one-third .has-gutter-l .one-third{width:calc(100% / 3 - 2rem - .01px)}.one-third .has-gutter-xl .one-third{width:calc(100% / 3 - 4rem - .01px)}.one-quarter{-webkit-flex:0;-ms-flex:0;flex:0;width:calc(100% / 4 - .01px)}.one-quarter .has-gutter .one-quarter{width:calc(100% / 4 - 1rem - .01px)}.one-quarter .has-gutter-l .one-quarter{width:calc(100% / 4 - 2rem - .01px)}.one-quarter .has-gutter-xl .one-quarter{width:calc(100% / 4 - 4rem - .01px)}.one-fifth{-webkit-flex:0;-ms-flex:0;flex:0;width:calc(100% / 5 - .01px)}.one-fifth .has-gutter .one-fifth{width:calc(100% / 5 - 1rem - .01px)}.one-fifth .has-gutter-l .one-fifth{width:calc(100% / 5 - 2rem - .01px)}.one-fifth .has-gutter-xl .one-fifth{width:calc(100% / 5 - 4rem - .01px)}.one-sixth{-webkit-flex:0;-ms-flex:0;flex:0;width:calc(100% / 6 - .01px)}.one-sixth .has-gutter .one-sixth{width:calc(100% / 6 - 1rem - .01px)}.one-sixth .has-gutter-l .one-sixth{width:calc(100% / 6 - 2rem - .01px)}.one-sixth .has-gutter-xl .one-sixth{width:calc(100% / 6 - 4rem - .01px)}.two-thirds{-webkit-flex:0;-ms-flex:0;flex:0;width:calc(100% / 6 - .01px)}.two-thirds .has-gutter .two-thirds{width:calc(100% / 6 - 1rem - .01px)}.two-thirds .has-gutter-l .two-thirds{width:calc(100% / 6 - 2rem - .01px)}.two-thirds .has-gutter-xl .two-thirds{width:calc(100% / 6 - 4rem - .01px)}.three-quarters{-webkit-flex:0;-ms-flex:0;flex:0;width:calc(100% / 12 - .01px)}.three-quarters .has-gutter .three-quarters{width:calc(100% / 12 - 1rem - .01px)}.three-quarters .has-gutter-l .three-quarters{width:calc(100% / 12 - 2rem - .01px)}.three-quarters .has-gutter-xl .three-quarters{width:calc(100% / 12 - 4rem - .01px)}.five-sixths{-webkit-flex:0;-ms-flex:0;flex:0;width:calc(100% / 30 - .01px)}.five-sixths .has-gutter .five-sixths{width:calc(100% / 30 - 1rem - .01px)}.five-sixths .has-gutter-l .five-sixths{width:calc(100% / 30 - 2rem - .01px)}.five-sixths .has-gutter-xl .five-sixths{width:calc(100% / 30 - 4rem - .01px)}}@media (min-width:544px) and (max-width:767px){[class*=-small-1]>*{width:calc(100% / 1 - .01px)}[class*=-small-1]>.has-gutter>*{width:calc(100% / 1 - 1rem - .01px)}[class*=-small-1]>.has-gutter-l>*{width:calc(100% / 1 - 2rem - .01px)}[class*=-small-1]>.has-gutter-xl>*{width:calc(100% / 1 - 4rem - .01px)}[class*=-small-2]>*{width:calc(100% / 2 - .01px)}[class*=-small-2]>.has-gutter>*{width:calc(100% / 2 - 1rem - .01px)}[class*=-small-2]>.has-gutter-l>*{width:calc(100% / 2 - 2rem - .01px)}[class*=-small-2]>.has-gutter-xl>*{width:calc(100% / 2 - 4rem - .01px)}[class*=-small-3]>*{width:calc(100% / 3 - .01px)}[class*=-small-3]>.has-gutter>*{width:calc(100% / 3 - 1rem - .01px)}[class*=-small-3]>.has-gutter-l>*{width:calc(100% / 3 - 2rem - .01px)}[class*=-small-3]>.has-gutter-xl>*{width:calc(100% / 3 - 4rem - .01px)}[class*=-small-4]>*{width:calc(100% / 4 - .01px)}[class*=-small-4]>.has-gutter>*{width:calc(100% / 4 - 1rem - .01px)}[class*=-small-4]>.has-gutter-l>*{width:calc(100% / 4 - 2rem - .01px)}[class*=-small-4]>.has-gutter-xl>*{width:calc(100% / 4 - 4rem - .01px)}} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index c83281b..1185f5a 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -8,6 +8,7 @@ var rename = require('gulp-rename'); var minifycss = require('gulp-minify-css'); // var sourcemaps = require('gulp-sourcemaps'); var autoprefixer = require('gulp-autoprefixer'); +var stylus = require('gulp-stylus'); // tâche CSS = compile vers knacss.css et knacss-unminified.css @@ -36,6 +37,22 @@ gulp.task('grillade', function() { .pipe(gulp.dest('./css/')); }); +gulp.task('styluscss', function () { + return gulp.src('./styl/knacss.styl') + .pipe(stylus()) + .pipe(autoprefixer()) + .pipe(rename('knacss-unminified.css')) + .pipe(gulp.dest('./css/stylus/')); +}); + +gulp.task('styluscssmin', function () { + return gulp.src('./styl/knacss.styl') + .pipe(stylus({compress: true})) + .pipe(gulp.dest('./css/stylus/')) + .pipe(minifycss()) + .pipe(gulp.dest('./css/stylus/')); +}); + // Watcher gulp.task('watch', function() { gulp.watch(['./sass/*.scss'], ['css']); diff --git a/package.json b/package.json index 3e51f5f..7250eab 100644 --- a/package.json +++ b/package.json @@ -29,12 +29,13 @@ "dependencies": {}, "devDependencies": { "gulp": "latest", - "gulp-rename": "latest", - "gulp-sass": "latest", + "gulp-autoprefixer": "latest", "gulp-concat": "latest", "gulp-minify-css": "latest", - "gulp-autoprefixer": "latest", - "gulp-sourcemaps": "latest" + "gulp-rename": "latest", + "gulp-sass": "latest", + "gulp-sourcemaps": "latest", + "gulp-stylus": "^2.6.0" }, "engines": {} } diff --git a/styl/config/_mixins.styl b/styl/config/_mixins.styl index 7dbb788..bf1b834 100644 --- a/styl/config/_mixins.styl +++ b/styl/config/_mixins.styl @@ -30,22 +30,3 @@ respond-to(value) @media screen and string {block} */ - -displayFlex() - display: -webkit-box - display: -ms-flexbox - display: flex - -box-orient() - -webkit-box-orient arguments - -box-direction() - -webkit-box-direction arguments - -flex-direction() - -ms-flex-direction arguments - flex-direction arguments - -flex-wrap() - -ms-flex-wrap arguments - flex-wrap arguments diff --git a/styl/grids/_grillade.styl b/styl/grids/_grillade.styl index a8191ee..368e672 100644 --- a/styl/grids/_grillade.styl +++ b/styl/grids/_grillade.styl @@ -25,7 +25,7 @@ iefix = 0.01px grid(grid-number = 1, own-gutter = 0) & > * width 'calc(100% / %s - %s)' % (grid-number iefix) - for key, size in grid-gutters + for key, size in grid-gutters &.has-gutter{key} margin-right -(size / 2) margin-left -(size / 2) @@ -33,7 +33,7 @@ grid(grid-number = 1, own-gutter = 0) width 'calc(100% / %s - %s - %s)' % (grid-number size iefix) margin-right (size / 2) margin-left (size / 2) - if own-gutter != 0 + if own-gutter != 0 margin-right (own-gutter / 2) margin-left (own-gutter / 2) @@ -41,9 +41,9 @@ grid(grid-number = 1, own-gutter = 0) @media (min-width: tiny + 1) .grid .grid--reverse - displayFlex() + flexbox(flex) & > * - flex 1 1 0% + flex(1 1 0%) box-sizing border-box min-width 0 min-height 0 @@ -55,7 +55,7 @@ grid(grid-number = 1, own-gutter = 0) @media (min-width: tiny + 1) for i in 2..12 grid-selector = 'grid-%s' % i - [class*={grid-selector}] > * + [class*=\"{grid-selector}\"] grid(i, 0) .push @@ -81,17 +81,17 @@ grid(grid-number = 1, own-gutter = 0) flowToDivid = {'full': 1, 'one-half': 2, 'one-third': 3, 'one-quarter': 4, 'one-fifth': 5, 'one-sixth': 6, 'two-thirds': 3 * 2, 'three-quarters': 4 * 3, 'five-sixths': 6 * 5} for flow, divider in flowToDivid .{flow} - flex 0 0 auto + flex(0 0 auto) width 'calc(100% / %s - %s)' % (divider iefix) for key, size in grid-gutters .has-gutter{key} .{flow} width 'calc(100% / %s - %s - %s)' % (divider size iefix) /* Responsive Small Breakpoint */ -@media (min-width: tiny + 1) and (max-width: small) +@media (min-width: tiny + 1) and (max-width: medium) for i in 1..4 index = '-small-%s' % i - [class*={index}] + [class*=\"{index}\"] & > * width: 'calc(100% / %s - %s)' % (i iefix) for key, size in grid-gutters diff --git a/styl/utilities/_layout.styl b/styl/utilities/_layout.styl index 4bae1a2..1f9b4eb 100644 --- a/styl/utilities/_layout.styl +++ b/styl/utilities/_layout.styl @@ -1,7 +1,7 @@ /* ----------------------------- */ /* ==Global Layout */ /* ----------------------------- */ - +@import '../vendor/flexbox-stylus/stylus/flexbox.styl' /* module, gains superpower "BFC" Block Formating Context */ .mod .bfc @@ -66,16 +66,16 @@ img.{kna-namespace}fr http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html */ -[class*="{kna-namespace}flex-container"] +[class*={kna-namespace}"flex-container"] .{kna-namespace}flex-container - display flex - flex-wrap wrap + flexbox(flex) + flex-wrap(wrap) .{kna-namespace}flex-container-h - flex-direction row + flex-direction(row) .{kna-namespace}flex-container-v - flex-direction column + flex-direction(column) .{kna-namespace}flex-item-fluid flex 1 From 9c8b9f870e74c7c5bde9c758ef9b75c3aa9b25d3 Mon Sep 17 00:00:00 2001 From: Arnaud CARIOU Date: Thu, 9 Mar 2017 14:33:39 +0100 Subject: [PATCH 6/6] add doc --- README.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/README.md b/README.md index 2e4bd2e..35cb321 100644 --- a/README.md +++ b/README.md @@ -56,6 +56,23 @@ Vous pouvez également inclure ou non les fichiers partiels qui vous intéressen Téléchargez [KNACSS complet](https://github.com/alsacreations/KNACSS/archive/master.zip) pour bénéficier de toute l'architecture de l'outil, avec les fichiers Sass, package.json et gulpfile.js si nécessaires. +### Vous préférez Stylus ? + +KNACSS possède une version adapté au préprocesseur Stylus. + +Les fichiers de configuration se trouvent dans le [dossier de configuration](https://github.com/alsacreations/KNACSS/tree/v6/styl/config). + +Pour compiler cette version vous devez lancer les commandes : +``` +npm install && gulp styluscss +``` +Ceci génèrera le fichier non compressé. +Et + ``` + npm install && gulp styluscssmin + ``` + pour la version minifié, qui se trouverons dans le répertoire `./css/stylus/` + ### Installation via Bower, npm ou yarn - via [Bower](http://bower.io/) : `bower install knacss`