From df7839eb3b4ce661c8b55834fa7bf6f57d3bd174 Mon Sep 17 00:00:00 2001 From: raphaelgoetter Date: Thu, 12 Sep 2013 11:59:14 +0200 Subject: [PATCH] v2.9 : LESS files are now separated --- css/knacss.css | 2 +- less/01-base.less | 417 +++++++++++++++++++++ less/02-grids.less | 68 ++++ less/03-tables.less | 78 ++++ less/04-forms.less | 87 +++++ less/05-icons.less | 139 +++++++ less/06-rwd.less | 205 ++++++++++ less/07-flexbox.less | 54 +++ less/08-print.less | 69 ++++ less/knacss.less | 867 ++----------------------------------------- 10 files changed, 1144 insertions(+), 842 deletions(-) create mode 100644 less/01-base.less create mode 100644 less/02-grids.less create mode 100644 less/03-tables.less create mode 100644 less/04-forms.less create mode 100644 less/05-icons.less create mode 100644 less/06-rwd.less create mode 100644 less/07-flexbox.less create mode 100644 less/08-print.less diff --git a/css/knacss.css b/css/knacss.css index b89697c..ba72b64 100644 --- a/css/knacss.css +++ b/css/knacss.css @@ -1,5 +1,5 @@ /* -* www.KNACSS.com V2.7 (2013-08) @author: Raphael Goetter, Alsacreations +* www.KNACSS.com V2.8 (2013-09) @author: Raphael Goetter, Alsacreations * Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/ */ diff --git a/less/01-base.less b/less/01-base.less new file mode 100644 index 0000000..294e15a --- /dev/null +++ b/less/01-base.less @@ -0,0 +1,417 @@ + +/* ----------------------------- */ +/* ==reset */ +/* ----------------------------- */ + +/* base font-size corresponds to 10px and is adapted to rem unit */ +html { + font-size: 62.5%; +} +body { + background-color: #fff; + color: #000; + font-family: @fontstack1; + font-size: ((@basefont / 10) + 0em); + line-height: @l-h; // adapt to your design +} + +/* font-sizing for content */ +/* preserve vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */ +p, +ul, +ol, +dl, +blockquote, +pre, +td, +th, +label, +textarea, +caption, +details, +figure, +hgroup { + .flow(@basefont); +} +h1, .h1-like { + .flow(32); // equiv 32px +} +h2, .h2-like { + .flow(28); // equiv 28px +} +h3, .h3-like { + .flow(24); // equiv 24px +} +h4, .h4-like { + .flow(20); // equiv 20px +} +h5, .h5-like { + .flow(18); // equiv 18px +} +h6, .h6-like { + .flow(16); // equiv 16px +} + +/* alternate font-sizing */ +.smaller { + .pxtoem (10); /* equiv 10px */ +} +.small { + .pxtoem (12); /* equiv 12px */ +} +.big { + .pxtoem (16); /* equiv 16px */ +} +.bigger { + .pxtoem (18); /* equiv 18px */ +} +.biggest { + .pxtoem (20); /* equiv 20px */ +} + +/* soft reset */ +html, +body, +textarea, +figure, +label { + margin: 0; + padding: 0; +} +ul, +ol { + padding-left: 2em; +} +ul.unstyled { + list-style: none; +} +code, +pre, +samp, +kbd { + white-space: pre-wrap; + font-family: @fontstack2; + line-height: 1em; +} +code, kbd, mark { + border-radius: 2px; +} +em { + font-style: italic; +} +strong { + font-weight: bold; +} +i, +b { + font-style: normal; + font-weight: normal; +} +kbd { + padding: 0 2px; + border: 1px solid #999; +} +code { + padding: 2px 4px; + background: rgba(0,0,0,.04); + color: #b11; +} +mark { + padding:2px 4px; + background: #ff0; +} +table { margin-bottom: 1.5em; } + +/* avoid top margins on first content element */ +p, ul, ol, dl, +blockquote, pre, +h1, h2, h3, h4, h5, h6 { + &:first-child { + margin-top: 0; + } +} + +/* avoid margins on nested elements */ +li p, +li ul, +li ol { + margin-top: 0; + margin-bottom: 0; +} + +/* max values */ +img, table, td, blockquote, code, pre, textarea, input, video { + max-width: 100%; +} + +/* pictures */ +img { + height: auto; + vertical-align: middle; +} +/* Gmap3 max-width bug fix on images */ +.gm-style img, +.gmnoscreen img, +.gmnoprint img {max-width: none !important;} + +a img { border: 0; } + +/* scripts */ +body > script {display: none !important;} + +/* skip-links */ +.skip-links { + position: absolute; + + a { + position: absolute; + left: -7000px; + padding: 0.5em; + background: black; + color: white; + text-decoration: none; + + &:focus { + position: static; + } + } +} + +/* ----------------------------- */ +/* ==layout and modules */ +/* ----------------------------- */ + +/* switching box model for all elements */ +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +/* float layout */ +/* module, gains superpower "BFC" Block Formating Context */ +.mod { + overflow: hidden; +} + +/* blocks that needs to be placed under floats */ +.clear, +.line, +.row { + clear: both; +} + +/* blocks that must contain floats */ +.clearfix:after, +.line:after, +.mod:after { + content: ""; + display: table; + clear: both; +} + +/* table layout */ +.row { + display: table; + table-layout: fixed; + width: 100%; +} +.row > *, +.col { + display: table-cell; + vertical-align: top; +} + +/* inline-block */ +.inbl { + display: inline-block; + vertical-align: top; +} + + +/* alignments (blocks and inline) */ +/* ------------------------------ */ + +/* left elements */ +.left { + float: left; +} +img.left { + margin-right: 1em; +} + +/* right elements */ +.right { + float: right; +} +img.right { + margin-left: 1em; +} + +img.left, img.right { + margin-bottom: 5px; +} + +.center { margin-left: auto; margin-right: auto; } +.txtleft { text-align: left; } +.txtright { text-align: right; } +.txtcenter { text-align: center; } + + +/* blocks widths (percentage and pixels) */ +.w10 { width: 10%; } +.w20 { width: 20%; } +.w25 { width: 25%; } +.w30 { width: 30%; } +.w33 { width: 33.3333%; } +.w40 { width: 40%; } +.w50 { width: 50%; } +.w60 { width: 60%; } +.w66 { width: 66.6666%; } +.w70 { width: 70%; } +.w75 { width: 75%; } +.w80 { width: 80%; } +.w90 { width: 90%; } +.w100 { width: 100%; } + +.w50p { width: 50px; } +.w100p { width: 100px; } +.w150p { width: 150px; } +.w200p { width: 200px; } +.w300p { width: 300px; } +.w400p { width: 400px; } +.w500p { width: 500px; } +.w600p { width: 600px; } +.w700p { width: 700px; } +.w800p { width: 800px; } +.w960p { width: 960px; } +.mw960p { max-width: 960px; } + +/* spacing helpers +p,m = padding,margin +a,t,r,b,l = all,top,right,bottom,left +s,m,l,n = small(10px),medium(20px),large(30px),none(0) +source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css +*/ +.m-reset, .ma0 { margin: 0; } +.p-reset, .pa0 { padding: 0; } +.ma1, .mas { margin: @smallvalue; } +.ma2, .mam { margin: @mediumvalue; } +.ma3, .mal { margin: @largevalue; } +.pa1, .pas { padding: @smallvalue; } +.pa2, .pam { padding: @mediumvalue; } +.pa3, .pal { padding: @largevalue; } + +.mt0, .mtn { margin-top: 0; } +.mt1, .mts { margin-top: @smallvalue; } +.mt2, .mtm { margin-top: @mediumvalue; } +.mt3, .mtl { margin-top: @largevalue; } +.mr0, .mrn { margin-right: 0; } +.mr1, .mrs { margin-right: @smallvalue; } +.mr2, .mrm { margin-right: @mediumvalue; } +.mr3, .mrl { margin-right: @largevalue; } +.mb0, .mbn { margin-bottom: 0; } +.mb1, .mbs { margin-bottom: @smallvalue; } +.mb2, .mbm { margin-bottom: @mediumvalue; } +.mb3, .mbl { margin-bottom: @largevalue; } +.ml0, .mln { margin-left: 0; } +.ml1, .mls { margin-left: @smallvalue; } +.ml2, .mlm { margin-left: @mediumvalue; } +.ml3, .mll { margin-left: @largevalue; } + +.pt0, .ptn { padding-top: 0; } +.pt1, .pts { padding-top: @smallvalue; } +.pt2, .ptm { padding-top: @mediumvalue; } +.pt3, .ptl { padding-top: @largevalue; } +.pr0, .prn { padding-right: 0; } +.pr1, .prs { padding-right: @smallvalue; } +.pr2, .prm { padding-right: @mediumvalue; } +.pr3, .prl { padding-right: @largevalue; } +.pb0, .pbn { padding-bottom: 0; } +.pb1, .pbs { padding-bottom: @smallvalue; } +.pb2, .pbm { padding-bottom: @mediumvalue; } +.pb3, .pbl { padding-bottom: @largevalue; } +.pl0, .pln { padding-left: 0; } +.pl1, .pls { padding-left: @smallvalue; } +.pl2, .plm { padding-left: @mediumvalue; } +.pl3, .pll { padding-left: @largevalue; } + +/* hiding content */ +.visually-hidden { + position: absolute; + left: -7000px; + overflow: hidden; +} +[dir=rtl] .visually-hidden { + left: auto; + right: -7000px; +} + +/* hidden on desktop */ +.desktop-hidden { display: none; } +/* hidden on mobile */ +.mobile-hidden { display: block; } + + +/* ----------------------------- */ +/* ==iefix */ +/* ----------------------------- */ + +/* haslayout for IE6/IE7 */ +.ie67 .clearfix, +.ie67 .line, +.ie67 .mod, +.ie67 .row, +.ie67 .col { + zoom: 1; +} + +/* inline-block and table-cell for IE6/IE7 */ +/* warning: .col needs width on IE6/IE7 */ +.ie67 .btn, +.ie67 .col, +.ie67 .inbl { + display: inline; + zoom: 1; +} +.ie8 img { + width: auto; /* @bugfix for IE8 */ +} + +/* Active box-sizing for IE6/IE7 */ +/* @source https://github.com/Schepp/box-sizing-polyfill */ +/* +.ie67 * { + behavior: url(/js/boxsizing.htc); +} +*/ + +/* ----------------------------- */ +/* ==print */ +/* ----------------------------- */ + +/* quick print reset */ +@media print { + p, + blockquote { + orphans: 2; + widows: 2; + } + blockquote, + ul, + ol { + page-break-inside: avoid; + } + h1, + h2, + h3, + caption { + page-break-after: avoid; + } +} + +/* debug helper */ +.knacss-debug { + background: pink; + outline: 3px solid maroon; +} \ No newline at end of file diff --git a/less/02-grids.less b/less/02-grids.less new file mode 100644 index 0000000..e91fd3f --- /dev/null +++ b/less/02-grids.less @@ -0,0 +1,68 @@ + +/* grids inspired from SUIT https://github.com/suitcss/suit */ + +.grid {overflow: hidden;} +.grid > * { + display: block; + padding: 0; + margin: 0 (@gutter/2); /* half gutter value */ + text-align: left; + letter-spacing: -0.31em; + text-rendering: optimizespeed; +} +/* Opera hack */ +.opera:-o-prefocus, +.grid > * {word-spacing: -0.43em;} + +.grid > * > * { + width: 100%; + display: inline-block; + padding: 0 (@gutter/2); /* half gutter value */ + vertical-align: top; + text-align: left; + letter-spacing: normal; + word-spacing: normal; + text-rendering: auto; + *display: inline; *zoom: 1; /* IE67 hack */ +} + +.grid2 > * {width: 50%;} +.grid3 > * {width: 33.333%;} +.grid4 > * {width: 25%;} +.grid5 > * {width: 20%;} +.grid6 > * {width: 16.667%;} +.grid8 > * {width: 12.5%;} +.grid10 > * {width: 10%;} +.grid12 > * {width: 8.333%;} + +/* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */ +.grid2-1 > *:first-child, +.grid1-2 > * + * { width: 66.666%; } +.grid1-2 > *:first-child, +.grid2-1 > * + * { width: 33.333%; } +.grid1-3 > *:first-child, +.grid3-1 > * + * { width: 25%; } +.grid3-1 > *:first-child, +.grid1-3 > * + * { width: 75%; } + +/* Responsiv-o-matic */ + +@media (max-width: @largescreen) { + .grid5 > *, + .grid6 > *, + .grid8 > *, + .grid10 > *, + .grid12 > * {width: 33.333%} +} +@media (max-width: @smallscreen) { + .grid3 > *, + .grid4 > *, + .grid5 > *, + .grid6 > *, + .grid8 > *, + .grid10 > *, + .grid12 > * {width: 50%} +} +@media (max-width: @tinyscreen) { + .grid > * > * {width: 100%} +} \ No newline at end of file diff --git a/less/03-tables.less b/less/03-tables.less new file mode 100644 index 0000000..66f1bf5 --- /dev/null +++ b/less/03-tables.less @@ -0,0 +1,78 @@ + +/* ----------------------------- */ +/* ==tables */ +/* ----------------------------- */ + +table, +.table { + max-width : 100%; + table-layout: fixed; + border-collapse: collapse; + vertical-align: top; +} +table { + width: 100%; +} +.table { + display: table; +} +table#recaptcha_table, +table.table-auto { + table-layout:auto; +} +caption { + padding: 10px; + color: #555; + font-style: italic; +} +table { + border: 1px solid #ccc; +} +tr > * + * { + border-left: 1px solid #ccc; +} +th, +td { + padding: .3em .8em; + text-align: left; + border-bottom: 1px solid #ccc; +} +td { + color: #333; +} + +/* alternate tables */ +.alternate { border: 0; } +.alternate tbody { + border: 1px solid #ccc; +} +.alternate thead tr > * + * { + border-left: 0; +} +.alternate tbody tr > * + * { + border-left: 1px solid #ccc; +} + +/* alternate-vert tables */ +.alternate-vert { + border: 0; + border-right: 1px solid #ccc; +} +.alternate-vert tr > :first-child { + border-bottom: 0; +} +.alternate-vert tr > * + * { + border-top: 1px solid #ccc; +} + +/* striped tables */ +.striped tbody tr:nth-child(odd) { + background: #eee; + background: rgba(0, 0, 0, .05); +} + +/* striped-vert tables */ +.striped-vert tr > :first-child { + background: #eee; + background: rgba(0, 0, 0, .05); +} \ No newline at end of file diff --git a/less/04-forms.less b/less/04-forms.less new file mode 100644 index 0000000..01b46ab --- /dev/null +++ b/less/04-forms.less @@ -0,0 +1,87 @@ + +/* ----------------------------- */ +/* ==forms */ +/* ----------------------------- */ + +/* thanks to HTML5boilerplate, +* github.com/nathansmith/formalize +* and www.sitepen.com +*/ + +/* buttons */ +.btn { + display: inline-block; +} + +/* forms items */ +form, +fieldset { + border: none; +} +input, +button, +select, +label, +.btn { + vertical-align: middle; + font-family: inherit; + font-size: inherit; +} +label { + display: inline-block; + vertical-align: middle; + cursor: pointer; +} +legend { + border: 0; + white-space: normal; +} +textarea { + overflow: auto; /* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */ + min-height: 5em; + vertical-align: top; + font-family: inherit; + font-size: inherit; + resize: vertical; +} +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; + -webkit-appearance: button; /* clickable input types in iOS */ +} +input[type="checkbox"], +input[type="radio"] { + padding: 0; /* Corrects excess space around these inputs in IE8/9 */ +} +input[type="search"] { + -webkit-appearance: textfield; +} + +/* 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, +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-results-button, +input[type="search"]::-webkit-search-results-decoration { + display: none; +} +::-webkit-input-placeholder { + color: #777; +} +input:-moz-placeholder, +textarea:-moz-placeholder { + color: #777; +} + +/* Removes inner padding and border in FF3+ */ +button::-moz-focus-inner, +input[type='button']::-moz-focus-inner, +input[type='reset']::-moz-focus-inner, +input[type='submit']::-moz-focus-inner { + border: 0; + padding: 0; +} \ No newline at end of file diff --git a/less/05-icons.less b/less/05-icons.less new file mode 100644 index 0000000..02f43f8 --- /dev/null +++ b/less/05-icons.less @@ -0,0 +1,139 @@ + +/* ----------------------------- */ +/* ==icons and bullets */ +/* ----------------------------- */ + +.icon {display: inline-block;} + +.icon:before, +.icon.after:after { + content: ""; + display: inline-block; + vertical-align: middle; + position: relative; top: -.1em; + margin: 0 0.3em 0 0; + font: 1.4em/1 sans-serif; + color: #000; + text-shadow: 1px 1px 0 rgba(0,0,0,.1); + speak: none; +} + +@media (min-device-width: @smallscreen) { + .icon:before, + .icon.after:after { + font: 1em/0.6 sans-serif; + -webkit-transform: rotateZ(0.05deg); + } +} + +.icon.after:after { + margin: 0 0 0 8px; +} +.icon.after:before { + content: "" !important +} +.icon-rate:before, +.icon-rate.after:after { + content: "\2605"; +} +.icon-unrate:before, +.icon-unrate.after:after{ + content: "\2606"; +} +.icon-check:before, +.icon-check.after:after{ + content: "\2713"; +} +.icon-uncheck:before, +.icon-uncheck.after:after{ + content: "\2717"; +} +.icon-cloud:before, +.icon-cloud.after:after { + content: "\2601"; +} +.icon-dl:before, +.icon-dl.after:after { + content: "\21E3"; + font-weight: bold; +} +.icon-cross:before, +.icon-cross.after:after { + content: "\2716"; + font-weight: bold; +} +.icon-arrow1:before, +.icon-arrow1.after:after { + content: "\2192"; + position: relative; + top: -0.15em; +} +.icon-arrow2:before, +.icon-arrow2.after:after { + content: "\279E"; +} +.icon-arrow3:before, +.icon-arrow3.after:after { + content: "\279A"; +} +.icon-bracket1:before, +.icon-bracket1.after:after { + content: "\2039"; + font-weight: bold; + font-size: 1.6em; + position: relative; + top: -0.15em; +} +.icon-bracket2:before, +.icon-bracket2.after:after { + content: "\203A"; + font-weight: bold; + font-size: 1.6em; + position: relative; + top: -0.15em; +} +.icon-up:before, +.icon-up.after:after { + content: "\25B2"; +} +.icon-down:before, +.icon-down.after:after { + content: "\25BC"; +} +.icon-bull:before, +.icon-bull.after:after { + content: "\2022"; + font-size: 1.2em; + top: -0.05em; +} +.icon-bull2:before, +.icon-bull2.after:after { + content: "\25E6"; + top: -0.05em; +} +.icon-bull3:before, +.icon-bull3.after:after{ + content: "\2023"; + font-size: 1.6em; + top: -0.05em; +} +.icon-nav:before, +.icon-nav.after:after { + content: "\2261"; + font-weight: bold; +} +.icon-losange:before, +.icon-losange.after:after { + content: "\25C6"; +} +.icon-asteri:before, +.icon-asteri.after:after { + content: "\2731"; + font-weight: bold; +} +.icon-mail:before, +.icon-mail.after:after { + content: "\2709"; + font-size: 1.6em; + top: -.05em; +} diff --git a/less/06-rwd.less b/less/06-rwd.less new file mode 100644 index 0000000..87fcbd6 --- /dev/null +++ b/less/06-rwd.less @@ -0,0 +1,205 @@ + +/* ----------------------------- */ +/* ==desktop and retina medias */ +/* ----------------------------- */ + +@media (min-width: @smallscreen) { +/* here go rules for big resources and big screens like: background-images, font-faces, etc. */ +} +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { +/* Style adjustments for retina devices */ +} + +/* ---------------------------------- */ +/* ==Responsive large / medium / tiny */ +/* ---------------------------------- */ + +@media (min-width: @largescreen) { + + /* layouts for large (l) screens */ + .large-hidden, + .tablet-hidden { display: none !important; } + .large-visible { display: block !important; } + .large-no-float {float: none; } + .large-inbl { + display: inline-block; + float: none; + vertical-align: top; + } + .large-row { + display: table; + table-layout: fixed; + width: 100% !important; + } + .large-col { + display: table-cell; + vertical-align: top; + } + + /* widths for large (l) screens */ + .large-w25 { width: 25% !important; } + .large-w33 { width: 33.3333% !important; } + .large-w50 { width: 50% !important; } + .large-w66 { width: 66.6666% !important; } + .large-w75 { width: 75% !important; } + .large-w100 { + 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 (l) screens */ + .large-ma0 { margin: 0 !important; } +} + +@media (max-width: @smallscreen) { + + /* quick tablet reset */ + .w600p, + .w700p, + .w800p, + .w960p, + .mw960p, + .small-wauto { + width: auto; + float: none; + } + + /* layouts for medium (m) screens */ + .small-hidden, + .tablet-hidden { display: none !important; } + .small-visible { display: block !important; } + .small-no-float {float: none; } + .small-inbl { + display: inline-block; + float: none; + vertical-align: top; + } + .small-row { + display: table !important; + table-layout: fixed !important; + width: 100% !important; + } + .small-col { + display: table-cell !important; + vertical-align: top !important; + } + + /* you shall not pass */ + div, textarea, table, td, th, code, pre, samp { + word-wrap: break-word; + -webkit-hyphens: auto; + -moz-hyphens: auto; + -ms-hyphens: auto; + -o-hyphens: auto; + hyphens: auto; + } + + /* widths for small (s) screens */ + .small-w25 { width: 25% !important; } + .small-w33 { width: 33.3333% !important; } + .small-w50 { width: 50% !important; } + .small-w66 { width: 66.6666% !important; } + .small-w75 { width: 75% !important; } + .small-w100 { + 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 (s) screens */ + .small-ma0 { margin: 0 !important; } + + /* Responsive grids */ + .grid4 > * {.grid(2);} + .grid4 > :first-child + * + * {margin-left: 0} + + .grid6 > * {.grid(3);} + .grid6 > :first-child + * + * + * {margin-left: 0} +} + +@media (max-width: @tinyscreen) { + + /* quick smartphone reset */ + .mod, + .col, + fieldset { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; + } + .w300p, + .w400p, + .w500p { + width: auto; + float: none; + } + .row { + display: block !important; + width: 100% !important; + } + + /* layouts for tiny (t) screens */ + .tiny-hidden, + .phone-hidden { display: none !important; } + .tiny-visible { display: block !important; } + .tiny-no-float {float: none;} + .tiny-inbl { + display: inline-block; + float: none; + vertical-align: top; + } + .tiny-row { + display: table !important; + table-layout: fixed !important; + width: 100% !important; + } + .tiny-col { + display: table-cell !important; + vertical-align: top !important; + } + th, + td { + display: block !important; + width: auto !important; + text-align: left !important; + } + thead { display: none; } + + /* widths for tiny (t) screens */ + .tiny-w25 { width: 25% !important; } + .tiny-w33 { width: 33.3333% !important; } + .tiny-w50 { width: 50% !important; } + .tiny-w66 { width: 66.6666% !important; } + .tiny-w75 { width: 75% !important; } + .tiny-w100 { + 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 (t) screens */ + .tiny-ma0 { margin: 0 !important; } +} + +/* orientation iOS font-size fix */ +@media (orientation: landscape) and (max-device-width: @smallscreen) { + html, + body { + -webkit-text-size-adjust: 100%; + } +} \ No newline at end of file diff --git a/less/07-flexbox.less b/less/07-flexbox.less new file mode 100644 index 0000000..80f65f5 --- /dev/null +++ b/less/07-flexbox.less @@ -0,0 +1,54 @@ + +/* flexbox layout */ +.flex { + display : -webkit-box; + display : -moz-box; + display: -ms-flexbox; + display : -webkit-flex; + display : flex; +} +.flex-h { + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} +.flex-v { + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} +.flex-fluid { + -moz-box-flex: 1; + -webkit-flex: 1; + -moz-flex: 1; + -ms-flex: 1; + flex: 1; +} +.flex-start { + -webkit-box-ordinal-group: -1; + -moz-box-ordinal-group: 0; + -ms-flex-order : -1; + -webkit-order : -1; + -moz-order : -1; + order : -1; +} +.flex-mid { + -webkit-box-ordinal-group: 1; + -moz-box-ordinal-group: 1; + -ms-flex-order : 1; + -webkit-order : 1; + -moz-order : 1; + order : 1; +} +.flex-end { + -webkit-box-ordinal-group: 42; + -moz-box-ordinal-group: 42; + -ms-flex-order : 42; + -webkit-order : 42; + -moz-order : 42; + order : 42; +} \ No newline at end of file diff --git a/less/08-print.less b/less/08-print.less new file mode 100644 index 0000000..8fd63fa --- /dev/null +++ b/less/08-print.less @@ -0,0 +1,69 @@ +/* quick print reset */ +@media print { + * { + background: transparent !important; + box-shadow: none !important; + text-shadow: none !important; + } + body { + width: auto !important; + margin: auto !important; + font-family: serif; + font-size: 12pt; + background-color: #fff !important; + color: #333 !important; + } + p, + h1, + h2, + h3, + h4, + h5, + h6, + blockquote, + ul, + ol { + color: #000 !important; + margin: auto !important; + } + .print { + display: block; /* displaying .print elements */ + } + img { + -webkit-filter: grayscale(100%); + -moz-filter: grayscale(100%); + -ms-filter: grayscale(100%); + -o-filter: grayscale(100%); + filter: grayscale(100%); + } + p, + blockquote { + orphans: 3; /* no orphans */ + widows: 3; /* no widows */ + } + blockquote, + ul, + ol { + page-break-inside: avoid; /* no breaks inside these elements */ + } + h1 { + page-break-before: always; /* page break before main headers */ + } + h1, + h2, + h3, + caption { + page-break-after: avoid; /* no breaks after these elements */ + } + a { + color: #000 !important; + text-decoration: underline !important; + } + a[href]:after { + content: " (" attr(href) ")"; /* displaying URLs */ + } + a[href^="javascript:"]:after, + a[href^="#"]:after { + content: ""; + } +} \ No newline at end of file diff --git a/less/knacss.less b/less/knacss.less index 9d245bb..ccf9264 100644 --- a/less/knacss.less +++ b/less/knacss.less @@ -1,20 +1,22 @@ /* -* www.KNACSS.com V2.7b (2013-08) @author: Raphael Goetter, Alsacreations +* www.KNACSS.com V2.8 (2013-09) @author: Raphael Goetter, Alsacreations * Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/ */ // LESS values : adapt them to your design -@basefont : 14; // if "14" then 1em = 14px -@l-h : 1.5; // equiv line-height 1.5em -@smallvalue : 10px; // small value for margins / paddings -@mediumvalue : 20px; // medium value for margins / paddings -@largevalue : 30px; // large value for margins / paddings -@tinyscreen : 480px; // tiny screens media query -@smallscreen : 768px; // small screens media query -@largescreen : 1280px; // large screens media query -@gutter : 20px; // gutter value (%, px, em, rem, etc) for grid layouts +@basefont : 14; // if "14" then 1em = 14px +@l-h : 1.5; // equiv line-height 1.5em +@smallvalue : 10px; // small value for margins / paddings +@mediumvalue : 20px; // medium value for margins / paddings +@largevalue : 30px; // large value for margins / paddings +@tinyscreen : 480px; // tiny screens media query +@smallscreen : 768px; // small screens media query +@largescreen : 1280px; // large screens media query +@gutter : 20px; // gutter value (%, px, em, rem, etc) for grid layouts +@fontstack1 : "helvetica, arial, sans-serif"; // common font +@fontstack2 : "consolas, 'DejaVu Sans Mono', courier, monospace"; // monospace font -// LESS functions : don't touch ;) +// LESS functions : don't touch or you'll be banned ;) .pxtoem (@fontsize) {font-size: ((@fontsize / @basefont) + 0em);} .line (@fontsize) {line-height: (@l-h *2 / (@fontsize / @basefont) + 0em)} .mtop (@fontsize) {margin: (@l-h / (@fontsize / @basefont) + 0em) 0 0} @@ -30,840 +32,23 @@ margin-bottom: 0; } -/* ----------------------------- */ -/* ==reset */ -/* ----------------------------- */ - -/* base font-size corresponds to 10px and is adapted to rem unit */ -html { - font-size: 62.5%; -} -body { - background-color: #fff; - color: #000; - font-family: helvetica, arial, sans-serif; - font-size: ((@basefont / 10) + 0em); - line-height: @l-h; // adapt to your design -} - -/* font-sizing for content */ -/* preserve vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */ -p, -ul, -ol, -dl, -blockquote, -pre, -td, -th, -label, -textarea, -caption, -details, -figure, -hgroup { - .flow(@basefont); -} -h1, .h1-like { - .flow(32); // equiv 32px -} -h2, .h2-like { - .flow(28); // equiv 28px -} -h3, .h3-like { - .flow(24); // equiv 24px -} -h4, .h4-like { - .flow(20); // equiv 20px -} -h5, .h5-like { - .flow(18); // equiv 18px -} -h6, .h6-like { - .flow(16); // equiv 16px -} - -/* alternate font-sizing */ -.smaller { - .pxtoem (10); /* equiv 10px */ -} -.small { - .pxtoem (12); /* equiv 12px */ -} -.big { - .pxtoem (16); /* equiv 16px */ -} -.bigger { - .pxtoem (18); /* equiv 18px */ -} -.biggest { - .pxtoem (20); /* equiv 20px */ -} - -/* soft reset */ -html, -body, -textarea, -figure, -label { - margin: 0; - padding: 0; -} -ul, -ol { - padding-left: 2em; -} -ul.unstyled { - list-style: none; -} -code, -pre, -samp, -kbd { - white-space: pre-wrap; - font-family: consolas, 'DejaVu Sans Mono', courier, monospace; - line-height: 1em; -} -code, kbd, mark { - border-radius: 2px; -} -em { - font-style: italic; -} -strong { - font-weight: bold; -} -i, -b { - font-style: normal; - font-weight: normal; -} -kbd { - padding: 0 2px; - border: 1px solid #999; -} -code { - padding: 2px 4px; - background: rgba(0,0,0,.04); - color: #b11; -} -mark { - padding:2px 4px; - background: #ff0; -} -table { margin-bottom: 1.5em; } - -/* avoid top margins on first content element */ -p, ul, ol, dl, -blockquote, pre, -h1, h2, h3, h4, h5, h6 { - &:first-child { - margin-top: 0; - } -} - -/* avoid margins on nested elements */ -li p, -li ul, -li ol { - margin-top: 0; - margin-bottom: 0; -} - -/* max values */ -img, table, td, blockquote, code, pre, textarea, input, video { - max-width: 100%; -} - -/* pictures */ -img { - height: auto; - vertical-align: middle; -} -/* Gmap3 max-width bug fix on images */ -.gm-style img, -.gmnoscreen img, -.gmnoprint img {max-width: none !important;} - -a img { border: 0; } - -/* scripts */ -body > script {display: none !important;} - -/* skip-links */ -.skip-links { - position: absolute; - - a { - position: absolute; - left: -7000px; - padding: 0.5em; - background: black; - color: white; - text-decoration: none; - - &:focus { - position: static; - } - } -} +// LESS base styles +@import "01-base.less"; /* ----------------------------- */ -/* ==layout and modules */ -/* ----------------------------- */ - -/* switching box model for all elements */ -* { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -/* float layout */ -/* module, gains superpower "BFC" Block Formating Context */ -.mod { - overflow: hidden; -} - -/* blocks that needs to be placed under floats */ -.clear, -.line, -.row { - clear: both; -} - -/* blocks that must contain floats */ -.clearfix:after, -.line:after, -.mod:after { - content: ""; - display: table; - clear: both; -} - -/* table layout */ -.row { - display: table; - table-layout: fixed; - width: 100%; -} -.row > *, -.col { - display: table-cell; - vertical-align: top; -} - -/* inline-block */ -.inbl { - display: inline-block; - vertical-align: top; -} - -/* flexbox layout */ -.flex { - display : -webkit-box; - display : -moz-box; - display: -ms-flexbox; - display : -webkit-flex; - display : flex; -} -.flex-h { - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; -} -.flex-v { - -webkit-box-orient: vertical; - -moz-box-orient: vertical; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} -.flex-fluid { - -moz-box-flex: 1; - -webkit-flex: 1; - -moz-flex: 1; - -ms-flex: 1; - flex: 1; -} -.flex-start { - -webkit-box-ordinal-group: -1; - -moz-box-ordinal-group: 0; - -ms-flex-order : -1; - -webkit-order : -1; - -moz-order : -1; - order : -1; -} -.flex-mid { - -webkit-box-ordinal-group: 1; - -moz-box-ordinal-group: 1; - -ms-flex-order : 1; - -webkit-order : 1; - -moz-order : 1; - order : 1; -} -.flex-end { - -webkit-box-ordinal-group: 42; - -moz-box-ordinal-group: 42; - -ms-flex-order : 42; - -webkit-order : 42; - -moz-order : 42; - order : 42; -} - -/* alignments (blocks and inline) */ -/* ------------------------------ */ - -/* left elements */ -.left { - float: left; -} -img.left { - margin-right: 1em; -} - -/* right elements */ -.right { - float: right; -} -img.right { - margin-left: 1em; -} - -img.left, img.right { - margin-bottom: 5px; -} - -.center { margin-left: auto; margin-right: auto; } -.txtleft { text-align: left; } -.txtright { text-align: right; } -.txtcenter { text-align: center; } - -/* grids inspired from SUIT https://github.com/suitcss/suit */ - -.grid {overflow: hidden;} -.grid > * { - display: block; - padding: 0; - margin: 0 (@gutter/2); /* half gutter value */ - text-align: left; - letter-spacing: -0.31em; - text-rendering: optimizespeed; -} -/* Opera hack */ -.opera:-o-prefocus, -.grid > * {word-spacing: -0.43em;} - -.grid > * > * { - width: 100%; - display: inline-block; - padding: 0 (@gutter/2); /* half gutter value */ - vertical-align: top; - text-align: left; - letter-spacing: normal; - word-spacing: normal; - text-rendering: auto; - *display: inline; *zoom: 1; /* IE67 hack */ -} - -.grid2 > * {width: 50%;} -.grid3 > * {width: 33.333%;} -.grid4 > * {width: 25%;} -.grid5 > * {width: 20%;} -.grid6 > * {width: 16.667%;} -.grid8 > * {width: 12.5%;} -.grid10 > * {width: 10%;} -.grid12 > * {width: 8.333%;} - -/* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */ -.grid2-1 > *:first-child, -.grid1-2 > * + * { width: 66.666%; } -.grid1-2 > *:first-child, -.grid2-1 > * + * { width: 33.333%; } -.grid1-3 > *:first-child, -.grid3-1 > * + * { width: 25%; } -.grid3-1 > *:first-child, -.grid1-3 > * + * { width: 75%; } - -/* Responsiv-o-matic */ - -@media (max-width: @largescreen) { - .grid5 > *, - .grid6 > *, - .grid8 > *, - .grid10 > *, - .grid12 > * {width: 33.333%} -} -@media (max-width: @smallscreen) { - .grid3 > *, - .grid4 > *, - .grid5 > *, - .grid6 > *, - .grid8 > *, - .grid10 > *, - .grid12 > * {width: 50%} -} -@media (max-width: @tinyscreen) { - .grid > * > * {width: 100%} -} - -/* blocks widths (percentage and pixels) */ -.w10 { width: 10%; } -.w20 { width: 20%; } -.w25 { width: 25%; } -.w30 { width: 30%; } -.w33 { width: 33.3333%; } -.w40 { width: 40%; } -.w50 { width: 50%; } -.w60 { width: 60%; } -.w66 { width: 66.6666%; } -.w70 { width: 70%; } -.w75 { width: 75%; } -.w80 { width: 80%; } -.w90 { width: 90%; } -.w100 { width: 100%; } - -.w50p { width: 50px; } -.w100p { width: 100px; } -.w150p { width: 150px; } -.w200p { width: 200px; } -.w300p { width: 300px; } -.w400p { width: 400px; } -.w500p { width: 500px; } -.w600p { width: 600px; } -.w700p { width: 700px; } -.w800p { width: 800px; } -.w960p { width: 960px; } -.mw960p { max-width: 960px; } - -/* spacing helpers -p,m = padding,margin -a,t,r,b,l = all,top,right,bottom,left -s,m,l,n = small(10px),medium(20px),large(30px),none(0) -source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css -*/ -.m-reset, .ma0 { margin: 0; } -.p-reset, .pa0 { padding: 0; } -.ma1, .mas { margin: @smallvalue; } -.ma2, .mam { margin: @mediumvalue; } -.ma3, .mal { margin: @largevalue; } -.pa1, .pas { padding: @smallvalue; } -.pa2, .pam { padding: @mediumvalue; } -.pa3, .pal { padding: @largevalue; } - -.mt0, .mtn { margin-top: 0; } -.mt1, .mts { margin-top: @smallvalue; } -.mt2, .mtm { margin-top: @mediumvalue; } -.mt3, .mtl { margin-top: @largevalue; } -.mr0, .mrn { margin-right: 0; } -.mr1, .mrs { margin-right: @smallvalue; } -.mr2, .mrm { margin-right: @mediumvalue; } -.mr3, .mrl { margin-right: @largevalue; } -.mb0, .mbn { margin-bottom: 0; } -.mb1, .mbs { margin-bottom: @smallvalue; } -.mb2, .mbm { margin-bottom: @mediumvalue; } -.mb3, .mbl { margin-bottom: @largevalue; } -.ml0, .mln { margin-left: 0; } -.ml1, .mls { margin-left: @smallvalue; } -.ml2, .mlm { margin-left: @mediumvalue; } -.ml3, .mll { margin-left: @largevalue; } - -.pt0, .ptn { padding-top: 0; } -.pt1, .pts { padding-top: @smallvalue; } -.pt2, .ptm { padding-top: @mediumvalue; } -.pt3, .ptl { padding-top: @largevalue; } -.pr0, .prn { padding-right: 0; } -.pr1, .prs { padding-right: @smallvalue; } -.pr2, .prm { padding-right: @mediumvalue; } -.pr3, .prl { padding-right: @largevalue; } -.pb0, .pbn { padding-bottom: 0; } -.pb1, .pbs { padding-bottom: @smallvalue; } -.pb2, .pbm { padding-bottom: @mediumvalue; } -.pb3, .pbl { padding-bottom: @largevalue; } -.pl0, .pln { padding-left: 0; } -.pl1, .pls { padding-left: @smallvalue; } -.pl2, .plm { padding-left: @mediumvalue; } -.pl3, .pll { padding-left: @largevalue; } - -/* hiding content */ -.visually-hidden { - position: absolute; - left: -7000px; - overflow: hidden; -} -[dir=rtl] .visually-hidden { - left: auto; - right: -7000px; -} - -/* hidden on desktop */ -.desktop-hidden { display: none; } -/* hidden on mobile */ -.mobile-hidden { display: block; } - -/* ----------------------------- */ -/* ==forms */ -/* ----------------------------- */ - -/* thanks to HTML5boilerplate, -* github.com/nathansmith/formalize -* and www.sitepen.com -*/ - -/* buttons */ -.btn { - display: inline-block; -} - -/* forms items */ -form, -fieldset { - border: none; -} -input, -button, -select, -label, -.btn { - vertical-align: middle; - font-family: inherit; - font-size: inherit; -} -label { - display: inline-block; - vertical-align: middle; - cursor: pointer; -} -legend { - border: 0; - white-space: normal; -} -textarea { - overflow: auto; /* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */ - min-height: 5em; - vertical-align: top; - font-family: inherit; - font-size: inherit; - resize: vertical; -} -button, -input[type="button"], -input[type="reset"], -input[type="submit"] { - cursor: pointer; - -webkit-appearance: button; /* clickable input types in iOS */ -} -input[type="checkbox"], -input[type="radio"] { - padding: 0; /* Corrects excess space around these inputs in IE8/9 */ -} -input[type="search"] { - -webkit-appearance: textfield; -} - -/* 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, -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-results-button, -input[type="search"]::-webkit-search-results-decoration { - display: none; -} -::-webkit-input-placeholder { - color: #777; -} -input:-moz-placeholder, -textarea:-moz-placeholder { - color: #777; -} - -/* Removes inner padding and border in FF3+ */ -button::-moz-focus-inner, -input[type='button']::-moz-focus-inner, -input[type='reset']::-moz-focus-inner, -input[type='submit']::-moz-focus-inner { - border: 0; - padding: 0; -} - -/* ----------------------------- */ -/* ==iefix */ -/* ----------------------------- */ - -/* haslayout for IE6/IE7 */ -.ie67 .clearfix, -.ie67 .line, -.ie67 .mod, -.ie67 .row, -.ie67 .col { - zoom: 1; -} - -/* inline-block and table-cell for IE6/IE7 */ -/* warning: .col needs width on IE6/IE7 */ -.ie67 .btn, -.ie67 .col, -.ie67 .inbl { - display: inline; - zoom: 1; -} -.ie8 img { - width: auto; /* @bugfix for IE8 */ -} - -/* Active box-sizing for IE6/IE7 */ -/* @source https://github.com/Schepp/box-sizing-polyfill */ -/* -.ie67 * { - behavior: url(/js/boxsizing.htc); -} -*/ - -/* ----------------------------- */ -/* ==print */ -/* ----------------------------- */ - -/* quick print reset */ -@media print { - p, - blockquote { - orphans: 2; - widows: 2; - } - blockquote, - ul, - ol { - page-break-inside: avoid; - } - h1, - h2, - h3, - caption { - page-break-after: avoid; - } -} - -/* debug helper */ -.knacss-debug { - background: pink; - outline: 3px solid maroon; -} - -/* ----------------------------- */ -/* ==own stylesheet */ +/* ==own stylesheet */ /* ----------------------------- */ /* Here should go your own CSS styles */ -/* You can link them with an @import or, better for webperf, just paste them here */ - -/* @import url(my-styles.css); */ +/* You can link them with an LESS @import */ +/* @import "my-styles.less"; */ -/* ----------------------------- */ -/* ==desktop and retina medias */ -/* ----------------------------- */ - -@media (min-width: @smallscreen) { -/* here go rules for big resources and big screens like: background-images, font-faces, etc. */ -} -@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { -/* Style adjustments for retina devices */ -} - -/* ---------------------------------- */ -/* ==Responsive large / medium / tiny */ -/* ---------------------------------- */ - -@media (min-width: @largescreen) { - - /* layouts for large (l) screens */ - .large-hidden, - .tablet-hidden { display: none !important; } - .large-visible { display: block !important; } - .large-no-float {float: none; } - .large-inbl { - display: inline-block; - float: none; - vertical-align: top; - } - .large-row { - display: table; - table-layout: fixed; - width: 100% !important; - } - .large-col { - display: table-cell; - vertical-align: top; - } - - /* widths for large (l) screens */ - .large-w25 { width: 25% !important; } - .large-w33 { width: 33.3333% !important; } - .large-w50 { width: 50% !important; } - .large-w66 { width: 66.6666% !important; } - .large-w75 { width: 75% !important; } - .large-w100 { - 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 (l) screens */ - .large-ma0 { margin: 0 !important; } -} - -@media (max-width: @smallscreen) { - - /* quick tablet reset */ - .w600p, - .w700p, - .w800p, - .w960p, - .mw960p, - .small-wauto { - width: auto; - float: none; - } - - /* layouts for medium (m) screens */ - .small-hidden, - .tablet-hidden { display: none !important; } - .small-visible { display: block !important; } - .small-no-float {float: none; } - .small-inbl { - display: inline-block; - float: none; - vertical-align: top; - } - .small-row { - display: table !important; - table-layout: fixed !important; - width: 100% !important; - } - .small-col { - display: table-cell !important; - vertical-align: top !important; - } - - /* you shall not pass */ - div, textarea, table, td, th, code, pre, samp { - word-wrap: break-word; - -webkit-hyphens: auto; - -moz-hyphens: auto; - -ms-hyphens: auto; - -o-hyphens: auto; - hyphens: auto; - } - - /* widths for small (s) screens */ - .small-w25 { width: 25% !important; } - .small-w33 { width: 33.3333% !important; } - .small-w50 { width: 50% !important; } - .small-w66 { width: 66.6666% !important; } - .small-w75 { width: 75% !important; } - .small-w100 { - 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 (s) screens */ - .small-ma0 { margin: 0 !important; } - - /* Responsive grids */ - .grid4 > * {.grid(2);} - .grid4 > :first-child + * + * {margin-left: 0} - - .grid6 > * {.grid(3);} - .grid6 > :first-child + * + * + * {margin-left: 0} -} - -@media (max-width: @tinyscreen) { - - /* quick smartphone reset */ - .mod, - .col, - fieldset { - display: block !important; - float: none !important; - clear: none !important; - width: auto !important; - margin-left: 0 !important; - margin-right: 0 !important; - border: 0; - } - .w300p, - .w400p, - .w500p { - width: auto; - float: none; - } - .row { - display: block !important; - width: 100% !important; - } - - /* layouts for tiny (t) screens */ - .tiny-hidden, - .phone-hidden { display: none !important; } - .tiny-visible { display: block !important; } - .tiny-no-float {float: none;} - .tiny-inbl { - display: inline-block; - float: none; - vertical-align: top; - } - .tiny-row { - display: table !important; - table-layout: fixed !important; - width: 100% !important; - } - .tiny-col { - display: table-cell !important; - vertical-align: top !important; - } - th, - td { - display: block !important; - width: auto !important; - text-align: left !important; - } - thead { display: none; } - - /* widths for tiny (t) screens */ - .tiny-w25 { width: 25% !important; } - .tiny-w33 { width: 33.3333% !important; } - .tiny-w50 { width: 50% !important; } - .tiny-w66 { width: 66.6666% !important; } - .tiny-w75 { width: 75% !important; } - .tiny-w100 { - 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 (t) screens */ - .tiny-ma0 { margin: 0 !important; } -} - -/* orientation iOS font-size fix */ -@media (orientation: landscape) and (max-device-width: @smallscreen) { - html, - body { - -webkit-text-size-adjust: 100%; - } -} \ No newline at end of file +// LESS files : chose the ones you need +@import "02-grids.less"; +@import "03-tables.less"; +@import "04-forms.less"; +@import "05-icons.less"; +@import "06-rwd.less"; +@import "07-flexbox.less"; +@import "08-print.less"; \ No newline at end of file