diff --git a/less/02-grids.less b/less/02-grids.less index 1cf48ca..ad85138 100644 --- a/less/02-grids.less +++ b/less/02-grids.less @@ -6,7 +6,6 @@ /* ---------------------------------- */ /* grids inspired from SUIT https://github.com/suitcss/suit */ -/* font-family hack explained here : https://github.com/raphaelgoetter/KNACSS/issues/37 */ .grid { overflow: hidden; diff --git a/less/09-booleans.less b/less/09-booleans.less index 2af13af..6e71575 100644 --- a/less/09-booleans.less +++ b/less/09-booleans.less @@ -1,78 +1,5 @@ @import "00-config"; -// google maps boolean -& when (@gmaps = true) { - /* Google Gmap3 bug fix on images */ - .gm-style img { - height: 100%; - } - :not(.gm-style) img { - height: auto; - } - .gm-style img, - .gmnoscreen img, - .gmnoprint img { - max-width: none !important; - } -} - -// IE6, 7, 8 support boolean -& when (@ie678 = true) { - /* IE678 support */ - .ie678 h1, .ie678 .h1-like { - .em(@h1-size); - } - .ie678 h2, .ie678 .h2-like { - .em(@h2-size); - } - .ie678 h3, .ie678 .h3-like { - .em(@h3-size); - } - .ie678 h4, .ie678 .h4-like { - .em(@h4-size); - } - .ie678 h5, .ie678 .h5-like { - .em(@h5-size); - } - .ie678 h6, .ie678 .h6-like { - .em(@h6-size); - } - .ie678 img { - width: auto; /* @bugfix for IE8 */ - } - .ie678 .gm-style img { - height: 100%; - } - - /* hasLayout for IE6/IE7 */ - .clearfix, - .line, - .mod, - .row, - .col { - *zoom: 1; - } - /* inline-block and table-cell for IE6/IE7 */ - /* warning: .col needs width on IE6/IE7 */ - .btn, - .col, - .inbl { - *display: inline; - *zoom: 1; - } - .visually-hidden { - *clip: rect(1px 1px 1px 1px); - } - - /* Active box-sizing for IE6/IE7 */ - /* @source https://github.com/Schepp/box-sizing-polyfill */ - /* - .ie67 * { - behavior: url(/lib/box-sizing-polyfill/boxsizing.htc); - } - */ -} - // skip-links boolean & when (@skip-links = true) { /* styling skip links */ @@ -103,69 +30,4 @@ hyphens: auto; } } -} - -// Styling boolean -& when (@styling = true) { - /* 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,.04); - color: #b11; - } - pre code { - padding: none; - background: none; - color: inherit; - border-radius: 0; - } - mark { - padding:2px 4px; - background: #ff0; - } - sup, - sub { - vertical-align: 0; - position: relative; - } - sup { - bottom: 1ex; - } - sub { - top: .5ex; - } - blockquote { - margin-left: 0; - padding-left: 1em; - border-left: 4px solid rgba(0,0,0,.15); - font-style: italic; - } - q { - font-style: normal; - } - q, - .q { - quotes: "“\00a0" "\00a0”"; - } - q:lang(fr), - .q:lang(fr) { - quotes: "«\00a0" "\00a0»"; - } - hr { - display: block; - clear: both; - height: 1px; - margin: 1em 0 2em; - padding: 0; - border: 0; - color: #ccc; - background-color: #ccc; - } } \ No newline at end of file diff --git a/less/10-gmaps 1.less b/less/10-gmaps 1.less new file mode 100644 index 0000000..2af13af --- /dev/null +++ b/less/10-gmaps 1.less @@ -0,0 +1,171 @@ +@import "00-config"; + +// google maps boolean +& when (@gmaps = true) { + /* Google Gmap3 bug fix on images */ + .gm-style img { + height: 100%; + } + :not(.gm-style) img { + height: auto; + } + .gm-style img, + .gmnoscreen img, + .gmnoprint img { + max-width: none !important; + } +} + +// IE6, 7, 8 support boolean +& when (@ie678 = true) { + /* IE678 support */ + .ie678 h1, .ie678 .h1-like { + .em(@h1-size); + } + .ie678 h2, .ie678 .h2-like { + .em(@h2-size); + } + .ie678 h3, .ie678 .h3-like { + .em(@h3-size); + } + .ie678 h4, .ie678 .h4-like { + .em(@h4-size); + } + .ie678 h5, .ie678 .h5-like { + .em(@h5-size); + } + .ie678 h6, .ie678 .h6-like { + .em(@h6-size); + } + .ie678 img { + width: auto; /* @bugfix for IE8 */ + } + .ie678 .gm-style img { + height: 100%; + } + + /* hasLayout for IE6/IE7 */ + .clearfix, + .line, + .mod, + .row, + .col { + *zoom: 1; + } + /* inline-block and table-cell for IE6/IE7 */ + /* warning: .col needs width on IE6/IE7 */ + .btn, + .col, + .inbl { + *display: inline; + *zoom: 1; + } + .visually-hidden { + *clip: rect(1px 1px 1px 1px); + } + + /* Active box-sizing for IE6/IE7 */ + /* @source https://github.com/Schepp/box-sizing-polyfill */ + /* + .ie67 * { + behavior: url(/lib/box-sizing-polyfill/boxsizing.htc); + } + */ +} + +// skip-links boolean +& when (@skip-links = true) { + /* styling skip links */ + .skip-links { + position: absolute; + + a { + position: absolute; + left: -7000px; + padding: 0.5em; + background: black; + color: white; + text-decoration: none; + + &:focus { + position: static; + } + } + } +} + +// hyphens boolean +& when (@hyphens = true) { + @media (max-width: @small-screen) { + /* you shall not pass */ + div, textarea, table, td, th, code, pre, samp { + word-wrap: break-word; + hyphens: auto; + } + } +} + +// Styling boolean +& when (@styling = true) { + /* 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,.04); + color: #b11; + } + pre code { + padding: none; + background: none; + color: inherit; + border-radius: 0; + } + mark { + padding:2px 4px; + background: #ff0; + } + sup, + sub { + vertical-align: 0; + position: relative; + } + sup { + bottom: 1ex; + } + sub { + top: .5ex; + } + blockquote { + margin-left: 0; + padding-left: 1em; + border-left: 4px solid rgba(0,0,0,.15); + font-style: italic; + } + q { + font-style: normal; + } + q, + .q { + quotes: "“\00a0" "\00a0”"; + } + q:lang(fr), + .q:lang(fr) { + quotes: "«\00a0" "\00a0»"; + } + hr { + display: block; + clear: both; + height: 1px; + margin: 1em 0 2em; + padding: 0; + border: 0; + color: #ccc; + background-color: #ccc; + } +} \ No newline at end of file diff --git a/less/10-gmaps.less b/less/10-gmaps.less new file mode 100644 index 0000000..e8a1dca --- /dev/null +++ b/less/10-gmaps.less @@ -0,0 +1,17 @@ +@import "00-config"; + +// google maps boolean +& when (@gmaps = true) { + /* Google Gmap3 bug fix on images */ + .gm-style img { + height: 100%; + } + :not(.gm-style) img { + height: auto; + } + .gm-style img, + .gmnoscreen img, + .gmnoprint img { + max-width: none !important; + } +} \ No newline at end of file diff --git a/less/11-ie.less b/less/11-ie.less new file mode 100644 index 0000000..faaa504 --- /dev/null +++ b/less/11-ie.less @@ -0,0 +1,58 @@ +@import "00-config"; + +// IE6, 7, 8 support boolean +& when (@ie678 = true) { + /* IE678 support */ + .ie678 h1, .ie678 .h1-like { + .em(@h1-size); + } + .ie678 h2, .ie678 .h2-like { + .em(@h2-size); + } + .ie678 h3, .ie678 .h3-like { + .em(@h3-size); + } + .ie678 h4, .ie678 .h4-like { + .em(@h4-size); + } + .ie678 h5, .ie678 .h5-like { + .em(@h5-size); + } + .ie678 h6, .ie678 .h6-like { + .em(@h6-size); + } + .ie678 img { + width: auto; /* @bugfix for IE8 */ + } + .ie678 .gm-style img { + height: 100%; + } + + /* hasLayout for IE6/IE7 */ + .clearfix, + .line, + .mod, + .row, + .col { + *zoom: 1; + } + /* inline-block and table-cell for IE6/IE7 */ + /* warning: .col needs width on IE6/IE7 */ + .btn, + .col, + .inbl { + *display: inline; + *zoom: 1; + } + .visually-hidden { + *clip: rect(1px 1px 1px 1px); + } + + /* Active box-sizing for IE6/IE7 */ + /* @source https://github.com/Schepp/box-sizing-polyfill */ + /* + .ie67 * { + behavior: url(/lib/box-sizing-polyfill/boxsizing.htc); + } + */ +} \ No newline at end of file diff --git a/less/12-styling.less b/less/12-styling.less new file mode 100644 index 0000000..fd227b3 --- /dev/null +++ b/less/12-styling.less @@ -0,0 +1,66 @@ +@import "00-config"; + +// Styling boolean +& when (@styling = true) { + /* 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,.04); + color: #b11; + } + pre code { + padding: none; + background: none; + color: inherit; + border-radius: 0; + } + mark { + padding:2px 4px; + background: #ff0; + } + sup, + sub { + vertical-align: 0; + position: relative; + } + sup { + bottom: 1ex; + } + sub { + top: .5ex; + } + blockquote { + margin-left: 0; + padding-left: 1em; + border-left: 4px solid rgba(0,0,0,.15); + font-style: italic; + } + q { + font-style: normal; + } + q, + .q { + quotes: "“\00a0" "\00a0”"; + } + q:lang(fr), + .q:lang(fr) { + quotes: "«\00a0" "\00a0»"; + } + hr { + display: block; + clear: both; + height: 1px; + margin: 1em 0 2em; + padding: 0; + border: 0; + color: #ccc; + background-color: #ccc; + } +} \ No newline at end of file