From 7a8701c929ee0429ee680be3969ee4d58fdd7390 Mon Sep 17 00:00:00 2001 From: Arnaud CARIOU Date: Mon, 6 Mar 2017 17:35:08 +0100 Subject: [PATCH] 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 */ +}