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

Restauration du $ avant les variables pour des raisons de compatibilité

Browse source
This commit is contained in:
Arnaud CARIOU 2017-03-16 15:12:06 +01:00
parent 7e97249bae
commit 2aa7f8cb9d
18 changed files with 416 additions and 396 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
.stylintrc Normal file
View file

@ -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
}
}

10
css/stylus/knacss-unminified.css
View file

@ -268,7 +268,7 @@ details,
figure { figure {
margin-top: 0.75em; margin-top: 0.75em;
margin-bottom: 0; margin-bottom: 0;
line-height: 1.5; line-height: line-height;
} }
h1 .h1-like { h1 .h1-like {
font-size: 3.2rem; font-size: 3.2rem;
@ -443,9 +443,9 @@ code {
} }
pre code { pre code {
padding: 0; padding: 0;
border-radius: 0;
background: none; background: none;
color: inherit; color: inherit;
border-radius: 0;
} }
mark { mark {
padding: 2px 4px; padding: 2px 4px;
@ -466,7 +466,7 @@ blockquote {
min-height: 2em; min-height: 2em;
} }
blockquote::before { blockquote::before {
content: "\201C"; content: '\201C';
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
@ -488,11 +488,11 @@ q {
font-style: normal; font-style: normal;
} }
q, q,
.q { .kna-namespaceq {
quotes: "“\00a0" "\00a0”"; quotes: "“\00a0" "\00a0”";
} }
q:lang(fr), q:lang(fr),
.q:lang(fr) { .kna-namespaceq:lang(fr) {
quotes: "«\00a0" "\00a0»"; quotes: "«\00a0" "\00a0»";
} }
hr { hr {

10
styl/config/_breakpoints.styl
View file

@ -2,8 +2,8 @@
// Warning : you should use your own values, regardless of the devices // Warning : you should use your own values, regardless of the devices
// Best practise : (max-width: $BP) and (min-width: ($BP + 1)) // Best practise : (max-width: $BP) and (min-width: ($BP + 1))
tiny = 543px // or 'em' if you prefer, of course $tiny = 543px // or 'em' if you prefer, of course
small = 767px $small = 767px
medium = 991px $medium = 991px
large = 1199px $large = 1199px
extra-large = 1439px $extra-large = 1439px

44
styl/config/_mixins.styl
View file

@ -1,27 +1,27 @@
// Additionnal "utility" breakpoints aliases // Additionnal "utility" breakpoints aliases
// ex. @include respond-to("medium-up") {...} // ex. @include respond-to("medium-up") {...}
breakpoint(bp) breakpoint($bp)
if bp == 'tiny' if $bp == 'tiny'
return '(max-width: %s)' % tiny return '(max-width: %s)' % $tiny
else if bp == 'small' else if $bp == 'small'
return '(max-width: %s)' % small return '(max-width: %s)' % $small
else if bp == 'medium' else if $bp == 'medium'
return '(max-width: %s)' % medium return '(max-width: %s)' % $medium
else if bp == 'large' else if $bp == 'large'
return '(max-width: %s)' % large return '(max-width: %s)' % $large
else if bp == 'extra-large' else if $bp == 'extra-large'
return '(max-width: %s)' % extra-large return '(max-width: %s)' % $extra-large
else if bp == 'tiny-up' else if $bp == 'tiny-up'
return '(min-width: %s + 1)' % tiny return '(min-width: %s + 1)' % $tiny
else if bp == 'small-up' else if $bp == 'small-up'
return '(min-width: %s + 1)' % small return '(min-width: %s + 1)' % $small
else if bp == 'medium-up' else if $bp == 'medium-up'
return '(min-width: %s + 1)' % medium return '(min-width: %s + 1)' % $medium
else if bp == 'large-up' else if $bp == 'large-up'
return '(min-width: %s + 1)' % large return '(min-width: %s + 1)' % $large
else if bp == 'extra-large-up' else if $bp == 'extra-large-up'
return '(min-width: %s + 1)' % extra-large return '(min-width: %s + 1)' % $extra-large
else if bp == 'retina' else if $bp == 'retina'
return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)' return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)'
/* /*

68
styl/config/_variables.styl
View file

@ -1,50 +1,50 @@
// Config file and project variables // Config file and project variables
// font sizes // font sizes
base-font-size = 1.6rem // ex. 1.6rem would be "16px" equivalent $base-font-size = 1.6rem // ex. 1.6rem would be "16px" equivalent
line-height = 1.5 // equiv line-height 1.5 $line-height = 1.5 // equiv line-height 1.5
h1-size = 3.2rem // equiv "32px" $h1-size = 3.2rem // equiv "32px"
h2-size = 2.8rem // equiv "28px" $h2-size = 2.8rem // equiv "28px"
h3-size = 2.4rem // equiv "24px" $h3-size = 2.4rem // equiv "24px"
h4-size = 2.0rem // equiv "20px" $h4-size = 2.0rem // equiv "20px"
h5-size = 1.8rem // equiv "18px" $h5-size = 1.8rem // equiv "18px"
h6-size = 1.6rem // equiv "16px" $h6-size = 1.6rem // equiv "16px"
// font stacks // font stacks
font-stack-common = sans-serif // common font $font-stack-common = sans-serif // common font
font-stack-headings = sans-serif // headings font $font-stack-headings = sans-serif // headings font
font-stack-monospace = consolas, courier, monospace // monospace font $font-stack-monospace = consolas, courier, monospace // monospace font
// color scheme // color scheme
color1 = #000 $color1 = #000
color2 = #fff $color2 = #fff
color3 = #333 $color3 = #333
color4 = #000 $color4 = #000
color5 = #6FA939 $color5 = #6FA939
// colors used in project // colors used in project
base-color = color1 $base-color = $color1
link-color = color3 $link-color = $color3
base-background = color2 $base-background = $color2
// If you don't want any effect on focused/hovered links, // 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 // comment variable below or make it equal to either link-color or false or null
link-hover-color = color4 $link-hover-color = $color4
brand-primary = color5 $brand-primary = $color5
// spacings (choose unit you prefer) // spacings (choose unit you prefer)
tiny-value = .5rem // tiny value for margins / paddings $tiny-value = .5rem // tiny value for margins / paddings
tiny-plus-value = .7rem // tiny+ value for margins / paddings $tiny-plus-value = .7rem // tiny+ value for margins / paddings
small-value = 1rem // small value for margins / paddings $small-value = 1rem // small value for margins / paddings
small-plus-value = 1.5rem // small+ value for margins / paddings $small-plus-value = 1.5rem // small+ value for margins / paddings
medium-value = 2rem // medium value for margins / paddings $medium-value = 2rem // medium value for margins / paddings
medium-plus-value = 3rem // medium+ value for margins / paddings $medium-plus-value = 3rem // medium+ value for margins / paddings
large-value = 4rem // large value for margins / paddings $large-value = 4rem // large value for margins / paddings
large-plus-value = 6rem // 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-value = 8rem // extra large value for margins / paddings
extra-large-plus-value = 12rem // 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-value = 16rem // ultra large value for margins / paddings
ultra-large-plus-value = 20rem // ultra large value for margins / paddings $ultra-large-plus-value = 20rem // ultra large value for margins / paddings
//kna-namespace (default : null) //kna-namespace (default : null)
kna-namespace = null; $kna-namespace = null;

80
styl/grids/_grillade.styl
View file

@ -4,12 +4,12 @@
@import '../vendor/flexbox-stylus/stylus/flexbox.styl' @import '../vendor/flexbox-stylus/stylus/flexbox.styl'
/* Doc : http://grillade.knacss.com */ /* Doc : http://grillade.knacss.com */
// gutter values for grid layouts. Unit can be: %, px, em, rem // 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 // IEfixing, see
// https://github.com/alsacreations/KNACSS/issues/133; // 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-"]
[class^="grid-"] [class^="grid-"]
flexbox(flex) flexbox(flex)
@ -22,23 +22,23 @@ iefix = 0.01px
// Multi-line grid constructor // Multi-line grid constructor
// example : .grid-perso { @include grid(12, 3rem); } // 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) width 'calc(100% / %s - %s)' % ($grid-number $iefix)
for key, size in grid-gutters for $key, $size in $grid-gutters
&.has-gutter{key} &.has-gutter{$key}
margin-right -(size / 2) margin-right -($size / 2)
margin-left -(size / 2) margin-left -($size / 2)
& > * & > *
width 'calc(100% / %s - %s - %s)' % (grid-number size iefix) width 'calc(100% / %s - %s - %s)' % ($grid-number $size $iefix)
margin-right (size / 2) margin-right ($size / 2)
margin-left (size / 2) margin-left ($size / 2)
if own-gutter != 0 if $own-gutter != 0
margin-right (own-gutter / 2) margin-right ($own-gutter / 2)
margin-left (own-gutter / 2) margin-left ($own-gutter / 2)
// Mono-line grid constructor (.grid) // Mono-line grid constructor (.grid)
@media (min-width: tiny + 1) @media (min-width: $tiny + 1)
.grid .grid
.grid--reverse .grid--reverse
flexbox(flex) flexbox(flex)
@ -47,16 +47,16 @@ grid(grid-number = 1, own-gutter = 0)
box-sizing border-box box-sizing border-box
min-width 0 min-width 0
min-height 0 min-height 0
for key, size in grid-gutters for $key, $size in $grid-gutters
&.has-gutter{key} > * + * &.has-gutter{$key} > * + *
margin-left 'calc(%s - %s)' % (size iefix) margin-left 'calc(%s - %s)' % ($size $iefix)
// Constructing grids : will be compiled in CSS // Constructing grids : will be compiled in CSS
@media (min-width: tiny + 1) @media (min-width: $tiny + 1)
for i in 2..12 for $i in 2..12
grid-selector = 'grid-%s' % i $grid-selector = 'grid-%s' % $i
[class*=\"{grid-selector}\"] [class*=\"{$grid-selector}\"]
grid(i, 0) grid($i, 0)
.push .push
margin-left auto !important margin-left auto !important
@ -77,23 +77,23 @@ grid(grid-number = 1, own-gutter = 0)
[class*="grid-"][class*="--reverse"] [class*="grid-"][class*="--reverse"]
flex-direction(row-reverse) flex-direction(row-reverse)
@media (min-width: tiny + 1) @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} $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 flowToDivid for $flow, $divider in $flow-to-divid
.{flow} .{$flow}
flex(0 0 auto) flex(0 0 auto)
width 'calc(100% / %s - %s)' % (divider iefix) width 'calc(100% / %s - %s)' % ($divider $iefix)
for key, size in grid-gutters for $key, $size in $grid-gutters
.has-gutter{key} .{flow} .has-gutter{$key} .{$flow}
width 'calc(100% / %s - %s - %s)' % (divider size iefix) width 'calc(100% / %s - %s - %s)' % ($divider $size $iefix)
/* Responsive Small Breakpoint */ /* Responsive Small Breakpoint */
@media (min-width: tiny + 1) and (max-width: medium) @media (min-width: $tiny + 1) and (max-width: $medium)
for i in 1..4 for $i in 1..4
index = '-small-%s' % i $index = '-small-%s' % $i
[class*=\"{index}\"] [class*=\"{$index}\"]
& > * & > *
width: 'calc(100% / %s - %s)' % (i iefix) width: 'calc(100% / %s - %s)' % ($i $iefix)
for key, size in grid-gutters for $key, $size in $grid-gutters
&.has-gutter{key} > * &.has-gutter{$key} > *
width: 'calc(100% / %s - %s - %s)' % (i size iefix) width: 'calc(100% / %s - %s - %s)' % ($i $size $iefix)

20
styl/knacss.styl
View file

@ -38,21 +38,21 @@
@import 'library/_base.styl' // basic styles @import 'library/_base.styl' // basic styles
@import 'library/_print.styl' // print quick reset @import 'library/_print.styl' // print quick reset
@import 'library/_styling.styl' // minor stylings @import 'library/_styling.styl' // minor stylings
@import 'library/_misc.styl'; // skip links, hyphens @import 'library/_misc.styl' // skip links, hyphens
@import 'library/_tables.styl'; // data tables consistency @import 'library/_tables.styl' // data tables consistency
@import 'library/_forms.styl'; // forms consistency @import 'library/_forms.styl' // forms consistency
// Objects // Objects
@import 'objects/_media.styl'; // media object @import 'objects/_media.styl' // media object
@import 'objects/_autogrid.styl'; // media autogrid @import 'objects/_autogrid.styl' // media autogrid
// Utilities // Utilities
@import 'utilities/_layout.styl'; // alignment, modules, positionning @import 'utilities/_layout.styl' // alignment, modules, positionning
@import 'utilities/_helpers.styl'; // width and spacers helpers @import 'utilities/_helpers.styl' // width and spacers helpers
@import 'utilities/_responsive.styl'; // Responsive Web Design helpers @import 'utilities/_responsive.styl' // Responsive Web Design helpers
// Grids // Grids
@import 'grids/_grillade.styl'; // grids @import 'grids/_grillade.styl' // grids
/* ----------------------------- */ /* ----------------------------- */
@ -61,4 +61,4 @@
/* Here should go your own CSS styles */ /* Here should go your own CSS styles */
// You can also link them with a Sass @import // You can also link them with a Sass @import
// @import "my-styles"; // @import "my-styles"

80
styl/library/_base.styl
View file

@ -17,22 +17,22 @@ html
font-size calc(1em * 0.625) font-size calc(1em * 0.625)
body body
font-size base-font-size font-size $base-font-size
background-color base-background background-color $base-background
color base-color color $base-color
font-family font-stack-common font-family $font-stack-common
line-height line-height line-height $line-height
a a
color link-color color $link-color
// No styling on focus/hover if there's no effect. Avoids to then have to // No styling on focus/hover if there's no effect. Avoids to then have to
// override it countless times. See Issue #232 // 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, &:focus,
&:hover, &:hover,
&:active &:active
color link-hover-color color $link-hover-color
ul ul
ol ol
@ -48,7 +48,7 @@ figure
/* font-sizing for content */ /* font-sizing for content */
p p
.{kna-namespace}p-like .{$kna-namespace}p-like
ul ul
ol ol
dl dl
@ -65,42 +65,42 @@ figure
margin-bottom 0 margin-bottom 0
line-height line-height line-height line-height
h1 .{kna-namespace}h1-like h1 .{$kna-namespace}h1-like
font-size h1-size font-size $h1-size
if font-stack-headings is defined && font-stack-headings != font-stack-common if $font-stack-headings is defined && $font-stack-headings != $font-stack-common
font-family font-stack-headings font-family $font-stack-headings
h2 .{kna-namespace}h2-like h2 .{$kna-namespace}h2-like
font-size h2-size font-size $h2-size
if font-stack-headings is defined && font-stack-headings != font-stack-common if $font-stack-headings is defined && $font-stack-headings != $font-stack-common
font-family font-stack-headings font-family $font-stack-headings
h3 .{kna-namespace}h3-like h3 .{$kna-namespace}h3-like
font-size h3-size font-size $h3-size
h4 .{kna-namespace}h4-like h4 .{$kna-namespace}h4-like
font-size h4-size font-size $h4-size
h5 .{kna-namespace}h5-like h5 .{$kna-namespace}h5-like
font-size h5-size font-size $h5-size
h6 .{kna-namespace}h6-like h6 .{$kna-namespace}h6-like
font-size h6-size font-size $h6-size
/* alternate font-sizing */ /* alternate font-sizing */
.{kna-namespace}smaller .{$kna-namespace}smaller
font-size 0.6em font-size 0.6em
.{kna-namespace}small .{$kna-namespace}small
font-size 0.8em font-size 0.8em
.{kna-namespace}big .{$kna-namespace}big
font-size 1.2em font-size 1.2em
.{kna-namespace}bigger .{$kna-namespace}bigger
font-size: 1.5em font-size: 1.5em
.{kna-namespace}biggest .{$kna-namespace}biggest
font-size 2em font-size 2em
code code
@ -110,11 +110,11 @@ kbd
/* IE fix */ /* IE fix */
white-space pre-line white-space pre-line
white-space pre-wrap white-space pre-wrap
font-family font-stack-monospace font-family $font-stack-monospace
line-height normal line-height normal
em em
.{kna-namespace}italic .{$kna-namespace}italic
address address
cite cite
i i
@ -123,30 +123,30 @@ var
/* avoid top margins on first content element */ /* avoid top margins on first content element */
p p
.{kna-namespace}p-like .{$kna-namespace}p-like
ul ul
ol ol
dl dl
blockquote blockquote
pre pre
h1 h1
.{kna-namespace}h1-like .{$kna-namespace}h1-like
h2 h2
.{kna-namespace}h2-like .{$kna-namespace}h2-like
h3 h3
.{kna-namespace}h3-like .{$kna-namespace}h3-like
h4 h4
.{kna-namespace}h4-like .{$kna-namespace}h4-like
h5 h5
.{kna-namespace}h5-like .{$kna-namespace}h5-like
h6 h6
.{kna-namespace}h6-like .{$kna-namespace}h6-like
&:first-child &:first-child
margin-top 0 margin-top 0
/* avoid margins on nested elements */ /* avoid margins on nested elements */
li p li p
li .{kna-namespace}p-like li .{$kna-namespace}p-like
li ul li ul
li ol li ol
margin-top 0 margin-top 0

10
styl/library/_forms.styl
View file

@ -7,7 +7,7 @@
*/ */
/* buttons */ /* buttons */
.{kna-namespace}btn .{$kna-namespace}btn
display inline-block display inline-block
/* forms items */ /* forms items */
@ -19,7 +19,7 @@ input
button button
select select
label label
.{kna-namespace}btn .{$kna-namespace}btn
font-family inherit font-family inherit
font-size inherit font-size inherit
@ -28,7 +28,7 @@ input
optgroup optgroup
select select
textarea textarea
color base-color color $base-color
label label
vertical-align middle vertical-align middle
@ -66,7 +66,7 @@ input:-moz-placeholder
textarea:-moz-placeholder textarea:-moz-placeholder
color #777 color #777
.{kna-namespace}btn .{$kna-namespace}btn
input[type="button"] input[type="button"]
button button
&:focus &:focus
@ -82,7 +82,7 @@ button
input[type="button"] input[type="button"]
input[type="submit"] input[type="submit"]
input[type="reset"] input[type="reset"]
&.{kna-namespace}unstyled &.{$kna-namespace}unstyled
padding 0 padding 0
border none border none
line-height 1 line-height 1

6
styl/library/_misc.styl
View file

@ -3,7 +3,7 @@
/* ----------------------------- */ /* ----------------------------- */
/* styling skip links */ /* styling skip links */
.{kna-namespace}skip-links .{$kna-namespace}skip-links
position absolute position absolute
& a & a
@ -21,7 +21,7 @@
clip auto clip auto
// hyphens on tiny screens // hyphens on tiny screens
@media (max-width: tiny) @media (max-width: $tiny)
/* you shall not pass */ /* you shall not pass */
div div
textarea textarea
@ -35,7 +35,7 @@
hyphens auto hyphens auto
// use .no-wrapping to disallow hyphens on tiny screens // use .no-wrapping to disallow hyphens on tiny screens
@media (max-width: tiny) @media (max-width: $tiny)
.no-wrapping .no-wrapping
word-wrap normal word-wrap normal
hyphens manual hyphens manual

26
styl/library/_print.styl
View file

@ -15,34 +15,34 @@
font-size 12pt font-size 12pt
p p
.{kna-namespace}p-like .{$kna-namespace}p-like
h1 h1
.{kna-namespace}h1-like .{$kna-namespace}h1-like
h2 h2
.{kna-namespace}h2-like .{$kna-namespace}h2-like
h3 h3
.{kna-namespace}h3-like .{$kna-namespace}h3-like
h4 h4
.{kna-namespace}h4-like .{$kna-namespace}h4-like
h5 h5
.{kna-namespace}h5-like .{$kna-namespace}h5-like
h6 h6
.{kna-namespace}h6-like .{$kna-namespace}h6-like
blockquote blockquote
ul ul
ol ol
color #000 color #000
margin auto margin auto
.{kna-namespace}print .{$kna-namespace}print
display block display block
.{kna-namespace}no-print .{$kna-namespace}no-print
display none display none
/* no orphans, no widows */ /* no orphans, no widows */
p p
.{kna-namespace}p-like .{$kna-namespace}p-like
blockquote blockquote
orphans 3 orphans 3
widows 3 widows 3
@ -61,11 +61,11 @@
/* no breaks after these elements */ /* no breaks after these elements */
h1 h1
.{kna-namespace}h1-like .{$kna-namespace}h1-like
h2 h2
.{kna-namespace}h2-like .{$kna-namespace}h2-like
h3 h3
.{kna-namespace}h3-like .{$kna-namespace}h3-like
caption caption
page-break-after avoid page-break-after avoid

8
styl/library/_styling.styl
View file

@ -19,9 +19,9 @@ code
pre code pre code
padding 0 padding 0
border-radius 0
background none background none
color inherit color inherit
border-radius 0
mark mark
padding 2px 4px padding 2px 4px
@ -42,7 +42,7 @@ blockquote
min-height 2em min-height 2em
blockquote::before blockquote::before
content "\201C" content '\201C'
position absolute position absolute
left 0 left 0
top 0 top 0
@ -82,11 +82,11 @@ hr
/* tables */ /* tables */
table table
.{kna-namespace}table .{$kna-namespace}table
border 1px solid #ccc border 1px solid #ccc
caption caption
padding small-value padding $small-value
color #555 color #555
font-style italic font-style italic

10
styl/library/_tables.styl
View file

@ -3,23 +3,23 @@
/* ----------------------------- */ /* ----------------------------- */
table table
.{kna-namespace}table .{$kna-namespace}table
width 100% width 100%
max-width 100% max-width 100%
table-layout fixed table-layout fixed
border-collapse collapse border-collapse collapse
vertical-align top vertical-align top
margin-bottom medium-value margin-bottom $medium-value
.{kna-namespace}table .{$kna-namespace}table
display table display table
#recaptcha_table #recaptcha_table
.{kna-namespace}table-auto .{$kna-namespace}table-auto
table-layout auto table-layout auto
td td
th th
vertical-align top vertical-align top
min-width medium-value min-width $medium-value
cursor default cursor default

4
styl/objects/_autogrid.styl
View file

@ -1,6 +1,6 @@
/* Autogrid object */ /* Autogrid object */
/* see http://codepen.io/raphaelgoetter/pen/KMgBJd */ /* see http://codepen.io/raphaelgoetter/pen/KMgBJd */
@media (min-width: (tiny + 1)) @media (min-width: ($tiny + 1))
[class^="autogrid"] [class^="autogrid"]
[class*=" autogrid"] [class*=" autogrid"]
display flex display flex
@ -11,7 +11,7 @@
min-width 0 /* avoid min-width:auto */ min-width 0 /* avoid min-width:auto */
/* Autogrid variants */ /* Autogrid variants */
@media (min-width: (tiny + 1)) @media (min-width: ($tiny + 1))
.has-gutter > *:not(:first-child) .has-gutter > *:not(:first-child)
margin-left 1rem margin-left 1rem

4
styl/objects/_media.styl
View file

@ -1,6 +1,6 @@
/* Media object */ /* Media object */
/* see http://codepen.io/raphaelgoetter/pen/KMWWwj */ /* see http://codepen.io/raphaelgoetter/pen/KMWWwj */
@media (min-width: (tiny + 1)) @media (min-width: ($tiny + 1))
.o-media .o-media
display flex display flex
align-items flex-start align-items flex-start
@ -10,7 +10,7 @@
min-width 0 /* avoid min-width:auto */ min-width 0 /* avoid min-width:auto */
/* Media variants */ /* Media variants */
@media (min-width: (tiny + 1)) @media (min-width: ($tiny + 1))
.o-media--reverse .o-media--reverse
flex-direction row-reverse flex-direction row-reverse

228
styl/utilities/_helpers.styl
View file

@ -38,241 +38,241 @@ ul
/* ------------- */ /* ------------- */
/* blocks widths (percentage and pixels) */ /* blocks widths (percentage and pixels) */
.{kna-namespace}w10 .{$kna-namespace}w10
width 10% width 10%
.{kna-namespace}w20 .{$kna-namespace}w20
width 20% width 20%
.{kna-namespace}w25 .{$kna-namespace}w25
width 25% width 25%
.{kna-namespace}w30 .{$kna-namespace}w30
width 30% width 30%
.{kna-namespace}w33 .{$kna-namespace}w33
width 33.3333% width 33.3333%
.{kna-namespace}w40 .{$kna-namespace}w40
width 40% width 40%
.{kna-namespace}w50 .{$kna-namespace}w50
width 50% width 50%
.{kna-namespace}w60 .{$kna-namespace}w60
width 60% width 60%
.{kna-namespace}w66 .{$kna-namespace}w66
width 66.6666% width 66.6666%
.{kna-namespace}w70 .{$kna-namespace}w70
width 70% width 70%
.{kna-namespace}w75 .{$kna-namespace}w75
width 75% width 75%
.{kna-namespace}w80 .{$kna-namespace}w80
width 80% width 80%
.{kna-namespace}w90 .{$kna-namespace}w90
width 90% width 90%
.{kna-namespace}w100 .{$kna-namespace}w100
width 100% width 100%
.{kna-namespace}w50p .{$kna-namespace}w50p
width 50px width 50px
.{kna-namespace}w100p .{$kna-namespace}w100p
width 100px width 100px
.{kna-namespace}w150p .{$kna-namespace}w150p
width 150px width 150px
.{kna-namespace}w200p .{$kna-namespace}w200p
width 200px width 200px
.{kna-namespace}w300p .{$kna-namespace}w300p
width 300px width 300px
@media (min-width: 401px) @media (min-width: 401px)
.{kna-namespace}w400p .{$kna-namespace}w400p
width 400px width 400px
.{kna-namespace}w500p .{$kna-namespace}w500p
width 500px width 500px
.{kna-namespace}w600p .{$kna-namespace}w600p
width 600px width 600px
@media (min-width: 701px) @media (min-width: 701px)
.{kna-namespace}w700p .{$kna-namespace}w700p
width 700px width 700px
.{kna-namespace}w800p .{$kna-namespace}w800p
width 800px width 800px
@media (min-width: 961px) @media (min-width: 961px)
.{kna-namespace}w960p .{$kna-namespace}w960p
width 960px width 960px
.{kna-namespace}mw960p .{$kna-namespace}mw960p
max-width 960px max-width 960px
.{kna-namespace}w1140p .{$kna-namespace}w1140p
width 1140px width 1140px
.{kna-namespace}mw1140p .{$kna-namespace}mw1140p
max-width 1140px max-width 1140px
.{kna-namespace}wauto .{$kna-namespace}wauto
width auto width auto
/* Spacing Helpers */ /* Spacing Helpers */
/* --------------- */ /* --------------- */
.{kna-namespace}man .{$kna-namespace}man
.{kna-namespace}ma0 .{$kna-namespace}ma0
margin 0 margin 0
.{kna-namespace}pan .{$kna-namespace}pan
.{kna-namespace}pa0 .{$kna-namespace}pa0
padding 0 padding 0
.{kna-namespace}mas .{$kna-namespace}mas
margin small-value margin $small-value
.{kna-namespace}mam .{$kna-namespace}mam
margin medium-value margin $medium-value
.{kna-namespace}mal .{$kna-namespace}mal
margin large-value margin $large-value
.{kna-namespace}pas .{$kna-namespace}pas
padding small-value padding $small-value
.{kna-namespace}pam .{$kna-namespace}pam
padding medium-value padding $medium-value
.{kna-namespace}pal .{$kna-namespace}pal
padding large-value padding $large-value
.{kna-namespace}mtn .{$kna-namespace}mtn
.{kna-namespace}mt0 .{$kna-namespace}mt0
margin-top 0 margin-top 0
.{kna-namespace}mts .{$kna-namespace}mts
margin-top small-value margin-top $small-value
.{kna-namespace}mtm .{$kna-namespace}mtm
margin-top medium-value margin-top $medium-value
.{kna-namespace}mtl .{$kna-namespace}mtl
margin-top large-value margin-top $large-value
.{kna-namespace}mrn .{$kna-namespace}mrn
.{kna-namespace}mr0 .{$kna-namespace}mr0
margin-right 0 margin-right 0
.{kna-namespace}mrs .{$kna-namespace}mrs
margin-right small-value margin-right $small-value
.{kna-namespace}mrm .{$kna-namespace}mrm
margin-right medium-value margin-right $medium-value
.{kna-namespace}mrl .{$kna-namespace}mrl
margin-right large-value margin-right $large-value
.{kna-namespace}mbn .{$kna-namespace}mbn
.{kna-namespace}mb0 .{$kna-namespace}mb0
margin-bottom 0 margin-bottom 0
.{kna-namespace}mbs .{$kna-namespace}mbs
margin-bottom small-value margin-bottom $small-value
.{kna-namespace}mbm .{$kna-namespace}mbm
margin-bottom medium-value margin-bottom $medium-value
.{kna-namespace}mbl .{$kna-namespace}mbl
margin-bottom large-value margin-bottom $large-value
.{kna-namespace}mln .{$kna-namespace}mln
.{kna-namespace}ml0 .{$kna-namespace}ml0
margin-left 0 margin-left 0
.{kna-namespace}mls .{$kna-namespace}mls
margin-left small-value margin-left $small-value
.{kna-namespace}mlm .{$kna-namespace}mlm
margin-left medium-value margin-left $medium-value
.{kna-namespace}mll .{$kna-namespace}mll
margin-left large-value margin-left $large-value
.{kna-namespace}mauto .{$kna-namespace}mauto
margin auto margin auto
.{kna-namespace}mtauto .{$kna-namespace}mtauto
margin-top auto margin-top auto
.{kna-namespace}mrauto .{$kna-namespace}mrauto
margin-right auto margin-right auto
.{kna-namespace}mbauto .{$kna-namespace}mbauto
margin-bottom auto margin-bottom auto
.{kna-namespace}mlauto .{$kna-namespace}mlauto
margin-left: auto margin-left: auto
.{kna-namespace}ptn .{$kna-namespace}ptn
.{kna-namespace}pt0 .{$kna-namespace}pt0
padding-top 0 padding-top 0
.{kna-namespace}pts .{$kna-namespace}pts
padding-top small-value padding-top $small-value
.{kna-namespace}ptm .{$kna-namespace}ptm
padding-top medium-value padding-top $medium-value
.{kna-namespace}ptl .{$kna-namespace}ptl
padding-top large-value padding-top $large-value
.{kna-namespace}prn .{$kna-namespace}prn
.{kna-namespace}pr0 .{$kna-namespace}pr0
padding-right 0 padding-right 0
.{kna-namespace}prs .{$kna-namespace}prs
padding-right small-value padding-right $small-value
.{kna-namespace}prm .{$kna-namespace}prm
padding-right medium-value padding-right $medium-value
.{kna-namespace}prl .{$kna-namespace}prl
padding-right large-value padding-right $large-value
.{kna-namespace}pbn .{$kna-namespace}pbn
.{kna-namespace}pb0 .{$kna-namespace}pb0
padding-bottom 0 padding-bottom 0
.{kna-namespace}pbs .{$kna-namespace}pbs
padding-bottom small-value padding-bottom $small-value
.{kna-namespace}pbm .{$kna-namespace}pbm
padding-bottom medium-value padding-bottom $medium-value
.{kna-namespace}pbl .{$kna-namespace}pbl
padding-bottom large-value padding-bottom $large-value
.{kna-namespace}pln .{$kna-namespace}pln
.{kna-namespace}pl0 .{$kna-namespace}pl0
padding-left 0 padding-left 0
.{kna-namespace}pls .{$kna-namespace}pls
padding-left small-value padding-left $small-value
.{kna-namespace}plm .{$kna-namespace}plm
padding-left medium-value padding-left $medium-value
.{kna-namespace}pll .{$kna-namespace}pll
padding-left large-value padding-left $large-value

58
styl/utilities/_layout.styl
View file

@ -20,45 +20,45 @@
border-collapse collapse border-collapse collapse
/* simple blocks alignment */ /* simple blocks alignment */
.{kna-namespace}left .{$kna-namespace}left
margin-right auto margin-right auto
.{kna-namespace}right .{$kna-namespace}right
margin-left auto margin-left auto
.{kna-namespace}center .{$kna-namespace}center
margin-left auto margin-left auto
margin-right auto margin-right auto
/* text and contents alignment */ /* text and contents alignment */
.{kna-namespace}txtleft .{$kna-namespace}txtleft
text-align left text-align left
.{kna-namespace}txtright .{$kna-namespace}txtright
text-align right text-align right
.{kna-namespace}txtcenter .{$kna-namespace}txtcenter
text-align center text-align center
/* floating elements */ /* floating elements */
.{kna-namespace}fl .{$kna-namespace}fl
float left float left
img.{kna-namespace}fl img.{$kna-namespace}fl
margin-right small-value margin-right $small-value
.{kna-namespace}fr .{$kna-namespace}fr
float right float right
img.{kna-namespace}fr img.{$kna-namespace}fr
margin-left small-value margin-left $small-value
img.{kna-namespace}fl img.{$kna-namespace}fl
img.{kna-namespace}fr img.{$kna-namespace}fr
margin-bottom tiny-value margin-bottom $tiny-value
/* inline-block */ /* inline-block */
.{kna-namespace}inbl .{$kna-namespace}inbl
display inline-block display inline-block
vertical-align top vertical-align top
@ -66,33 +66,33 @@ img.{kna-namespace}fr
http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html 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 .{$kna-namespace}flex-container
flexbox(flex) flexbox(flex)
flex-wrap(wrap) flex-wrap(wrap)
.{kna-namespace}flex-container-h .{$kna-namespace}flex-container-h
flex-direction(row) flex-direction(row)
.{kna-namespace}flex-container-v .{$kna-namespace}flex-container-v
flex-direction(column) flex-direction(column)
.{kna-namespace}flex-item-fluid .{$kna-namespace}flex-item-fluid
flex 1 flex 1
min-width 0 min-width 0
.{kna-namespace}flex-item-first .{$kna-namespace}flex-item-first
.{kna-namespace}item-first .{$kna-namespace}item-first
order -1 order -1
.{kna-namespace}flex-item-medium .{$kna-namespace}flex-item-medium
.{kna-namespace}item-medium .{$kna-namespace}item-medium
order 0 order 0
.{kna-namespace}flex-item-last .{$kna-namespace}flex-item-last
.{kna-namespace}item-last .{$kna-namespace}item-last
order 1 order 1
.{kna-namespace}flex-item-center .{$kna-namespace}flex-item-center
.{kna-namespace}item-center .{$kna-namespace}item-center
margin auto margin auto

126
styl/utilities/_responsive.styl
View file

@ -5,41 +5,41 @@
/* large screens */ /* large screens */
/* ------------- */ /* ------------- */
@media (min-width: (medium + 1)) @media (min-width: ($medium + 1))
/* layouts for large screens */ /* layouts for large screens */
.{kna-namespace}large-hidden .{$kna-namespace}large-hidden
display none !important display none !important
.{kna-namespace}large-visible .{$kna-namespace}large-visible
display block !important display block !important
.{kna-namespace}large-no-float .{$kna-namespace}large-no-float
float none float none
.{kna-namespace}large-inbl .{$kna-namespace}large-inbl
display inline-block display inline-block
float none float none
vertical-align top vertical-align top
/* widths for large screens */ /* widths for large screens */
.{kna-namespace}large-w25 .{$kna-namespace}large-w25
width 25% !important width 25% !important
.{kna-namespace}large-w33 .{$kna-namespace}large-w33
width 33.333333% !important width 33.333333% !important
.{kna-namespace}large-w50 .{$kna-namespace}large-w50
width 50% !important width 50% !important
.{kna-namespace}large-w66 .{$kna-namespace}large-w66
width 66.666666% !important width 66.666666% !important
.{kna-namespace}large-w75 .{$kna-namespace}large-w75
width 75% !important width 75% !important
.{kna-namespace}large-w100 .{$kna-namespace}large-w100
.{kna-namespace}large-wauto .{$kna-namespace}large-wauto
display block !important display block !important
float none !important float none !important
clear none !important clear none !important
@ -49,48 +49,48 @@
border 0 border 0
/* margins for large screens */ /* margins for large screens */
.{kna-namespace}large-man .{$kna-namespace}large-man
.{kna-namespace}large-ma0 .{$kna-namespace}large-ma0
margin 0 !important margin 0 !important
/* medium screens */ /* medium screens */
/* -------------- */ /* -------------- */
@media (min-width: (small + 1)) and (max-width: large) @media (min-width: ($small + 1)) and (max-width: $large)
/* layouts for medium screens */ /* layouts for medium screens */
.{kna-namespace}medium-hidden .{$kna-namespace}medium-hidden
display none !important display none !important
.{kna-namespace}medium-visible .{$kna-namespace}medium-visible
display block !important display block !important
.{kna-namespace}medium-no-float .{$kna-namespace}medium-no-float
float none float none
.{kna-namespace}medium-inbl .{$kna-namespace}medium-inbl
display inline-block display inline-block
float none float none
vertical-align top vertical-align top
/* widths for medium screens */ /* widths for medium screens */
.{kna-namespace}medium-w25 .{$kna-namespace}medium-w25
width 25% !important width 25% !important
.{kna-namespace}medium-w33 .{$kna-namespace}medium-w33
width 33.333333% !important width 33.333333% !important
.{kna-namespace}medium-w50 .{$kna-namespace}medium-w50
width 50% !important width 50% !important
.{kna-namespace}medium-w66 .{$kna-namespace}medium-w66
width 66.666666% !important width 66.666666% !important
.{kna-namespace}medium-w75 .{$kna-namespace}medium-w75
width 75% !important width 75% !important
.{kna-namespace}medium-w100 .{$kna-namespace}medium-w100
.{kna-namespace}medium-wauto .{$kna-namespace}medium-wauto
display block !important display block !important
float none !important float none !important
clear none !important clear none !important
@ -100,48 +100,48 @@
border 0 border 0
/* margins for medium screens */ /* margins for medium screens */
.{kna-namespace}medium-man .{$kna-namespace}medium-man
.{kna-namespace}medium-ma0 .{$kna-namespace}medium-ma0
margin 0 !important margin 0 !important
/* small screens */ /* small screens */
/* ------------- */ /* ------------- */
@media (min-width: (tiny + 1)) and (max-width: small) @media (min-width: ($tiny + 1)) and (max-width: $small)
/* layouts for small screens */ /* layouts for small screens */
.{kna-namespace}small-hidden .{$kna-namespace}small-hidden
display none !important display none !important
.{kna-namespace}small-visible .{$kna-namespace}small-visible
display block !important display block !important
.{kna-namespace}small-no-float .{$kna-namespace}small-no-float
float none float none
.{kna-namespace}small-inbl .{$kna-namespace}small-inbl
display inline-block display inline-block
float none float none
vertical-align top vertical-align top
/* widths for small screens */ /* widths for small screens */
.{kna-namespace}small-w25 .{$kna-namespace}small-w25
width 25% !important width 25% !important
.{kna-namespace}small-w33 .{$kna-namespace}small-w33
width 33.333333% !important width 33.333333% !important
.{kna-namespace}small-w50 .{$kna-namespace}small-w50
width 50% !important width 50% !important
.{kna-namespace}small-w66 .{$kna-namespace}small-w66
width 66.666666% !important width 66.666666% !important
.{kna-namespace}small-w75 .{$kna-namespace}small-w75
width 75% !important width 75% !important
.{kna-namespace}small-w100 .{$kna-namespace}small-w100
.{kna-namespace}small-wauto .{$kna-namespace}small-wauto
display block !important display block !important
float none !important float none !important
clear none !important clear none !important
@ -151,22 +151,22 @@
border 0 border 0
/* margins for small screens */ /* margins for small screens */
.{kna-namespace}small-man .{$kna-namespace}small-man
.{kna-namespace}small-ma0 .{$kna-namespace}small-ma0
margin 0 !important margin 0 !important
.{kna-namespace}small-pan .{$kna-namespace}small-pan
.{kna-namespace}small-pa0 .{$kna-namespace}small-pa0
padding 0 !important padding 0 !important
/* tiny screens */ /* tiny screens */
/* ------------ */ /* ------------ */
@media (max-width: tiny) @media (max-width: $tiny)
/* quick small resolution reset */ /* quick small resolution reset */
.{kna-namespace}mod .{$kna-namespace}mod
.{kna-namespace}col .{$kna-namespace}col
fieldset fieldset
display block !important display block !important
float none !important float none !important
@ -176,42 +176,42 @@
margin-right 0 !important margin-right 0 !important
border 0 border 0
.{kna-namespace}flex-container .{$kna-namespace}flex-container
flex-direction column flex-direction column
/* layouts for tiny screens */ /* layouts for tiny screens */
.{kna-namespace}tiny-hidden .{$kna-namespace}tiny-hidden
display none !important display none !important
.{kna-namespace}tiny-visible .{$kna-namespace}tiny-visible
display block !important display block !important
.{kna-namespace}tiny-no-float .{$kna-namespace}tiny-no-float
float none float none
.{kna-namespace}tiny-inbl .{$kna-namespace}tiny-inbl
display inline-block display inline-block
float none float none
vertical-align top vertical-align top
/* widths for tiny screens */ /* widths for tiny screens */
.{kna-namespace}tiny-w25 .{$kna-namespace}tiny-w25
width 25% !important width 25% !important
.{kna-namespace}tiny-w33 .{$kna-namespace}tiny-w33
width 33.333333% !important width 33.333333% !important
.{kna-namespace}tiny-w50 .{$kna-namespace}tiny-w50
width 50% !important width 50% !important
.{kna-namespace}tiny-w66 .{$kna-namespace}tiny-w66
width 66.666666% !important width 66.666666% !important
.{kna-namespace}tiny-w75 .{$kna-namespace}tiny-w75
width 75% !important width 75% !important
.{kna-namespace}tiny-w100 .{$kna-namespace}tiny-w100
.{kna-namespace}tiny-wauto .{$kna-namespace}tiny-wauto
display block !important display block !important
float none !important float none !important
clear none !important clear none !important
@ -221,10 +221,10 @@
border 0 border 0
/* margins for tiny screens */ /* margins for tiny screens */
.{kna-namespace}tiny-man .{$kna-namespace}tiny-man
.{kna-namespace}tiny-ma0 .{$kna-namespace}tiny-ma0
margin 0 !important margin 0 !important
.{kna-namespace}tiny-pan .{$kna-namespace}tiny-pan
.{kna-namespace}tiny-pa0 .{$kna-namespace}tiny-pa0
padding 0 !important padding 0 !important