diff --git a/bower.json b/bower.json index 39e87cf..6435907 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "KNACSS", - "version": "2.9.2", + "version": "2.9.3", "homepage": "http://www.knacss.com/", "authors": [ "Raphaƫl GOETTER, Alsacreations" diff --git a/css/01-base.css b/css/01-base.css new file mode 100644 index 0000000..b293cca --- /dev/null +++ b/css/01-base.css @@ -0,0 +1,897 @@ +/*! +* www.KNACSS.com V2.9.3 (2014-02) @author: Raphael Goetter, Alsacreations +* Licence WTFPL http://www.wtfpl.net/ +*/ + +/* ----------------------------- */ + +/* == soft reset */ + +/* ----------------------------- */ + +/* switching box model for all elements */ + +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +/* soft reset */ + +html, +body { + margin: 0; + padding: 0; +} + +ul, +ol { + padding-left: 2em; +} + +ul.unstyled { + list-style: none; +} + +img { + vertical-align: middle; + border: 0; +} + +audio, +canvas, +video { + display: inline-block; +} + +svg:not(:root) { + overflow: hidden; +} + +figure { + margin: 0; +} + +/* ----------------------------- */ + +/* == typography */ + +/* ----------------------------- */ + +/* base font-size corresponds to 10px and is adapted to rem unit */ + +html { + font-size: 62.5%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +body { + background-color: #ffffff; + color: #000000; + font-family: Helvetica, Arial, sans-serif; + font-size: 1.4em; + line-height: 1.5; +} + +/* 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 { + margin-top: .75em; + margin-bottom: 0; + line-height: 1.5; +} + +h1, +.h1-like { + margin-top: 0.65625em; + margin-bottom: 0; + font-size: 3.2rem; + line-height: 1.3125; +} + +h2, +.h2-like { + margin-top: 0.75em; + margin-bottom: 0; + font-size: 2.8rem; + line-height: 1.5; +} + +h3, +.h3-like { + margin-top: 0.875em; + margin-bottom: 0; + font-size: 2.4rem; + line-height: 1.75; +} + +h4, +.h4-like { + margin-top: 1.05em; + margin-bottom: 0; + font-size: 2rem; + line-height: 1.05; +} + +h5, +.h5-like { + margin-top: 1.1666666666666667em; + margin-bottom: 0; + font-size: 1.8rem; + line-height: 1.1666666666666667; +} + +h6, +.h6-like { + margin-top: 1.3125em; + margin-bottom: 0; + font-size: 1.6rem; + line-height: 1.3125; +} + +/* alternate font-sizing */ + +.smaller { + font-size: 0.7142857142857143em; +} + +.small { + font-size: 0.8571428571428571em; +} + +.big { + font-size: 1.1428571428571428em; +} + +.bigger { + font-size: 1.2857142857142858em; +} + +.biggest { + font-size: 1.4285714285714286em; +} + +code, +pre, +samp, +kbd { + white-space: pre-line; + /* IE fix */ + white-space: pre-wrap; + font-family: Consolas, 'DejaVu Sans Mono', Courier, monospace; + line-height: 1; +} + +code, +kbd, +mark { + border-radius: 2px; +} + +em { + font-style: italic; +} + +strong { + font-weight: bold; +} + +kbd { + padding: 0 2px; + border: 1px solid #999; +} + +code { + padding: 2px 4px; + background: rgba(0, 0, 0, 0.04); + color: #b11; +} + +mark { + padding: 2px 4px; + background: #ff0; +} + +sup, +sub { + vertical-align: 0; + position: relative; +} + +sup { + bottom: 1ex; +} + +sub { + top: .5ex; +} + +/* ----------------------------- */ + +/* == hiding content */ + +/* ----------------------------- */ + +/* hiding content */ + +.visually-hidden { + position: absolute; + left: -7000px; + overflow: hidden; +} + +[dir=rtl] .visually-hidden { + left: auto; + right: -7000px; +} + +.desktop-hidden { + display: none; +} + +/* hidden on desktop */ + +/* ----------------------------- */ + +/* == skip links styling */ + +/* ----------------------------- */ + +.skip-links { + position: absolute; +} + +.skip-links a { + position: absolute; + left: -7000px; + padding: 0.5em; + background: black; + color: white; + text-decoration: none; +} + +.skip-links a:focus { + position: static; +} + +/* ----------------------------- */ + +/* == browsers consistency */ + +/* ----------------------------- */ + +/* avoid top margins on first content element */ + +p:first-child, +ul:first-child, +ol:first-child, +dl:first-child, +blockquote:first-child, +pre:first-child, +h1:first-child, +h2:first-child, +h3:first-child, +h4:first-child, +h5:first-child, +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%; +} + +/* margin-bottom on tables */ + +table { + margin-bottom: 1.5em; +} + +/* Google Gmap3 bug fix on images */ + +:not(.gm-style) img { + height: auto !important; +} + +.ie678 .gm-style img { + height: 100%; + /* IE678 hack */ +} + +.gm-style img, +.gmnoscreen img, +.gmnoprint img { + max-width: none !important; +} + +/* scripts */ + +body > script { + display: none !important; +} + +/* ----------------------------- */ + +/* ==layout and modules */ + +/* ----------------------------- */ + +/* 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; +} + +/* ----------------------------- */ + +/* == width helpers */ + +/* .. use only when needed */ + +/* ----------------------------- */ + +/* 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; +} + +.w1140p { + width: 1140px; +} + +.mw1140p { + max-width: 1140px; +} + +.wauto { + width: auto; +} + +/* ----------------------------- */ + +/* == spacing helpers */ + +/* .. use only when needed */ + +/* ----------------------------- */ + +/* 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: 10px; +} + +.ma2, +.mam { + margin: 20px; +} + +.ma3, +.mal { + margin: 30px; +} + +.pa1, +.pas { + padding: 10px; +} + +.pa2, +.pam { + padding: 20px; +} + +.pa3, +.pal { + padding: 30px; +} + +.mt0, +.mtn { + margin-top: 0; +} + +.mt1, +.mts { + margin-top: 10px; +} + +.mt2, +.mtm { + margin-top: 20px; +} + +.mt3, +.mtl { + margin-top: 30px; +} + +.mr0, +.mrn { + margin-right: 0; +} + +.mr1, +.mrs { + margin-right: 10px; +} + +.mr2, +.mrm { + margin-right: 20px; +} + +.mr3, +.mrl { + margin-right: 30px; +} + +.mb0, +.mbn { + margin-bottom: 0; +} + +.mb1, +.mbs { + margin-bottom: 10px; +} + +.mb2, +.mbm { + margin-bottom: 20px; +} + +.mb3, +.mbl { + margin-bottom: 30px; +} + +.ml0, +.mln { + margin-left: 0; +} + +.ml1, +.mls { + margin-left: 10px; +} + +.ml2, +.mlm { + margin-left: 20px; +} + +.ml3, +.mll { + margin-left: 30px; +} + +.pt0, +.ptn { + padding-top: 0; +} + +.pt1, +.pts { + padding-top: 10px; +} + +.pt2, +.ptm { + padding-top: 20px; +} + +.pt3, +.ptl { + padding-top: 30px; +} + +.pr0, +.prn { + padding-right: 0; +} + +.pr1, +.prs { + padding-right: 10px; +} + +.pr2, +.prm { + padding-right: 20px; +} + +.pr3, +.prl { + padding-right: 30px; +} + +.pb0, +.pbn { + padding-bottom: 0; +} + +.pb1, +.pbs { + padding-bottom: 10px; +} + +.pb2, +.pbm { + padding-bottom: 20px; +} + +.pb3, +.pbl { + padding-bottom: 30px; +} + +.pl0, +.pln { + padding-left: 0; +} + +.pl1, +.pls { + padding-left: 10px; +} + +.pl2, +.plm { + padding-left: 20px; +} + +.pl3, +.pll { + padding-left: 30px; +} + +/* ----------------------------- */ + +/* == iefix */ + +/* ----------------------------- */ + +/* Make sure you are using Conditional Classes in your HTML */ + +/* see : http://www.alsacreations.com/astuce/lire/988-classes-conditionnelles-HTML.html */ + +.ie678 h1, +.ie678 .h1-like { + font-size: 2.2857142857142856em; +} + +.ie678 h2, +.ie678 .h2-like { + font-size: 2em; +} + +.ie678 h3, +.ie678 .h3-like { + font-size: 1.7142857142857142em; +} + +.ie678 h4, +.ie678 .h4-like { + font-size: 1.4285714285714286em; +} + +.ie678 h5, +.ie678 .h5-like { + font-size: 1.2857142857142858em; +} + +.ie678 h6, +.ie678 .h6-like { + font-size: 1.1428571428571428em; +} + +/* 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(/lib/box-sizing-polyfill/boxsizing.htc); +} +*/ + +/* ----------------------------- */ + +/* == 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/css/02-grids.css b/css/02-grids.css new file mode 100644 index 0000000..6ed6c98 --- /dev/null +++ b/css/02-grids.css @@ -0,0 +1,126 @@ +/* grids inspired from SUIT https://github.com/suitcss/suit */ + +/* font-family hack explained here : https://github.com/raphaelgoetter/KNACSS/issues/37 */ + +.grid { + overflow: hidden; + font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; +} + +.grid > * { + display: block; + padding: 0; + margin-left: -20px; + /* gutter value */ + text-align: left; + letter-spacing: -0.31em; + text-rendering: optimizespeed; +} + +/* Opera hack */ + +.opera:-o-prefocus, +.grid > * { + word-spacing: -0.43em; +} + +.grid > * > * { + display: inline-block; + width: 100%; + padding-left: 20px; + /* gutter value */ + margin-left: 0; + vertical-align: top; + text-align: left; + letter-spacing: normal; + word-spacing: normal; + text-rendering: auto; + *display: inline; + *zoom: 1; + /* IE67 hack */ + font-family: Helvetica, Arial, sans-serif; +} + +.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: 1280px) { + .grid5 > *, + .grid6 > *, + .grid8 > *, + .grid10 > *, + .grid12 > * { + width: 33.333%; + } +} + +@media (max-width: 768px) { + .grid3 > *, + .grid4 > *, + .grid5 > *, + .grid6 > *, + .grid8 > *, + .grid10 > *, + .grid12 > * { + width: 50%; + } +} + +@media (max-width: 480px) { + .grid > * > * { + width: 100% !important; + } +} \ No newline at end of file diff --git a/css/03-tables.css b/css/03-tables.css new file mode 100644 index 0000000..1e65691 --- /dev/null +++ b/css/03-tables.css @@ -0,0 +1,98 @@ +/* ----------------------------- */ + +/* ==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, 0.05); +} + +/* striped-vert tables */ + +.striped-vert tr > :first-child { + background: #eee; + background: rgba(0, 0, 0, 0.05); +} \ No newline at end of file diff --git a/css/forms.css b/css/04-forms.css similarity index 60% rename from css/forms.css rename to css/04-forms.css index 6440ca0..3ae235c 100644 --- a/css/forms.css +++ b/css/04-forms.css @@ -1,6 +1,7 @@ - /* ----------------------------- */ + /* ==forms */ + /* ----------------------------- */ /* thanks to HTML5boilerplate, @@ -8,81 +9,95 @@ * and www.sitepen.com */ - /* buttons */ + .btn { - display: inline-block; + display: inline-block; } /* forms items */ + form, fieldset { - border: none; + border: none; } + input, button, select, label, .btn { - vertical-align: middle; - font-family: inherit; - font-size: inherit; + vertical-align: middle; + font-family: inherit; + font-size: inherit; } -label { - display: inline-block; - vertical-align: middle; - cursor: pointer; + +label { + display: inline-block; + vertical-align: middle; + cursor: pointer; } + legend { - border: 0; - white-space: normal; + 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; + 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 */ + 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 */ + padding: 0; + /* Corrects excess space around these inputs in IE8/9 */ } + input[type="search"] { - -webkit-appearance: textfield; + -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; + display: none; } + ::-webkit-input-placeholder { - color: #777; + color: #777; } + input:-moz-placeholder, textarea:-moz-placeholder { - color: #777; + 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; -} + border: 0; + padding: 0; +} \ No newline at end of file diff --git a/css/05-icons.css b/css/05-icons.css new file mode 100644 index 0000000..c206df6 --- /dev/null +++ b/css/05-icons.css @@ -0,0 +1,165 @@ +/* ----------------------------- */ + +/* ==icons and bullets */ + +/* ----------------------------- */ + +.icon { + display: inline-block; +} + +.icon:before, +.icon.after:after { + content: ""; + display: inline-block; + vertical-align: middle; + position: relative; + top: -0.1em; + margin: 0 0.3em 0 0; + font: 1.4em/1 sans-serif; + color: #000; + text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1); + speak: none; +} + +@media (min-device-width: 768px) { + .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: -0.05em; +} \ No newline at end of file diff --git a/css/06-rwd.css b/css/06-rwd.css new file mode 100644 index 0000000..aabac73 --- /dev/null +++ b/css/06-rwd.css @@ -0,0 +1,301 @@ +/* ----------------------------- */ + +/* ==desktop and retina medias */ + +/* ----------------------------- */ + +@media (min-width: 768px) { + /* 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: 1280px) { + /* layouts for large screens */ + + .large-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 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, + .large-wauto { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; + } + + /* margins for large screens */ + + .large-ma0 { + margin: 0 !important; + } +} + +@media (max-width: 768px) { + /* quick reset in small resolution and less */ + + .w600p, + .w700p, + .w800p, + .w960p, + .mw960p { + width: auto; + float: none; + } + + /* layouts for small screens */ + + .small-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 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, + .small-wauto { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; + } + + /* margins for small screens */ + + .small-ma0 { + margin: 0 !important; + } +} + +@media (max-width: 480px) { + /* quick tiny resolution 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 screens */ + + .tiny-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 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, + .tiny-wauto { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; + } + + /* margins for tiny screens */ + + .tiny-ma0 { + margin: 0 !important; + } +} \ No newline at end of file diff --git a/css/07-flexbox.css b/css/07-flexbox.css new file mode 100644 index 0000000..6b51794 --- /dev/null +++ b/css/07-flexbox.css @@ -0,0 +1,71 @@ +/* flexbox layout +Tutorial: http://knacss.com/demos/tutoriel.html#flex */ + +.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; + -webkit-box-direction: normal; + -moz-box-direction: normal; + flex-direction: row; +} + +.flex-v { + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + -webkit-box-direction: normal; + -moz-box-direction: normal; + flex-direction: column; +} + +.flex-fluid { + -moz-box-flex: 1; + -webkit-flex: 1; + -moz-flex: 1; + -ms-flex: 1; + -webkit-box-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; + -webkit-box-ordinal-group: 0; + order: -1; +} + +.flex-mid { + -webkit-box-ordinal-group: 1; + -moz-box-ordinal-group: 1; + -ms-flex-order: 1; + -webkit-order: 1; + -moz-order: 1; + -webkit-box-ordinal-group: 2; + -moz-box-ordinal-group: 2; + order: 1; +} + +.flex-end { + -webkit-box-ordinal-group: 42; + -moz-box-ordinal-group: 42; + -ms-flex-order: 42; + -webkit-order: 42; + -moz-order: 42; + -webkit-box-ordinal-group: 43; + -moz-box-ordinal-group: 43; + order: 42; +} \ No newline at end of file diff --git a/css/08-print.css b/css/08-print.css new file mode 100644 index 0000000..51928d5 --- /dev/null +++ b/css/08-print.css @@ -0,0 +1,89 @@ +/* quick print reset */ + +@media print { + * { + background: transparent !important; + -webkit-box-shadow: none !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/css/flexbox.css b/css/flexbox.css deleted file mode 100644 index 3904d6c..0000000 --- a/css/flexbox.css +++ /dev/null @@ -1,65 +0,0 @@ - - -/* ----------------------------- */ -/* ==flexbox classes */ -/* ----------------------------- */ - -/* flexbox layout context on container */ -.flex { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; -} -/* horizontal alignment */ -.flex-h { - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; -} -/* vertical alignment */ -.flex-v { - -webkit-box-orient: vertical; - -moz-box-orient: vertical; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} -/* for fluid items */ -.flex-fluid { - -moz-box-flex: 1; - -webkit-flex: 1; - -moz-flex: 1; - -ms-flex: 1; - flex: 1; -} -/* for items that must appear first */ -.flex-start { - -webkit-box-ordinal-group: -1; - -moz-box-ordinal-group: 0; - -ms-flex-order: -1; - -webkit-order: -1; - -moz-order: -1; - order: -1; -} -/* for items that must appear middle */ -.flex-mid { - -webkit-box-ordinal-group: 1; - -moz-box-ordinal-group: 1; - -ms-flex-order: 1; - -webkit-order: 1; - -moz-order: 1; - order: 1; -} -/* for items that must appear at the end */ -.flex-end { - -webkit-box-ordinal-group: 42; - -moz-box-ordinal-group: 42; - -ms-flex-order: 42; - -webkit-order: 42; - -moz-order: 42; - order: 42; -} diff --git a/css/grids.css b/css/grids.css deleted file mode 100644 index f09b96b..0000000 --- a/css/grids.css +++ /dev/null @@ -1,77 +0,0 @@ - -/* ----------------------------- */ -/* ==grids */ -/* ----------------------------- */ - -/* grids inspired from SUIT https://github.com/suitcss/suit */ -/* font-family hack explained here : https://github.com/raphaelgoetter/KNACSS/issues/37 */ - -.grid { - overflow: hidden; - font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; -} -.grid > * { - display: block; - padding: 0; - margin-left: -20px; /* gutter value */ - text-align: left; - letter-spacing: -0.31em; - text-rendering: optimizespeed; -} -/* Opera hack */ -.opera:-o-prefocus, -.grid > * { - word-spacing: -0.43em; -} -.grid > * > * { - display: inline-block; - width: 100%; - padding-left: 20px; /* gutter value */ - margin-left: 0; - vertical-align: top; - text-align: left; - letter-spacing: normal; - word-spacing: normal; - text-rendering: auto; - *display: inline; *zoom: 1; /* IE67 hack */ - font-family: helvetica, arial, sans-serif; -} -.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: 1024px) { - .grid5 > *, - .grid6 > *, - .grid8 > *, - .grid10 > *, - .grid12 > * {width: 33.333%} -} -@media (max-width: 768px) { - .grid3 > *, - .grid4 > *, - .grid5 > *, - .grid6 > *, - .grid8 > *, - .grid10 > *, - .grid12 > * {width: 50%} -} -@media (max-width: 640px) { - .grid > * > * {width: 100% !important} -} diff --git a/css/icons.css b/css/icons.css deleted file mode 100644 index dd79223..0000000 --- a/css/icons.css +++ /dev/null @@ -1,139 +0,0 @@ - -/* ----------------------------- */ -/* ==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: 768px) { - .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/css/knacss.css b/css/knacss.css index 034e2a0..ac28758 100644 --- a/css/knacss.css +++ b/css/knacss.css @@ -1,69 +1,84 @@ /*! -* www.KNACSS.com V2.9.2 (2014-01) @author: Raphael Goetter, Alsacreations -* Licence WTFPL http://www.wtfpl.net/ +* www.KNACSS.com V2.9.3 (2014-02) @author: Raphael Goetter, Alsacreations +* Licence WTFPL http://www.wtfpl.net/ */ /* ----------------------------- */ + /* == soft reset */ + /* ----------------------------- */ /* switching box model for all elements */ + * { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } /* soft reset */ + html, body { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } + ul, ol { - padding-left: 2em; + padding-left: 2em; } + ul.unstyled { - list-style: none; + list-style: none; } + img { - vertical-align: middle; - border: 0; + vertical-align: middle; + border: 0; } + audio, canvas, video { - display: inline-block; -} -svg:not(:root) { - overflow: hidden; -} -figure { - margin: 0; + display: inline-block; } +svg:not(:root) { + overflow: hidden; +} + +figure { + margin: 0; +} /* ----------------------------- */ + /* == typography */ + /* ----------------------------- */ /* base font-size corresponds to 10px and is adapted to rem unit */ + html { - font-size: 62.5%; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; + font-size: 62.5%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; } + body { - background-color: #fff; - color: #000; - font-family: helvetica, arial, sans-serif; - font-size: 1.4em; /* equiv 14px */ - line-height: 1.5; /* adapt to your design */ + background-color: #ffffff; + color: #000000; + font-family: Helvetica, Arial, sans-serif; + font-size: 1.4em; + line-height: 1.5; } /* font-sizing for content */ -/* preserves vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */ + +/* preserve vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */ + p, ul, ol, @@ -76,143 +91,194 @@ label, textarea, caption, details, -figure { - margin: .75em 0 0; - line-height: 1.5; +figure, +hgroup { + margin-top: .75em; + margin-bottom: 0; + line-height: 1.5; } -h1, .h1-like { - margin: 0.6563em 0 0 0; - font-size: 2.2857em; /* equiv 32px */ - line-height: 1.3126; + +h1, +.h1-like { + margin-top: 0.65625em; + margin-bottom: 0; + font-size: 3.2rem; + line-height: 1.3125; } -h2, .h2-like { - margin: 0.75em 0 0 0; - font-size: 2em; /* equiv 28px */ - line-height: 1.5; + +h2, +.h2-like { + margin-top: 0.75em; + margin-bottom: 0; + font-size: 2.8rem; + line-height: 1.5; } -h3, .h3-like { - margin: 0.875em 0 0 0; - font-size: 1.7143em; /* equiv 24px */ - line-height: 1.75; + +h3, +.h3-like { + margin-top: 0.875em; + margin-bottom: 0; + font-size: 2.4rem; + line-height: 1.75; } -h4, .h4-like { - margin: 1.05em 0 0 0; - font-size: 1.4286em; /* equiv 20px */ - line-height: 1.05; + +h4, +.h4-like { + margin-top: 1.05em; + margin-bottom: 0; + font-size: 2rem; + line-height: 1.05; } -h5, .h5-like { - margin: 1.1667em 0 0 0; - font-size: 1.2857em; /* equiv 18px */ - line-height: 1.1667; + +h5, +.h5-like { + margin-top: 1.1666666666666667em; + margin-bottom: 0; + font-size: 1.8rem; + line-height: 1.1666666666666667; } -h6, .h6-like { - margin: 1.3125em 0 0 0; - font-size: 1.1429em; /* equiv 16px */ - line-height: 1.3125; + +h6, +.h6-like { + margin-top: 1.3125em; + margin-bottom: 0; + font-size: 1.6rem; + line-height: 1.3125; } /* alternate font-sizing */ + .smaller { - font-size: .7143em; /* equiv 10px */ -} -.small { - font-size: .8571em; /* equiv 12px */ -} -.big { - font-size: 1.1429em; /* equiv 16px */ -} -.bigger { - font-size: 1.2857em; /* equiv 18px */ -} -.biggest { - font-size: 1.4286em; /* equiv 20px */ + font-size: 0.7142857142857143em; } -code, +.small { + font-size: 0.8571428571428571em; +} + +.big { + font-size: 1.1428571428571428em; +} + +.bigger { + font-size: 1.2857142857142858em; +} + +.biggest { + font-size: 1.4285714285714286em; +} + +code, pre, samp, kbd { - white-space: pre-line; /* IE fix */ - 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; -} -kbd { - padding: 0 2px; - border: 1px solid #999; -} -code { - padding: 2px 4px; - background: rgba(0,0,0,.04); - color: #b11; + white-space: pre-line; + /* IE fix */ + white-space: pre-wrap; + font-family: Consolas, 'DejaVu Sans Mono', Courier, monospace; + line-height: 1; } + +code, +kbd, mark { - padding:2px 4px; - background: #ff0; + border-radius: 2px; } + +em { + font-style: italic; +} + +strong { + font-weight: bold; +} + +kbd { + padding: 0 2px; + border: 1px solid #999; +} + +code { + padding: 2px 4px; + background: rgba(0, 0, 0, 0.04); + color: #b11; +} + +mark { + padding: 2px 4px; + background: #ff0; +} + sup, sub { - vertical-align: 0; - position: relative; + vertical-align: 0; + position: relative; } + sup { - bottom: 1ex; + bottom: 1ex; } + sub { - top: .5ex; + top: .5ex; } /* ----------------------------- */ + /* == hiding content */ + /* ----------------------------- */ /* hiding content */ -.visually-hidden { - position: absolute; - left: -7000px; - overflow: hidden; -} -[dir=rtl] .visually-hidden { - left: auto; - right: -7000px; -} -.desktop-hidden { display: none; } /* hidden on desktop */ +.visually-hidden { + position: absolute; + left: -7000px; + overflow: hidden; +} + +[dir=rtl] .visually-hidden { + left: auto; + right: -7000px; +} + +.desktop-hidden { + display: none; +} + +/* hidden on desktop */ /* ----------------------------- */ + /* == skip links styling */ + /* ----------------------------- */ .skip-links { - position: absolute; -} -.skip-links a { - position: absolute; - left: -7000px; - padding: 0.5em; - background: #000; - color:#fff; - text-decoration: none; -} -.skip-links a:focus { - position: static; + position: absolute; } +.skip-links a { + position: absolute; + left: -7000px; + padding: 0.5em; + background: black; + color: white; + text-decoration: none; +} + +.skip-links a:focus { + position: static; +} /* ----------------------------- */ + /* == browsers consistency */ + /* ----------------------------- */ /* avoid top margins on first content element */ + p:first-child, ul:first-child, ol:first-child, @@ -225,265 +291,1579 @@ h3:first-child, h4:first-child, h5:first-child, h6:first-child { - margin-top: 0; + margin-top: 0; } /* avoid margins on nested elements */ + li p, li ul, li ol { - margin-top: 0; - margin-bottom: 0; + margin-top: 0; + margin-bottom: 0; } /* max values */ -img, table, td, blockquote, code, pre, textarea, input, video { - max-width: 100%; + +img, +table, +td, +blockquote, +code, +pre, +textarea, +input, +video { + max-width: 100%; } /* margin-bottom on tables */ -table { margin-bottom: 1.5em; } + +table { + margin-bottom: 1.5em; +} /* Google Gmap3 bug fix on images */ + :not(.gm-style) img { - height: auto !important; + height: auto !important; } + .ie678 .gm-style img { - height: 100%; /* IE678 hack */ + height: 100%; + /* IE678 hack */ } + .gm-style img, .gmnoscreen img, .gmnoprint img { - max-width: none !important; + max-width: none !important; } /* scripts */ -body > script {display: none !important;} +body > script { + display: none !important; +} /* ----------------------------- */ + /* ==layout and modules */ + /* ----------------------------- */ /* float layout */ + /* module, gains superpower "BFC" Block Formating Context */ -.mod { - overflow: hidden; + +.mod { + overflow: hidden; } /* blocks that needs to be placed under floats */ + .clear, .line, .row { - clear: both; + clear: both; } /* blocks that must contain floats */ + .clearfix:after, .line:after, .mod:after { - content: ""; - display: table; - clear: both; + content: ""; + display: table; + clear: both; } /* table layout */ + .row { - display: table; - table-layout: fixed; - width: 100%; + display: table; + table-layout: fixed; + width: 100%; } + .row > *, .col { - display: table-cell; - vertical-align: top; + display: table-cell; + vertical-align: top; } /* inline-block */ + .inbl { - display: inline-block; - vertical-align: top; + display: inline-block; + vertical-align: top; } /* alignments (blocks and inline) */ + /* ------------------------------ */ /* left elements */ + .left { - float: left; + float: left; } + img.left { - margin-right: 1em; + margin-right: 1em; } /* right elements */ + .right { - float: right; + float: right; } + img.right { - margin-left: 1em; + margin-left: 1em; } -img.left, img.right { - margin-bottom: 5px; +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; } +.center { + margin-left: auto; + margin-right: auto; +} + +.txtleft { + text-align: left; +} + +.txtright { + text-align: right; +} + +.txtcenter { + text-align: center; +} /* ----------------------------- */ + /* == width helpers */ + /* .. use only when needed */ -/* ----------------------------- */ - -/* blocks widths (percentages 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; } -.w1140p { width: 1140px; } -.mw1140p { max-width: 1140px; } - /* ----------------------------- */ + +/* 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; +} + +.w1140p { + width: 1140px; +} + +.mw1140p { + max-width: 1140px; +} + +.wauto { + width: auto; +} + +/* ----------------------------- */ + /* == spacing helpers */ + /* .. use only when needed */ + /* ----------------------------- */ /* spacing helpers p,m = padding,margin a,t,r,b,l = all,top,right,bottom,left -s,m,l,n,0 = small(10px),medium(20px),large(30px), zero or none(0) +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: 10px; } -.ma2, .mam { margin: 20px; } -.ma3, .mal { margin: 30px; } -.pa1, .pas { padding: 10px; } -.pa2, .pam { padding: 20px; } -.pa3, .pal { padding: 30px; } -.mt0, .mtn { margin-top: 0; } -.mt1, .mts { margin-top: 10px; } -.mt2, .mtm { margin-top: 20px; } -.mt3, .mtl { margin-top: 30px; } -.mr0, .mrn { margin-right: 0; } -.mr1, .mrs { margin-right: 10px; } -.mr2, .mrm { margin-right: 20px; } -.mr3, .mrl { margin-right: 30px; } -.mb0, .mbn { margin-bottom: 0; } -.mb1, .mbs { margin-bottom: 10px; } -.mb2, .mbm { margin-bottom: 20px; } -.mb3, .mbl { margin-bottom: 30px; } -.ml0, .mln { margin-left: 0; } -.ml1, .mls { margin-left: 10px; } -.ml2, .mlm { margin-left: 20px; } -.ml3, .mll { margin-left: 30px; } +.m-reset, +.ma0 { + margin: 0; +} -.pt0, .ptn { padding-top: 0; } -.pt1, .pts { padding-top: 10px; } -.pt2, .ptm { padding-top: 20px; } -.pt3, .ptl { padding-top: 30px; } -.pr0, .prn { padding-right: 0; } -.pr1, .prs { padding-right: 10px; } -.pr2, .prm { padding-right: 20px; } -.pr3, .prl { padding-right: 30px; } -.pb0, .pbn { padding-bottom: 0; } -.pb1, .pbs { padding-bottom: 10px; } -.pb2, .pbm { padding-bottom: 20px; } -.pb3, .pbl { padding-bottom: 30px; } -.pl0, .pln { padding-left: 0; } -.pl1, .pls { padding-left: 10px; } -.pl2, .plm { padding-left: 20px; } -.pl3, .pll { padding-left: 30px; } +.p-reset, +.pa0 { + padding: 0; +} +.ma1, +.mas { + margin: 10px; +} + +.ma2, +.mam { + margin: 20px; +} + +.ma3, +.mal { + margin: 30px; +} + +.pa1, +.pas { + padding: 10px; +} + +.pa2, +.pam { + padding: 20px; +} + +.pa3, +.pal { + padding: 30px; +} + +.mt0, +.mtn { + margin-top: 0; +} + +.mt1, +.mts { + margin-top: 10px; +} + +.mt2, +.mtm { + margin-top: 20px; +} + +.mt3, +.mtl { + margin-top: 30px; +} + +.mr0, +.mrn { + margin-right: 0; +} + +.mr1, +.mrs { + margin-right: 10px; +} + +.mr2, +.mrm { + margin-right: 20px; +} + +.mr3, +.mrl { + margin-right: 30px; +} + +.mb0, +.mbn { + margin-bottom: 0; +} + +.mb1, +.mbs { + margin-bottom: 10px; +} + +.mb2, +.mbm { + margin-bottom: 20px; +} + +.mb3, +.mbl { + margin-bottom: 30px; +} + +.ml0, +.mln { + margin-left: 0; +} + +.ml1, +.mls { + margin-left: 10px; +} + +.ml2, +.mlm { + margin-left: 20px; +} + +.ml3, +.mll { + margin-left: 30px; +} + +.pt0, +.ptn { + padding-top: 0; +} + +.pt1, +.pts { + padding-top: 10px; +} + +.pt2, +.ptm { + padding-top: 20px; +} + +.pt3, +.ptl { + padding-top: 30px; +} + +.pr0, +.prn { + padding-right: 0; +} + +.pr1, +.prs { + padding-right: 10px; +} + +.pr2, +.prm { + padding-right: 20px; +} + +.pr3, +.prl { + padding-right: 30px; +} + +.pb0, +.pbn { + padding-bottom: 0; +} + +.pb1, +.pbs { + padding-bottom: 10px; +} + +.pb2, +.pbm { + padding-bottom: 20px; +} + +.pb3, +.pbl { + padding-bottom: 30px; +} + +.pl0, +.pln { + padding-left: 0; +} + +.pl1, +.pls { + padding-left: 10px; +} + +.pl2, +.plm { + padding-left: 20px; +} + +.pl3, +.pll { + padding-left: 30px; +} /* ----------------------------- */ + /* == iefix */ + /* ----------------------------- */ +/* Make sure you are using Conditional Classes in your HTML */ + +/* see : http://www.alsacreations.com/astuce/lire/988-classes-conditionnelles-HTML.html */ + +.ie678 h1, +.ie678 .h1-like { + font-size: 2.2857142857142856em; +} + +.ie678 h2, +.ie678 .h2-like { + font-size: 2em; +} + +.ie678 h3, +.ie678 .h3-like { + font-size: 1.7142857142857142em; +} + +.ie678 h4, +.ie678 .h4-like { + font-size: 1.4285714285714286em; +} + +.ie678 h5, +.ie678 .h5-like { + font-size: 1.2857142857142858em; +} + +.ie678 h6, +.ie678 .h6-like { + font-size: 1.1428571428571428em; +} + /* hasLayout for IE6/IE7 */ + .ie67 .clearfix, .ie67 .line, .ie67 .mod, .ie67 .row, .ie67 .col { - zoom: 1; + zoom: 1; } /* inline-block and table-cell for IE6/IE7 */ -/* warning: .col needs a width on IE6/IE7 */ + +/* warning: .col needs width on IE6/IE7 */ + .ie67 .btn, .ie67 .col, .ie67 .inbl { - display: inline; - zoom: 1; + display: inline; + zoom: 1; } + .ie8 img { - width: auto; /* @bugfix for IE8 */ + width: auto; + /* @bugfix for IE8 */ } /* Active box-sizing for IE6/IE7 */ + /* @source https://github.com/Schepp/box-sizing-polyfill */ + /* .ie67 * { behavior: url(/lib/box-sizing-polyfill/boxsizing.htc); } */ - /* ----------------------------- */ + /* == 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; - } + 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; + background: pink; + outline: 3px solid maroon; } + +/* grids inspired from SUIT https://github.com/suitcss/suit */ + +/* font-family hack explained here : https://github.com/raphaelgoetter/KNACSS/issues/37 */ + +.grid { + overflow: hidden; + font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; +} + +.grid > * { + display: block; + padding: 0; + margin-left: -20px; + /* gutter value */ + text-align: left; + letter-spacing: -0.31em; + text-rendering: optimizespeed; +} + +/* Opera hack */ + +.opera:-o-prefocus, +.grid > * { + word-spacing: -0.43em; +} + +.grid > * > * { + display: inline-block; + width: 100%; + padding-left: 20px; + /* gutter value */ + margin-left: 0; + vertical-align: top; + text-align: left; + letter-spacing: normal; + word-spacing: normal; + text-rendering: auto; + *display: inline; + *zoom: 1; + /* IE67 hack */ + font-family: Helvetica, Arial, sans-serif; +} + +.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: 1280px) { + .grid5 > *, + .grid6 > *, + .grid8 > *, + .grid10 > *, + .grid12 > * { + width: 33.333%; + } +} + +@media (max-width: 768px) { + .grid3 > *, + .grid4 > *, + .grid5 > *, + .grid6 > *, + .grid8 > *, + .grid10 > *, + .grid12 > * { + width: 50%; + } +} + +@media (max-width: 480px) { + .grid > * > * { + width: 100% !important; + } +} + +/* ----------------------------- */ + +/* ==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, 0.05); +} + +/* striped-vert tables */ + +.striped-vert tr > :first-child { + background: #eee; + background: rgba(0, 0, 0, 0.05); +} + +/* ----------------------------- */ + +/* ==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 */ + +/* '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; +} + +/* ----------------------------- */ + +/* ==icons and bullets */ + +/* ----------------------------- */ + +.icon { + display: inline-block; +} + +.icon:before, +.icon.after:after { + content: ""; + display: inline-block; + vertical-align: middle; + position: relative; + top: -0.1em; + margin: 0 0.3em 0 0; + font: 1.4em/1 sans-serif; + color: #000; + text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1); + speak: none; +} + +@media (min-device-width: 768px) { + .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: -0.05em; +} + +/* ----------------------------- */ + +/* ==desktop and retina medias */ + +/* ----------------------------- */ + +@media (min-width: 768px) { + /* 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: 1280px) { + /* layouts for large screens */ + + .large-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 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, + .large-wauto { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; + } + + /* margins for large screens */ + + .large-ma0 { + margin: 0 !important; + } +} + +@media (max-width: 768px) { + /* quick reset in small resolution and less */ + + .w600p, + .w700p, + .w800p, + .w960p, + .mw960p { + width: auto; + float: none; + } + + /* layouts for small screens */ + + .small-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 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, + .small-wauto { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; + } + + /* margins for small screens */ + + .small-ma0 { + margin: 0 !important; + } +} + +@media (max-width: 480px) { + /* quick tiny resolution 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 screens */ + + .tiny-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 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, + .tiny-wauto { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; + } + + /* margins for tiny screens */ + + .tiny-ma0 { + margin: 0 !important; + } +} + +/* flexbox layout +Tutorial: http://knacss.com/demos/tutoriel.html#flex */ + +.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; + -webkit-box-direction: normal; + -moz-box-direction: normal; + flex-direction: row; +} + +.flex-v { + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + -webkit-box-direction: normal; + -moz-box-direction: normal; + flex-direction: column; +} + +.flex-fluid { + -moz-box-flex: 1; + -webkit-flex: 1; + -moz-flex: 1; + -ms-flex: 1; + -webkit-box-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; + -webkit-box-ordinal-group: 0; + order: -1; +} + +.flex-mid { + -webkit-box-ordinal-group: 1; + -moz-box-ordinal-group: 1; + -ms-flex-order: 1; + -webkit-order: 1; + -moz-order: 1; + -webkit-box-ordinal-group: 2; + -moz-box-ordinal-group: 2; + order: 1; +} + +.flex-end { + -webkit-box-ordinal-group: 42; + -moz-box-ordinal-group: 42; + -ms-flex-order: 42; + -webkit-order: 42; + -moz-order: 42; + -webkit-box-ordinal-group: 43; + -moz-box-ordinal-group: 43; + order: 42; +} + +/* quick print reset */ + +@media print { + * { + background: transparent !important; + -webkit-box-shadow: none !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: ""; + } +} + +/* ----------------------------- */ + +/* ==own stylesheet */ + +/* ----------------------------- */ + +/* Here should go your own CSS styles */ + +/* You can also link them with a LESS @import */ + +/* @import "my-styles.less"; */ \ No newline at end of file diff --git a/css/rwd.css b/css/rwd.css deleted file mode 100644 index 29c4682..0000000 --- a/css/rwd.css +++ /dev/null @@ -1,214 +0,0 @@ - -/* ----------------------------- */ -/* ==viewport fixing for RWD */ -/* ----------------------------- */ -@-webkit-viewport { - width: device-width; - zoom: 1.0; -} -@-moz-viewport { - width: device-width; - zoom: 1.0; -} -@-ms-viewport { - width: device-width; - zoom: 1.0; -} -@-o-viewport { - width: device-width; - zoom: 1.0; -} -@viewport { - width: device-width; - zoom: 1.0; -} - -/* ----------------------------- */ -/* ==desktop and retina medias */ -/* ----------------------------- */ - -@media (min-width: 641px) { -/* 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 / small / tiny */ -/* ---------------------------------- */ - -@media (min-width: 1280px) { - - /* 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: 768px) { - - /* quick tablet reset */ - .w600p, - .w700p, - .w800p, - .w960p, - .mw960p, - .small-wauto { - width: auto; - float: none; - } - - /* 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; - } - - /* layouts for small (s) 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; - } - - /* 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; } -} - -@media (max-width: 640px) { - - /* 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; } -} \ No newline at end of file diff --git a/css/tables.css b/css/tables.css deleted file mode 100644 index 66f1bf5..0000000 --- a/css/tables.css +++ /dev/null @@ -1,78 +0,0 @@ - -/* ----------------------------- */ -/* ==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/_00-config.less b/less/00-config.less similarity index 100% rename from less/_00-config.less rename to less/00-config.less diff --git a/less/_01-base.less b/less/01-base.less similarity index 97% rename from less/_01-base.less rename to less/01-base.less index 44d4c9d..d713d2e 100644 --- a/less/_01-base.less +++ b/less/01-base.less @@ -1,3 +1,8 @@ +@import "00-config"; +/*! +* www.KNACSS.com V2.9.3 (2014-02) @author: Raphael Goetter, Alsacreations +* Licence WTFPL http://www.wtfpl.net/ +*/ /* ----------------------------- */ /* == soft reset */ @@ -353,6 +358,7 @@ img.left, img.right { .mw960p { max-width: 960px; } .w1140p { width: 1140px; } .mw1140p { max-width: 1140px; } +.wauto { width: auto; } /* ----------------------------- */ @@ -436,7 +442,7 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css .em(@h6-size); } -/* haslayout for IE6/IE7 */ +/* hasLayout for IE6/IE7 */ .ie67 .clearfix, .ie67 .line, .ie67 .mod, diff --git a/less/_02-grids.less b/less/02-grids.less similarity index 98% rename from less/_02-grids.less rename to less/02-grids.less index 72f5ab9..468d8ca 100644 --- a/less/_02-grids.less +++ b/less/02-grids.less @@ -1,4 +1,4 @@ - +@import "00-config"; /* grids inspired from SUIT https://github.com/suitcss/suit */ /* font-family hack explained here : https://github.com/raphaelgoetter/KNACSS/issues/37 */ diff --git a/less/_03-tables.less b/less/03-tables.less similarity index 98% rename from less/_03-tables.less rename to less/03-tables.less index 66f1bf5..80c3509 100644 --- a/less/_03-tables.less +++ b/less/03-tables.less @@ -1,4 +1,4 @@ - +@import "00-config"; /* ----------------------------- */ /* ==tables */ /* ----------------------------- */ diff --git a/less/_04-forms.less b/less/04-forms.less similarity index 98% rename from less/_04-forms.less rename to less/04-forms.less index 01b46ab..92b1f3b 100644 --- a/less/_04-forms.less +++ b/less/04-forms.less @@ -1,4 +1,4 @@ - +@import "00-config"; /* ----------------------------- */ /* ==forms */ /* ----------------------------- */ diff --git a/less/_05-icons.less b/less/05-icons.less similarity index 99% rename from less/_05-icons.less rename to less/05-icons.less index 02f43f8..3345e34 100644 --- a/less/_05-icons.less +++ b/less/05-icons.less @@ -1,4 +1,4 @@ - +@import "00-config"; /* ----------------------------- */ /* ==icons and bullets */ /* ----------------------------- */ diff --git a/less/_06-rwd.less b/less/06-rwd.less similarity index 85% rename from less/_06-rwd.less rename to less/06-rwd.less index 804c4f2..36943b8 100644 --- a/less/_06-rwd.less +++ b/less/06-rwd.less @@ -1,4 +1,4 @@ - +@import "00-config"; /* ----------------------------- */ /* ==desktop and retina medias */ /* ----------------------------- */ @@ -16,9 +16,8 @@ @media (min-width: @largescreen) { - /* layouts for large (l) screens */ - .large-hidden, - .tablet-hidden { display: none !important; } + /* layouts for large screens */ + .large-hidden { display: none !important; } .large-visible { display: block !important; } .large-no-float {float: none; } .large-inbl { @@ -36,13 +35,14 @@ vertical-align: top; } - /* widths for large (l) screens */ + /* widths for large 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 { + .large-w100, + .large-wauto { display: block !important; float: none !important; clear: none !important; @@ -52,26 +52,24 @@ border: 0; } - /* margins for large (l) screens */ + /* margins for large screens */ .large-ma0 { margin: 0 !important; } } @media (max-width: @smallscreen) { - /* quick tablet reset */ + /* quick reset in small resolution and less */ .w600p, .w700p, .w800p, .w960p, - .mw960p, - .small-wauto { + .mw960p { width: auto; float: none; } - /* layouts for medium (m) screens */ - .small-hidden, - .tablet-hidden { display: none !important; } + /* layouts for small screens */ + .small-hidden { display: none !important; } .small-visible { display: block !important; } .small-no-float {float: none; } .small-inbl { @@ -99,13 +97,14 @@ hyphens: auto; } - /* widths for small (s) screens */ + /* widths for small 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 { + .small-w100, + .small-wauto { display: block !important; float: none !important; clear: none !important; @@ -114,13 +113,13 @@ margin-right: 0 !important; border: 0; } - /* margins for small (s) screens */ + /* margins for small screens */ .small-ma0 { margin: 0 !important; } } @media (max-width: @tinyscreen) { - /* quick smartphone reset */ + /* quick tiny resolution reset */ .mod, .col, fieldset { @@ -143,9 +142,8 @@ width: 100% !important; } - /* layouts for tiny (t) screens */ - .tiny-hidden, - .phone-hidden { display: none !important; } + /* layouts for tiny screens */ + .tiny-hidden { display: none !important; } .tiny-visible { display: block !important; } .tiny-no-float {float: none;} .tiny-inbl { @@ -170,13 +168,14 @@ } thead { display: none; } - /* widths for tiny (t) screens */ + /* widths for tiny 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 { + .tiny-w100, + .tiny-wauto { display: block !important; float: none !important; clear: none !important; @@ -185,6 +184,6 @@ margin-right: 0 !important; border: 0; } - /* margins for tiny (t) screens */ + /* margins for tiny screens */ .tiny-ma0 { margin: 0 !important; } } diff --git a/less/_07-flexbox.less b/less/07-flexbox.less similarity index 88% rename from less/_07-flexbox.less rename to less/07-flexbox.less index 80f65f5..61b7058 100644 --- a/less/_07-flexbox.less +++ b/less/07-flexbox.less @@ -1,9 +1,10 @@ - -/* flexbox layout */ +@import "00-config"; +/* flexbox layout +Tutorial: http://knacss.com/demos/tutoriel.html#flex */ .flex { display : -webkit-box; display : -moz-box; - display: -ms-flexbox; + display : -ms-flexbox; display : -webkit-flex; display : flex; } diff --git a/css/print.css b/less/08-print.less similarity index 98% rename from css/print.css rename to less/08-print.less index 8fd63fa..c954185 100644 --- a/css/print.css +++ b/less/08-print.less @@ -1,3 +1,4 @@ +@import "00-config"; /* quick print reset */ @media print { * { diff --git a/less/_08-print.less b/less/_08-print.less deleted file mode 100644 index 8fd63fa..0000000 --- a/less/_08-print.less +++ /dev/null @@ -1,69 +0,0 @@ -/* 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/knackLESS.zip b/less/knackLESS.zip index f53a275..620c58b 100644 Binary files a/less/knackLESS.zip and b/less/knackLESS.zip differ diff --git a/less/knacss.less b/less/knacss.less index 4a27af6..a07e790 100644 --- a/less/knacss.less +++ b/less/knacss.less @@ -1,22 +1,17 @@ -/*! -* www.KNACSS.com V2.9.2 (2014-01) @author: Raphael Goetter, Alsacreations -* Licence WTFPL http://www.wtfpl.net/ -*/ - // LESS config file -@import "_00-config"; +@import "00-config"; // LESS base styles -@import "_01-base"; +@import "01-base"; // LESS files : chose the ones you need -@import "_02-grids"; -@import "_03-tables"; -@import "_04-forms"; -@import "_05-icons"; -@import "_06-rwd"; -@import "_07-flexbox"; -@import "_08-print"; +@import "02-grids"; +@import "03-tables"; +@import "04-forms"; +@import "05-icons"; +@import "06-rwd"; +@import "07-flexbox"; +@import "08-print"; /* ----------------------------- */ /* ==own stylesheet */