From 2aa7f8cb9db8d730d0eea9bf406c35d7f6645c64 Mon Sep 17 00:00:00 2001 From: Arnaud CARIOU Date: Thu, 16 Mar 2017 15:12:06 +0100 Subject: [PATCH] =?UTF-8?q?Restauration=20du=20$=20avant=20les=20variables?= =?UTF-8?q?=20pour=20des=20raisons=20de=20compatibilit=C3=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .stylintrc | 20 +++ css/stylus/knacss-unminified.css | 10 +- styl/config/_breakpoints.styl | 10 +- styl/config/_mixins.styl | 44 +++--- styl/config/_variables.styl | 68 ++++----- styl/grids/_grillade.styl | 80 +++++------ styl/knacss.styl | 20 +-- styl/library/_base.styl | 80 +++++------ styl/library/_forms.styl | 10 +- styl/library/_misc.styl | 6 +- styl/library/_print.styl | 26 ++-- styl/library/_styling.styl | 8 +- styl/library/_tables.styl | 10 +- styl/objects/_autogrid.styl | 4 +- styl/objects/_media.styl | 4 +- styl/utilities/_helpers.styl | 228 +++++++++++++++---------------- styl/utilities/_layout.styl | 58 ++++---- styl/utilities/_responsive.styl | 126 ++++++++--------- 18 files changed, 416 insertions(+), 396 deletions(-) create mode 100644 .stylintrc diff --git a/.stylintrc b/.stylintrc new file mode 100644 index 0000000..becfe45 --- /dev/null +++ b/.stylintrc @@ -0,0 +1,20 @@ +{ + "brackets": false, + "colons": 'always', + "commentSpace": false, + "depthLimit": 4, + "exclude": ["node_modules/**/*"], + "globalDupe": true, + "groupOutputByFile": true, + "namingConvention": "lowercase-dash", + "noImportant": false, + "placeholders": "always", + "prefixVarsWithDollar": "always", + "quotePref": false, + "reporterOptions": { + "columns": ["lineData", "severity", "description", "rule"], + "columnSplitter": " ", + "showHeaders": false, + "truncate": true + } +} diff --git a/css/stylus/knacss-unminified.css b/css/stylus/knacss-unminified.css index 7c75115..7e48b9d 100644 --- a/css/stylus/knacss-unminified.css +++ b/css/stylus/knacss-unminified.css @@ -268,7 +268,7 @@ details, figure { margin-top: 0.75em; margin-bottom: 0; - line-height: 1.5; + line-height: line-height; } h1 .h1-like { font-size: 3.2rem; @@ -443,9 +443,9 @@ code { } pre code { padding: 0; + border-radius: 0; background: none; color: inherit; - border-radius: 0; } mark { padding: 2px 4px; @@ -466,7 +466,7 @@ blockquote { min-height: 2em; } blockquote::before { - content: "\201C"; + content: '\201C'; position: absolute; left: 0; top: 0; @@ -488,11 +488,11 @@ q { font-style: normal; } q, -.q { +.kna-namespaceq { quotes: "“\00a0" "\00a0”"; } q:lang(fr), -.q:lang(fr) { +.kna-namespaceq:lang(fr) { quotes: "«\00a0" "\00a0»"; } hr { diff --git a/styl/config/_breakpoints.styl b/styl/config/_breakpoints.styl index e1e9221..48cdbf5 100644 --- a/styl/config/_breakpoints.styl +++ b/styl/config/_breakpoints.styl @@ -2,8 +2,8 @@ // 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 +$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 index bf1b834..ee81e0f 100644 --- a/styl/config/_mixins.styl +++ b/styl/config/_mixins.styl @@ -1,27 +1,27 @@ // Additionnal "utility" breakpoints aliases // ex. @include respond-to("medium-up") {...} -breakpoint(bp) - if bp == 'tiny' - return '(max-width: %s)' % tiny - else if bp == 'small' - return '(max-width: %s)' % small - else if bp == 'medium' - return '(max-width: %s)' % medium - else if bp == 'large' - return '(max-width: %s)' % large - else if bp == 'extra-large' - return '(max-width: %s)' % extra-large - else if bp == 'tiny-up' - return '(min-width: %s + 1)' % tiny - else if bp == 'small-up' - return '(min-width: %s + 1)' % small - else if bp == 'medium-up' - return '(min-width: %s + 1)' % medium - else if bp == 'large-up' - return '(min-width: %s + 1)' % large - else if bp == 'extra-large-up' - return '(min-width: %s + 1)' % extra-large - else if bp == 'retina' +breakpoint($bp) + if $bp == 'tiny' + return '(max-width: %s)' % $tiny + else if $bp == 'small' + return '(max-width: %s)' % $small + else if $bp == 'medium' + return '(max-width: %s)' % $medium + else if $bp == 'large' + return '(max-width: %s)' % $large + else if $bp == 'extra-large' + return '(max-width: %s)' % $extra-large + else if $bp == 'tiny-up' + return '(min-width: %s + 1)' % $tiny + else if $bp == 'small-up' + return '(min-width: %s + 1)' % $small + else if $bp == 'medium-up' + return '(min-width: %s + 1)' % $medium + else if $bp == 'large-up' + return '(min-width: %s + 1)' % $large + else if $bp == 'extra-large-up' + return '(min-width: %s + 1)' % $extra-large + else if $bp == 'retina' return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)' /* diff --git a/styl/config/_variables.styl b/styl/config/_variables.styl index 7ddde94..8a06f69 100644 --- a/styl/config/_variables.styl +++ b/styl/config/_variables.styl @@ -1,50 +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" +$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 +$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 +$color1 = #000 +$color2 = #fff +$color3 = #333 +$color4 = #000 +$color5 = #6FA939 // colors used in project -base-color = color1 -link-color = color3 -base-background = color2 +$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 +$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 +$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; +$kna-namespace = null; diff --git a/styl/grids/_grillade.styl b/styl/grids/_grillade.styl index 368e672..6d8240d 100644 --- a/styl/grids/_grillade.styl +++ b/styl/grids/_grillade.styl @@ -4,12 +4,12 @@ @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 } +$grid-gutters = { '': 1rem, '-l': 2rem, '-xl': 4rem } // IEfixing, see // https://github.com/alsacreations/KNACSS/issues/133; -iefix = 0.01px +$iefix = 0.01px -@media (min-width: tiny + 1) +@media (min-width: $tiny + 1) [class*=" grid-"] [class^="grid-"] flexbox(flex) @@ -22,23 +22,23 @@ iefix = 0.01px // Multi-line grid constructor // example : .grid-perso { @include grid(12, 3rem); } -grid(grid-number = 1, own-gutter = 0) +grid($grid-number = 1, $own-gutter = 0) & > * - 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) + 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) & > * - 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) + 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) +@media (min-width: $tiny + 1) .grid .grid--reverse flexbox(flex) @@ -47,16 +47,16 @@ grid(grid-number = 1, own-gutter = 0) box-sizing border-box min-width 0 min-height 0 - for key, size in grid-gutters - &.has-gutter{key} > * + * - margin-left 'calc(%s - %s)' % (size iefix) + for $key, $size in $grid-gutters + &.has-gutter{$key} > * + * + margin-left 'calc(%s - %s)' % ($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) +@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 @@ -77,23 +77,23 @@ grid(grid-number = 1, own-gutter = 0) [class*="grid-"][class*="--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} - for flow, divider in flowToDivid - .{flow} +@media (min-width: $tiny + 1) + $flow-to-divid = {'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 $flow-to-divid + .{$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) + 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: medium) - for i in 1..4 - index = '-small-%s' % i - [class*=\"{index}\"] +@media (min-width: $tiny + 1) and (max-width: $medium) + 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) + 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) diff --git a/styl/knacss.styl b/styl/knacss.styl index 0374b38..9662022 100644 --- a/styl/knacss.styl +++ b/styl/knacss.styl @@ -38,21 +38,21 @@ @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 +@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 +@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 +@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 +@import 'grids/_grillade.styl' // grids /* ----------------------------- */ @@ -61,4 +61,4 @@ /* Here should go your own CSS styles */ // You can also link them with a Sass @import -// @import "my-styles"; +// @import "my-styles" diff --git a/styl/library/_base.styl b/styl/library/_base.styl index 646a1a0..ab3308d 100644 --- a/styl/library/_base.styl +++ b/styl/library/_base.styl @@ -17,22 +17,22 @@ html 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 + 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 + 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) ) + if $link-hover-color is defined // && ( null == list( (link-color, null, false), link-hover-color) ) &:focus, &:hover, &:active - color link-hover-color + color $link-hover-color ul ol @@ -48,7 +48,7 @@ figure /* font-sizing for content */ p -.{kna-namespace}p-like +.{$kna-namespace}p-like ul ol dl @@ -65,42 +65,42 @@ figure 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 +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 +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 +h3 .{$kna-namespace}h3-like + font-size $h3-size -h4 .{kna-namespace}h4-like - font-size h4-size +h4 .{$kna-namespace}h4-like + font-size $h4-size -h5 .{kna-namespace}h5-like - font-size h5-size +h5 .{$kna-namespace}h5-like + font-size $h5-size -h6 .{kna-namespace}h6-like - font-size h6-size +h6 .{$kna-namespace}h6-like + font-size $h6-size /* alternate font-sizing */ -.{kna-namespace}smaller +.{$kna-namespace}smaller font-size 0.6em -.{kna-namespace}small +.{$kna-namespace}small font-size 0.8em -.{kna-namespace}big +.{$kna-namespace}big font-size 1.2em -.{kna-namespace}bigger +.{$kna-namespace}bigger font-size: 1.5em -.{kna-namespace}biggest +.{$kna-namespace}biggest font-size 2em code @@ -110,11 +110,11 @@ kbd /* IE fix */ white-space pre-line white-space pre-wrap - font-family font-stack-monospace + font-family $font-stack-monospace line-height normal em -.{kna-namespace}italic +.{$kna-namespace}italic address cite i @@ -123,30 +123,30 @@ var /* avoid top margins on first content element */ p -.{kna-namespace}p-like +.{$kna-namespace}p-like ul ol dl blockquote pre h1 -.{kna-namespace}h1-like +.{$kna-namespace}h1-like h2 -.{kna-namespace}h2-like +.{$kna-namespace}h2-like h3 -.{kna-namespace}h3-like +.{$kna-namespace}h3-like h4 -.{kna-namespace}h4-like +.{$kna-namespace}h4-like h5 -.{kna-namespace}h5-like +.{$kna-namespace}h5-like h6 -.{kna-namespace}h6-like +.{$kna-namespace}h6-like &:first-child margin-top 0 /* avoid margins on nested elements */ li p -li .{kna-namespace}p-like +li .{$kna-namespace}p-like li ul li ol margin-top 0 diff --git a/styl/library/_forms.styl b/styl/library/_forms.styl index 0830e75..dd25362 100644 --- a/styl/library/_forms.styl +++ b/styl/library/_forms.styl @@ -7,7 +7,7 @@ */ /* buttons */ -.{kna-namespace}btn +.{$kna-namespace}btn display inline-block /* forms items */ @@ -19,7 +19,7 @@ input button select label -.{kna-namespace}btn +.{$kna-namespace}btn font-family inherit font-size inherit @@ -28,7 +28,7 @@ input optgroup select textarea - color base-color + color $base-color label vertical-align middle @@ -66,7 +66,7 @@ input:-moz-placeholder textarea:-moz-placeholder color #777 -.{kna-namespace}btn +.{$kna-namespace}btn input[type="button"] button &:focus @@ -82,7 +82,7 @@ button input[type="button"] input[type="submit"] input[type="reset"] - &.{kna-namespace}unstyled + &.{$kna-namespace}unstyled padding 0 border none line-height 1 diff --git a/styl/library/_misc.styl b/styl/library/_misc.styl index e69a384..9f45977 100644 --- a/styl/library/_misc.styl +++ b/styl/library/_misc.styl @@ -3,7 +3,7 @@ /* ----------------------------- */ /* styling skip links */ -.{kna-namespace}skip-links +.{$kna-namespace}skip-links position absolute & a @@ -21,7 +21,7 @@ clip auto // hyphens on tiny screens -@media (max-width: tiny) +@media (max-width: $tiny) /* you shall not pass */ div textarea @@ -35,7 +35,7 @@ hyphens auto // use .no-wrapping to disallow hyphens on tiny screens -@media (max-width: tiny) +@media (max-width: $tiny) .no-wrapping word-wrap normal hyphens manual diff --git a/styl/library/_print.styl b/styl/library/_print.styl index 723c4c0..299ebc0 100644 --- a/styl/library/_print.styl +++ b/styl/library/_print.styl @@ -15,34 +15,34 @@ font-size 12pt p - .{kna-namespace}p-like + .{$kna-namespace}p-like h1 - .{kna-namespace}h1-like + .{$kna-namespace}h1-like h2 - .{kna-namespace}h2-like + .{$kna-namespace}h2-like h3 - .{kna-namespace}h3-like + .{$kna-namespace}h3-like h4 - .{kna-namespace}h4-like + .{$kna-namespace}h4-like h5 - .{kna-namespace}h5-like + .{$kna-namespace}h5-like h6 - .{kna-namespace}h6-like + .{$kna-namespace}h6-like blockquote ul ol color #000 margin auto - .{kna-namespace}print + .{$kna-namespace}print display block - .{kna-namespace}no-print + .{$kna-namespace}no-print display none /* no orphans, no widows */ p - .{kna-namespace}p-like + .{$kna-namespace}p-like blockquote orphans 3 widows 3 @@ -61,11 +61,11 @@ /* no breaks after these elements */ h1 - .{kna-namespace}h1-like + .{$kna-namespace}h1-like h2 - .{kna-namespace}h2-like + .{$kna-namespace}h2-like h3 - .{kna-namespace}h3-like + .{$kna-namespace}h3-like caption page-break-after avoid diff --git a/styl/library/_styling.styl b/styl/library/_styling.styl index 216c02f..fd6dade 100644 --- a/styl/library/_styling.styl +++ b/styl/library/_styling.styl @@ -19,9 +19,9 @@ code pre code padding 0 + border-radius 0 background none color inherit - border-radius 0 mark padding 2px 4px @@ -42,7 +42,7 @@ blockquote min-height 2em blockquote::before - content "\201C" + content '\201C' position absolute left 0 top 0 @@ -82,11 +82,11 @@ hr /* tables */ table -.{kna-namespace}table +.{$kna-namespace}table border 1px solid #ccc caption - padding small-value + padding $small-value color #555 font-style italic diff --git a/styl/library/_tables.styl b/styl/library/_tables.styl index 6556957..12dae8f 100644 --- a/styl/library/_tables.styl +++ b/styl/library/_tables.styl @@ -3,23 +3,23 @@ /* ----------------------------- */ table -.{kna-namespace}table +.{$kna-namespace}table width 100% max-width 100% table-layout fixed border-collapse collapse vertical-align top - margin-bottom medium-value + margin-bottom $medium-value -.{kna-namespace}table +.{$kna-namespace}table display table #recaptcha_table -.{kna-namespace}table-auto +.{$kna-namespace}table-auto table-layout auto td th vertical-align top - min-width medium-value + min-width $medium-value cursor default diff --git a/styl/objects/_autogrid.styl b/styl/objects/_autogrid.styl index 8383f8a..34fc5d8 100644 --- a/styl/objects/_autogrid.styl +++ b/styl/objects/_autogrid.styl @@ -1,6 +1,6 @@ /* Autogrid object */ /* see http://codepen.io/raphaelgoetter/pen/KMgBJd */ -@media (min-width: (tiny + 1)) +@media (min-width: ($tiny + 1)) [class^="autogrid"] [class*=" autogrid"] display flex @@ -11,7 +11,7 @@ min-width 0 /* avoid min-width:auto */ /* Autogrid variants */ -@media (min-width: (tiny + 1)) +@media (min-width: ($tiny + 1)) .has-gutter > *:not(:first-child) margin-left 1rem diff --git a/styl/objects/_media.styl b/styl/objects/_media.styl index 04ca114..41937f7 100644 --- a/styl/objects/_media.styl +++ b/styl/objects/_media.styl @@ -1,6 +1,6 @@ /* Media object */ /* see http://codepen.io/raphaelgoetter/pen/KMWWwj */ -@media (min-width: (tiny + 1)) +@media (min-width: ($tiny + 1)) .o-media display flex align-items flex-start @@ -10,7 +10,7 @@ min-width 0 /* avoid min-width:auto */ /* Media variants */ -@media (min-width: (tiny + 1)) +@media (min-width: ($tiny + 1)) .o-media--reverse flex-direction row-reverse diff --git a/styl/utilities/_helpers.styl b/styl/utilities/_helpers.styl index 175074a..03ea1da 100644 --- a/styl/utilities/_helpers.styl +++ b/styl/utilities/_helpers.styl @@ -38,241 +38,241 @@ ul /* ------------- */ /* blocks widths (percentage and pixels) */ -.{kna-namespace}w10 +.{$kna-namespace}w10 width 10% -.{kna-namespace}w20 +.{$kna-namespace}w20 width 20% -.{kna-namespace}w25 +.{$kna-namespace}w25 width 25% -.{kna-namespace}w30 +.{$kna-namespace}w30 width 30% -.{kna-namespace}w33 +.{$kna-namespace}w33 width 33.3333% -.{kna-namespace}w40 +.{$kna-namespace}w40 width 40% -.{kna-namespace}w50 +.{$kna-namespace}w50 width 50% -.{kna-namespace}w60 +.{$kna-namespace}w60 width 60% -.{kna-namespace}w66 +.{$kna-namespace}w66 width 66.6666% -.{kna-namespace}w70 +.{$kna-namespace}w70 width 70% -.{kna-namespace}w75 +.{$kna-namespace}w75 width 75% -.{kna-namespace}w80 +.{$kna-namespace}w80 width 80% -.{kna-namespace}w90 +.{$kna-namespace}w90 width 90% -.{kna-namespace}w100 +.{$kna-namespace}w100 width 100% -.{kna-namespace}w50p +.{$kna-namespace}w50p width 50px -.{kna-namespace}w100p +.{$kna-namespace}w100p width 100px -.{kna-namespace}w150p +.{$kna-namespace}w150p width 150px -.{kna-namespace}w200p +.{$kna-namespace}w200p width 200px -.{kna-namespace}w300p +.{$kna-namespace}w300p width 300px @media (min-width: 401px) - .{kna-namespace}w400p + .{$kna-namespace}w400p width 400px - .{kna-namespace}w500p + .{$kna-namespace}w500p width 500px - .{kna-namespace}w600p + .{$kna-namespace}w600p width 600px @media (min-width: 701px) - .{kna-namespace}w700p + .{$kna-namespace}w700p width 700px - .{kna-namespace}w800p + .{$kna-namespace}w800p width 800px @media (min-width: 961px) - .{kna-namespace}w960p + .{$kna-namespace}w960p width 960px - .{kna-namespace}mw960p + .{$kna-namespace}mw960p max-width 960px - .{kna-namespace}w1140p + .{$kna-namespace}w1140p width 1140px - .{kna-namespace}mw1140p + .{$kna-namespace}mw1140p max-width 1140px -.{kna-namespace}wauto +.{$kna-namespace}wauto width auto /* Spacing Helpers */ /* --------------- */ -.{kna-namespace}man -.{kna-namespace}ma0 +.{$kna-namespace}man +.{$kna-namespace}ma0 margin 0 -.{kna-namespace}pan -.{kna-namespace}pa0 +.{$kna-namespace}pan +.{$kna-namespace}pa0 padding 0 -.{kna-namespace}mas - margin small-value +.{$kna-namespace}mas + margin $small-value -.{kna-namespace}mam - margin medium-value +.{$kna-namespace}mam + margin $medium-value -.{kna-namespace}mal - margin large-value +.{$kna-namespace}mal + margin $large-value -.{kna-namespace}pas - padding small-value +.{$kna-namespace}pas + padding $small-value -.{kna-namespace}pam - padding medium-value +.{$kna-namespace}pam + padding $medium-value -.{kna-namespace}pal - padding large-value +.{$kna-namespace}pal + padding $large-value -.{kna-namespace}mtn -.{kna-namespace}mt0 +.{$kna-namespace}mtn +.{$kna-namespace}mt0 margin-top 0 -.{kna-namespace}mts - margin-top small-value +.{$kna-namespace}mts + margin-top $small-value -.{kna-namespace}mtm - margin-top medium-value +.{$kna-namespace}mtm + margin-top $medium-value -.{kna-namespace}mtl - margin-top large-value +.{$kna-namespace}mtl + margin-top $large-value -.{kna-namespace}mrn -.{kna-namespace}mr0 +.{$kna-namespace}mrn +.{$kna-namespace}mr0 margin-right 0 -.{kna-namespace}mrs - margin-right small-value +.{$kna-namespace}mrs + margin-right $small-value -.{kna-namespace}mrm - margin-right medium-value +.{$kna-namespace}mrm + margin-right $medium-value -.{kna-namespace}mrl - margin-right large-value +.{$kna-namespace}mrl + margin-right $large-value -.{kna-namespace}mbn -.{kna-namespace}mb0 +.{$kna-namespace}mbn +.{$kna-namespace}mb0 margin-bottom 0 -.{kna-namespace}mbs - margin-bottom small-value +.{$kna-namespace}mbs + margin-bottom $small-value -.{kna-namespace}mbm - margin-bottom medium-value +.{$kna-namespace}mbm + margin-bottom $medium-value -.{kna-namespace}mbl - margin-bottom large-value +.{$kna-namespace}mbl + margin-bottom $large-value -.{kna-namespace}mln -.{kna-namespace}ml0 +.{$kna-namespace}mln +.{$kna-namespace}ml0 margin-left 0 -.{kna-namespace}mls - margin-left small-value +.{$kna-namespace}mls + margin-left $small-value -.{kna-namespace}mlm - margin-left medium-value +.{$kna-namespace}mlm + margin-left $medium-value -.{kna-namespace}mll - margin-left large-value +.{$kna-namespace}mll + margin-left $large-value -.{kna-namespace}mauto +.{$kna-namespace}mauto margin auto -.{kna-namespace}mtauto +.{$kna-namespace}mtauto margin-top auto -.{kna-namespace}mrauto +.{$kna-namespace}mrauto margin-right auto -.{kna-namespace}mbauto +.{$kna-namespace}mbauto margin-bottom auto -.{kna-namespace}mlauto +.{$kna-namespace}mlauto margin-left: auto -.{kna-namespace}ptn -.{kna-namespace}pt0 +.{$kna-namespace}ptn +.{$kna-namespace}pt0 padding-top 0 -.{kna-namespace}pts - padding-top small-value +.{$kna-namespace}pts + padding-top $small-value -.{kna-namespace}ptm - padding-top medium-value +.{$kna-namespace}ptm + padding-top $medium-value -.{kna-namespace}ptl - padding-top large-value +.{$kna-namespace}ptl + padding-top $large-value -.{kna-namespace}prn -.{kna-namespace}pr0 +.{$kna-namespace}prn +.{$kna-namespace}pr0 padding-right 0 -.{kna-namespace}prs - padding-right small-value +.{$kna-namespace}prs + padding-right $small-value -.{kna-namespace}prm - padding-right medium-value +.{$kna-namespace}prm + padding-right $medium-value -.{kna-namespace}prl - padding-right large-value +.{$kna-namespace}prl + padding-right $large-value -.{kna-namespace}pbn -.{kna-namespace}pb0 +.{$kna-namespace}pbn +.{$kna-namespace}pb0 padding-bottom 0 -.{kna-namespace}pbs - padding-bottom small-value +.{$kna-namespace}pbs + padding-bottom $small-value -.{kna-namespace}pbm - padding-bottom medium-value +.{$kna-namespace}pbm + padding-bottom $medium-value -.{kna-namespace}pbl - padding-bottom large-value +.{$kna-namespace}pbl + padding-bottom $large-value -.{kna-namespace}pln -.{kna-namespace}pl0 +.{$kna-namespace}pln +.{$kna-namespace}pl0 padding-left 0 -.{kna-namespace}pls - padding-left small-value +.{$kna-namespace}pls + padding-left $small-value -.{kna-namespace}plm - padding-left medium-value +.{$kna-namespace}plm + padding-left $medium-value -.{kna-namespace}pll - padding-left large-value +.{$kna-namespace}pll + padding-left $large-value diff --git a/styl/utilities/_layout.styl b/styl/utilities/_layout.styl index 1f9b4eb..ab0b9cc 100644 --- a/styl/utilities/_layout.styl +++ b/styl/utilities/_layout.styl @@ -20,45 +20,45 @@ border-collapse collapse /* simple blocks alignment */ -.{kna-namespace}left +.{$kna-namespace}left margin-right auto -.{kna-namespace}right +.{$kna-namespace}right margin-left auto -.{kna-namespace}center +.{$kna-namespace}center margin-left auto margin-right auto /* text and contents alignment */ -.{kna-namespace}txtleft +.{$kna-namespace}txtleft text-align left -.{kna-namespace}txtright +.{$kna-namespace}txtright text-align right -.{kna-namespace}txtcenter +.{$kna-namespace}txtcenter text-align center /* floating elements */ -.{kna-namespace}fl +.{$kna-namespace}fl float left -img.{kna-namespace}fl - margin-right small-value +img.{$kna-namespace}fl + margin-right $small-value -.{kna-namespace}fr +.{$kna-namespace}fr float right -img.{kna-namespace}fr - margin-left small-value +img.{$kna-namespace}fr + margin-left $small-value -img.{kna-namespace}fl -img.{kna-namespace}fr - margin-bottom tiny-value +img.{$kna-namespace}fl +img.{$kna-namespace}fr + margin-bottom $tiny-value /* inline-block */ -.{kna-namespace}inbl +.{$kna-namespace}inbl display inline-block vertical-align top @@ -66,33 +66,33 @@ img.{kna-namespace}fr http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html */ -[class*={kna-namespace}"flex-container"] -.{kna-namespace}flex-container +[class*=\"{$kna-namespace}flex-container\"] +.{$kna-namespace}flex-container flexbox(flex) flex-wrap(wrap) -.{kna-namespace}flex-container-h +.{$kna-namespace}flex-container-h flex-direction(row) -.{kna-namespace}flex-container-v +.{$kna-namespace}flex-container-v flex-direction(column) -.{kna-namespace}flex-item-fluid +.{$kna-namespace}flex-item-fluid flex 1 min-width 0 -.{kna-namespace}flex-item-first -.{kna-namespace}item-first +.{$kna-namespace}flex-item-first +.{$kna-namespace}item-first order -1 -.{kna-namespace}flex-item-medium -.{kna-namespace}item-medium +.{$kna-namespace}flex-item-medium +.{$kna-namespace}item-medium order 0 -.{kna-namespace}flex-item-last -.{kna-namespace}item-last +.{$kna-namespace}flex-item-last +.{$kna-namespace}item-last order 1 -.{kna-namespace}flex-item-center -.{kna-namespace}item-center +.{$kna-namespace}flex-item-center +.{$kna-namespace}item-center margin auto diff --git a/styl/utilities/_responsive.styl b/styl/utilities/_responsive.styl index 4996461..b26ae0e 100644 --- a/styl/utilities/_responsive.styl +++ b/styl/utilities/_responsive.styl @@ -5,41 +5,41 @@ /* large screens */ /* ------------- */ -@media (min-width: (medium + 1)) +@media (min-width: ($medium + 1)) /* layouts for large screens */ - .{kna-namespace}large-hidden + .{$kna-namespace}large-hidden display none !important - .{kna-namespace}large-visible + .{$kna-namespace}large-visible display block !important - .{kna-namespace}large-no-float + .{$kna-namespace}large-no-float float none - .{kna-namespace}large-inbl + .{$kna-namespace}large-inbl display inline-block float none vertical-align top /* widths for large screens */ - .{kna-namespace}large-w25 + .{$kna-namespace}large-w25 width 25% !important - .{kna-namespace}large-w33 + .{$kna-namespace}large-w33 width 33.333333% !important - .{kna-namespace}large-w50 + .{$kna-namespace}large-w50 width 50% !important - .{kna-namespace}large-w66 + .{$kna-namespace}large-w66 width 66.666666% !important - .{kna-namespace}large-w75 + .{$kna-namespace}large-w75 width 75% !important - .{kna-namespace}large-w100 - .{kna-namespace}large-wauto + .{$kna-namespace}large-w100 + .{$kna-namespace}large-wauto display block !important float none !important clear none !important @@ -49,48 +49,48 @@ border 0 /* margins for large screens */ - .{kna-namespace}large-man - .{kna-namespace}large-ma0 + .{$kna-namespace}large-man + .{$kna-namespace}large-ma0 margin 0 !important /* medium screens */ /* -------------- */ -@media (min-width: (small + 1)) and (max-width: large) +@media (min-width: ($small + 1)) and (max-width: $large) /* layouts for medium screens */ - .{kna-namespace}medium-hidden + .{$kna-namespace}medium-hidden display none !important - .{kna-namespace}medium-visible + .{$kna-namespace}medium-visible display block !important - .{kna-namespace}medium-no-float + .{$kna-namespace}medium-no-float float none - .{kna-namespace}medium-inbl + .{$kna-namespace}medium-inbl display inline-block float none vertical-align top /* widths for medium screens */ - .{kna-namespace}medium-w25 + .{$kna-namespace}medium-w25 width 25% !important - .{kna-namespace}medium-w33 + .{$kna-namespace}medium-w33 width 33.333333% !important - .{kna-namespace}medium-w50 + .{$kna-namespace}medium-w50 width 50% !important - .{kna-namespace}medium-w66 + .{$kna-namespace}medium-w66 width 66.666666% !important - .{kna-namespace}medium-w75 + .{$kna-namespace}medium-w75 width 75% !important - .{kna-namespace}medium-w100 - .{kna-namespace}medium-wauto + .{$kna-namespace}medium-w100 + .{$kna-namespace}medium-wauto display block !important float none !important clear none !important @@ -100,48 +100,48 @@ border 0 /* margins for medium screens */ - .{kna-namespace}medium-man - .{kna-namespace}medium-ma0 + .{$kna-namespace}medium-man + .{$kna-namespace}medium-ma0 margin 0 !important /* small screens */ /* ------------- */ -@media (min-width: (tiny + 1)) and (max-width: small) +@media (min-width: ($tiny + 1)) and (max-width: $small) /* layouts for small screens */ - .{kna-namespace}small-hidden + .{$kna-namespace}small-hidden display none !important - .{kna-namespace}small-visible + .{$kna-namespace}small-visible display block !important - .{kna-namespace}small-no-float + .{$kna-namespace}small-no-float float none - .{kna-namespace}small-inbl + .{$kna-namespace}small-inbl display inline-block float none vertical-align top /* widths for small screens */ - .{kna-namespace}small-w25 + .{$kna-namespace}small-w25 width 25% !important - .{kna-namespace}small-w33 + .{$kna-namespace}small-w33 width 33.333333% !important - .{kna-namespace}small-w50 + .{$kna-namespace}small-w50 width 50% !important - .{kna-namespace}small-w66 + .{$kna-namespace}small-w66 width 66.666666% !important - .{kna-namespace}small-w75 + .{$kna-namespace}small-w75 width 75% !important - .{kna-namespace}small-w100 - .{kna-namespace}small-wauto + .{$kna-namespace}small-w100 + .{$kna-namespace}small-wauto display block !important float none !important clear none !important @@ -151,22 +151,22 @@ border 0 /* margins for small screens */ - .{kna-namespace}small-man - .{kna-namespace}small-ma0 + .{$kna-namespace}small-man + .{$kna-namespace}small-ma0 margin 0 !important - .{kna-namespace}small-pan - .{kna-namespace}small-pa0 + .{$kna-namespace}small-pan + .{$kna-namespace}small-pa0 padding 0 !important /* tiny screens */ /* ------------ */ -@media (max-width: tiny) +@media (max-width: $tiny) /* quick small resolution reset */ - .{kna-namespace}mod - .{kna-namespace}col + .{$kna-namespace}mod + .{$kna-namespace}col fieldset display block !important float none !important @@ -176,42 +176,42 @@ margin-right 0 !important border 0 - .{kna-namespace}flex-container + .{$kna-namespace}flex-container flex-direction column /* layouts for tiny screens */ - .{kna-namespace}tiny-hidden + .{$kna-namespace}tiny-hidden display none !important - .{kna-namespace}tiny-visible + .{$kna-namespace}tiny-visible display block !important - .{kna-namespace}tiny-no-float + .{$kna-namespace}tiny-no-float float none - .{kna-namespace}tiny-inbl + .{$kna-namespace}tiny-inbl display inline-block float none vertical-align top /* widths for tiny screens */ - .{kna-namespace}tiny-w25 + .{$kna-namespace}tiny-w25 width 25% !important - .{kna-namespace}tiny-w33 + .{$kna-namespace}tiny-w33 width 33.333333% !important - .{kna-namespace}tiny-w50 + .{$kna-namespace}tiny-w50 width 50% !important - .{kna-namespace}tiny-w66 + .{$kna-namespace}tiny-w66 width 66.666666% !important - .{kna-namespace}tiny-w75 + .{$kna-namespace}tiny-w75 width 75% !important - .{kna-namespace}tiny-w100 - .{kna-namespace}tiny-wauto + .{$kna-namespace}tiny-w100 + .{$kna-namespace}tiny-wauto display block !important float none !important clear none !important @@ -221,10 +221,10 @@ border 0 /* margins for tiny screens */ - .{kna-namespace}tiny-man - .{kna-namespace}tiny-ma0 + .{$kna-namespace}tiny-man + .{$kna-namespace}tiny-ma0 margin 0 !important - .{kna-namespace}tiny-pan - .{kna-namespace}tiny-pa0 + .{$kna-namespace}tiny-pan + .{$kna-namespace}tiny-pa0 padding 0 !important