From f42ad600be7910503a7188db937f24604aa78217 Mon Sep 17 00:00:00 2001 From: Raphael Goetter Date: Thu, 22 May 2014 20:36:58 +0200 Subject: [PATCH] Experimental "future-proof" version of KNACSS --- future-proof/.pleeeaserc | 15 + future-proof/_README.md | 18 + future-proof/css-includes/00-config.css | 46 + future-proof/css-includes/01-base.css | 637 +++++++ future-proof/css-includes/02-grids.css | 225 +++ future-proof/css-includes/03-tables.css | 39 + future-proof/css-includes/04-forms.css | 89 + future-proof/css-includes/05-icons.css | 159 ++ future-proof/css-includes/06-rwd.css | 275 +++ future-proof/css-includes/07-flexbox.css | 30 + future-proof/css-includes/08-print.css | 87 + future-proof/css-includes/09-booleans.css | 38 + future-proof/css-includes/10-gmaps.css | 18 + future-proof/css-includes/11-ie.css | 76 + future-proof/css-includes/12-styling.css | 119 ++ future-proof/css-includes/knacss.css | 18 + future-proof/styles.css | 8 + future-proof/styles.min.css | 1880 +++++++++++++++++++++ 18 files changed, 3777 insertions(+) create mode 100644 future-proof/.pleeeaserc create mode 100644 future-proof/_README.md create mode 100644 future-proof/css-includes/00-config.css create mode 100644 future-proof/css-includes/01-base.css create mode 100644 future-proof/css-includes/02-grids.css create mode 100644 future-proof/css-includes/03-tables.css create mode 100644 future-proof/css-includes/04-forms.css create mode 100644 future-proof/css-includes/05-icons.css create mode 100644 future-proof/css-includes/06-rwd.css create mode 100644 future-proof/css-includes/07-flexbox.css create mode 100644 future-proof/css-includes/08-print.css create mode 100644 future-proof/css-includes/09-booleans.css create mode 100644 future-proof/css-includes/10-gmaps.css create mode 100644 future-proof/css-includes/11-ie.css create mode 100644 future-proof/css-includes/12-styling.css create mode 100644 future-proof/css-includes/knacss.css create mode 100644 future-proof/styles.css create mode 100644 future-proof/styles.min.css diff --git a/future-proof/.pleeeaserc b/future-proof/.pleeeaserc new file mode 100644 index 0000000..6acaf5b --- /dev/null +++ b/future-proof/.pleeeaserc @@ -0,0 +1,15 @@ +{ + "input": "styles.css", + "output": "styles.min.css", + "fallbacks": { + "autoprefixer": true, + "variables": true, + "rem": ["62.5%", {"replace": false}], + "pseudoElements": true + }, + "optimizers": { + "import": true, + "minifier": false, + "mqpacker": true + } +} \ No newline at end of file diff --git a/future-proof/_README.md b/future-proof/_README.md new file mode 100644 index 0000000..ddd5b1e --- /dev/null +++ b/future-proof/_README.md @@ -0,0 +1,18 @@ +KNACSS-canary is an **experimental version** for KNACSS. + +No preprocessors, nos cheats. Only pure, standard CSS. + +Uses : +- standards CSS variables +- calc() +- rem +- other standards + +Needs : +- a CSS post-processor such as www.pleeease.io in order to polyfill every features used + +Config : +- install nodeJS +- install Pleeease : `npm install pleeease -g` +- adjust `.pleeeaserc` config to your needs +- the `styles.css` file imports KNACSS and will be watched and compiled to `styles.min.css` with a simple `pleeease compile` or `pleeease watch` command diff --git a/future-proof/css-includes/00-config.css b/future-proof/css-includes/00-config.css new file mode 100644 index 0000000..6191f10 --- /dev/null +++ b/future-proof/css-includes/00-config.css @@ -0,0 +1,46 @@ +/* Config file : variables, mixins, ... */ + +:root { + + /* font sizes */ + --base-font-size : 14; /* if "14" then 1em = 14px */ + --line-height : 1.5; /* equiv line-height 1.5 */ + --h1-size : 3.2rem; /* equiv "32px" */ + --h2-size : 2.8rem; /* equiv "28px" */ + --h3-size : 2.4rem; /* equiv "24px" */ + --h4-size : 2.0rem; /* equiv "20px" */ + --h5-size : 1.8rem; /* equiv "18px" */ + --h6-size : 1.6rem; /* equiv "16px" */ + + /* font stacks */ + --font-stack-common : Helvetica, Arial, sans-serif; + --font-stack-monospace : Consolas, 'DejaVu Sans Mono', Courier, monospace; + --font-stack-universal : FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; + + /* font colors */ + --base-color : #000; /* text color on body */ + --base-color-link : #333; /* primary links color */ + --base-color-link-hover : #000; /* primary hovered/focused links color */ + + /* backgrounds */ + --base-background : #fff; /* body background color */ + + /* spacings */ + --tiny-value : 0.5em; /* tiny value for margins / paddings */ + --small-value : 1em; /* small value for margins / paddings */ + --medium-value : 2em; /* medium value for margins / paddings */ + --large-value : 4em; /* large value for margins / paddings */ + --extra-large-value : 6em; /* extra large value for margins / paddings */ + --ultra-large-value : 10em; /* ultra large value for margins / paddings */ + + /* breakpoints */ + --tiny-screen : 320px; /* tiny screens media query */ + --small-screen : 480px; /* small screens media query */ + --medium-screen : 768px; /* small screens media query */ + --large-screen : 1024px; /* large screens media query */ + --extra-large-screen : 1280px; /* extra large screens media query */ + --ultra-large-screen : 1600px; /* ultra large screens media query */ + + /* misc */ + --gutter : 20px; /* gutter value (%, px, em, rem) for grid layouts */ +} \ No newline at end of file diff --git a/future-proof/css-includes/01-base.css b/future-proof/css-includes/01-base.css new file mode 100644 index 0000000..0a190f3 --- /dev/null +++ b/future-proof/css-includes/01-base.css @@ -0,0 +1,637 @@ +/*! +* www.KNACSS.com V3.0.3 (2014-05-21) @author: Raphael Goetter, Alsacreations +* Licence WTFPL http://www.wtfpl.net/ +*/ + +/* ----------------------------- */ +/* == soft reset */ +/* ----------------------------- */ + +/* switching box model for all elements */ +* { + box-sizing: border-box; +} + +/* soft reset */ +html, +body { + margin: 0; + padding: 0; +} + +ul, +ol { + padding-left: 2em; +} + +ul.unstyled { + list-style: none; +} + +img { + height: auto; + vertical-align: middle; + border: 0; +} + +audio, +canvas, +video { + display: inline-block; +} + +svg:not(:root) { + overflow: hidden; +} + +/* ----------------------------- */ +/* == typography */ +/* ----------------------------- */ + + +html { + + /* set base font-size to equiv "10px", which is adapted to rem unit */ + font-size: 62.5%; + + /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */ + /* thanks to @guardian, @victorbritopro and @eQRoeil */ + font-size: calc(1em * 0.625); + + /* disallow text zooming on orientation change (non standard property) */ + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +body { + + /* set body font-size in em (1.4em equiv "14px") */ + font-size: calc(var(--base-font-size) * 0.1em); + + background-color: var(--base-background); + color: var(--base-color); + font-family: var(--font-stack-common); + line-height: var(--line-height); +} + +/* font-sizing for content */ +p, +.p-like, +ul, +ol, +dl, +blockquote, +pre, +td, +th, +label, +textarea, +caption, +details, +figure { + margin-top: 0.75em; + margin-bottom: 0; + line-height: var(--line-height); +} + +h1, +.h1-like { + font-size: var(--h1-size); +} + +h2, +.h2-like { + font-size: var(--h2-size); +} + +h3, +.h3-like { + font-size: var(--h3-size); +} + +h4, +.h4-like { + font-size: var(--h4-size); +} + +h5, +.h5-like { + font-size: var(--h5-size); +} + +h6, +.h6-like { + font-size: var(--h6-size); +} + +/* alternate font-sizing */ +.smaller { + font-size: 0.7em; +} + +.small { + font-size: 0.9em; +} + +.big { + font-size: 1.1em; +} + +.bigger { + font-size: 1.3em; +} + +.biggest { + font-size: 1.6em; +} + +code, +pre, +samp, +kbd { + /* IE fix */ + white-space: pre-line; + white-space: pre-wrap; + font-family: var(--font-stack-monospace); + line-height: normal; +} +em, +.em, +address, +cite, +dfn, +i, +var { + font-style: italic; +} +.no-em { + font-style: normal; +} +strong, +.strong { + font-weight: bold; +} +.no-strong { + font-weight: normal; +} +small, +sub, +sup { + font-size: smaller; +} + +/* ----------------------------- */ +/* == hiding content */ +/* ----------------------------- */ + +/* hidden but not for assistance tools, Yahoo! method */ +.visually-hidden { + position: absolute !important; + border: 0 !important; + height: 1px !important; + width: 1px !important; + padding: 0 !important; + overflow: hidden !important; + clip: rect(1px, 1px, 1px, 1px) !important; +} + +body > script { + display: none !important; +} + +@media (max-width: 480px) { + .no-small-screen { + display: none; + } +} + +@media (min-width: 1024px) { + .no-large-screen { + display: none; + } +} + +/* ----------------------------- */ +/* == browsers consistency */ +/* ----------------------------- */ + +/* avoid top margins on first content element */ +p:first-child, +.p-like: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 .p-like, +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: var(--medium-value); +} + +/* ----------------------------- */ +/* ==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 { + 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 (or starting) elements */ +.left, +.start { + float: left; +} + +img.left, +img.start { + margin-right: var(--small-value); +} + +/* right (or ending) elements */ +.right, +.end { + float: right; +} + +img.right, +img.end { + margin-left: var(--small-value); +} + +img.left, +img.right, +img.start, +img.end { + margin-bottom: var(--tiny-value); +} + +.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; +} + +.w1140p { + width: 1140px; +} + +.mw1140p { + max-width: 1140px; +} + +.wauto { + width: auto; +} + +/* spacing helpers +p,m = padding,margin +a,t,r,b,l = all,top,right,bottom,left +s,m,l,n = small, medium, large, none +*/ +.man { + margin: 0; +} + +.pan { + padding: 0; +} + +.mas { + margin: var(--small-value); +} + +.mam { + margin: var(--medium-value); +} + +.mal { + margin: var(--large-value); +} + +.pas { + padding: var(--small-value); +} + +.pam { + padding: var(--medium-value); +} + +.pal { + padding: var(--large-value); +} + +.mtn { + margin-top: 0; +} + +.mts { + margin-top: var(--small-value); +} + +.mtm { + margin-top: var(--medium-value); +} + +.mtl { + margin-top: var(--large-value); +} + +.mrn { + margin-right: 0; +} + +.mrs { + margin-right: var(--small-value); +} + +.mrm { + margin-right: var(--medium-value); +} + +.mrl { + margin-right: var(--large-value); +} + +.mbn { + margin-bottom: 0; +} + +.mbs { + margin-bottom: var(--small-value); +} + +.mbm { + margin-bottom: var(--medium-value); +} + +.mbl { + margin-bottom: var(--large-value); +} + +.mln { + margin-left: 0; +} + +.mls { + margin-left: var(--small-value); +} + +.mlm { + margin-left: var(--medium-value); +} + +.mll { + margin-left: var(--large-value); +} + +.ptn { + padding-top: 0; +} + +.pts { + padding-top: var(--small-value); +} + +.ptm { + padding-top: var(--medium-value); +} + +.ptl { + padding-top: var(--large-value); +} + +.prn { + padding-right: 0; +} + +.prs { + padding-right: var(--small-value); +} + +.prm { + padding-right: var(--medium-value); +} + +.prl { + padding-right: var(--large-value); +} + +.pbn { + padding-bottom: 0; +} + +.pbs { + padding-bottom: var(--small-value); +} + +.pbm { + padding-bottom: var(--medium-value); +} + +.pbl { + padding-bottom: var(--large-value); +} + +.pln { + padding-left: 0; +} + +.pls { + padding-left: var(--small-value); +} + +.plm { + padding-left: var(--medium-value); +} + +.pll { + padding-left: var(--large-value); +} + diff --git a/future-proof/css-includes/02-grids.css b/future-proof/css-includes/02-grids.css new file mode 100644 index 0000000..d21dc25 --- /dev/null +++ b/future-proof/css-includes/02-grids.css @@ -0,0 +1,225 @@ + +/* ---------------------------------- */ +/* ==classic grids */ +/* .. use it when gutter size matters */ +/* ---------------------------------- */ + +/* grids inspired from SUIT https://github.com/suitcss/suit */ + +/* overall container of grids */ +.grid { + overflow: hidden; +} + +/* global styles for direct child ex. .grid3 */ +.grid > * { + display: block; + padding: 0; + /* gutter value */ + margin-left: -var(--gutter); + text-align: left; +} + +/* global styles for each "cell" */ +.grid > * > * { + display: inline-block; + /* gutter value */ + padding-left: var(--gutter); + margin-left: 0; + vertical-align: top; +} + +/* whitespace fixing for modern browsers including IE9+ */ +:root .grid { + font-size: 0; + /* fallback for IE9+ */ + text-justify: distribute-all-lines; +} + +:root .grid > * > * { + font-size: calc(var(--base-font-size) / 10rem); +} + +/* Opera hack */ +.opera:-o-prefocus, +.grid > * { + word-spacing: -0.43em; +} + +.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: 480px) { + .grid3 > *, + .grid4 > *, + .grid5 > *, + .grid6 > *, + .grid8 > *, + .grid10 > *, + .grid12 > * { + width: 50%; + } +} +@media (max-width: 320px) { + .grid > * > * { + width: 100% !important; + } +} + +/* ---------------------------------- */ +/* ==autogrids */ +/* .. to automatically justify blocs */ +/* ---------------------------------- */ + +/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */ + +/* container of autogrids */ +[class*="autogrid"] { + text-align: justify; +} + +[class*="autogrid"]:after { + content: ""; + display: inline-block; + width: 100%; +} + +[class*="autogrid"] > * { + display: inline-block; + vertical-align: top; + text-align: left; +} + +/* whitespace fixing for modern browsers including IE9+ */ +:root [class*="autogrid"] { + font-size: 0; + /* fallback for IE9+ */ + text-justify: distribute-all-lines; +} + +:root [class*="autogrid"] > * { + font-size: calc(var(--base-font-size) / 10rem); +} + +/* Opera hack */ +[class*="autogrid"]:-o-prefocus { + word-spacing: -0.43em; +} + +.autogrid2 > * { + width: 49%; +} + +.autogrid3 > * { + width: 32%; +} + +.autogrid4 > * { + width: 23.6%; +} + +.autogrid5 > * { + width: 19%; +} + +.autogrid6 > * { + width: 15%; +} + +.autogrid8 > * { + width: 10.8%; +} + +.autogrid10 > * { + width: 9%; +} + +.autogrid12 > * { + width: 6.4%; +} + +@media (max-width: 1024px) { + .autogrid5 > *, + .autogrid6 > *, + .autogrid8 > *, + .autogrid10 > *, + .autogrid12 > * { + width: 32%; + } +} + +@media (max-width: 480px) { + .autogrid5 > *, + .autogrid6 > *, + .autogrid8 > *, + .autogrid10 > *, + .autogrid12 > * { + width: 49%; + } +} + +@media (max-width: 320px) { + [class*="autogrid"] > * { + width: 100%; + } +} diff --git a/future-proof/css-includes/03-tables.css b/future-proof/css-includes/03-tables.css new file mode 100644 index 0000000..2ba3e2e --- /dev/null +++ b/future-proof/css-includes/03-tables.css @@ -0,0 +1,39 @@ + +/* ----------------------------- */ +/* ==tables */ +/* ----------------------------- */ + +table, +.table { + width: 100%; + max-width : 100%; + table-layout: fixed; + border-collapse: collapse; + vertical-align: top; + border: 1px solid #ccc; +} + +.table { + display: table; +} + +table#recaptcha_table, +table.table-auto { + table-layout:auto; +} + +caption { + padding: var(--small-value); + color: #555; + font-style: italic; +} + +td, +th { + padding: 0.3em 0.8em; + border: 1px #aaa dotted; + vertical-align: top; + min-width: var(--medium-value); + cursor: default; + text-align: left; +} diff --git a/future-proof/css-includes/04-forms.css b/future-proof/css-includes/04-forms.css new file mode 100644 index 0000000..cd4a570 --- /dev/null +++ b/future-proof/css-includes/04-forms.css @@ -0,0 +1,89 @@ +/* ----------------------------- */ +/* ==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 { + min-height: 5em; + vertical-align: top; + font-family: inherit; + font-size: inherit; + resize: vertical; +} + +/* clickable input types in iOS */ +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; + -webkit-appearance: button; +} + +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; +} diff --git a/future-proof/css-includes/05-icons.css b/future-proof/css-includes/05-icons.css new file mode 100644 index 0000000..b75d7bb --- /dev/null +++ b/future-proof/css-includes/05-icons.css @@ -0,0 +1,159 @@ +/* ----------------------------- */ +/* ==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: 480px) { + .icon:before, + .icon.after:after { + font: 1em/0.6 sans-serif; + } +} + +.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/future-proof/css-includes/06-rwd.css b/future-proof/css-includes/06-rwd.css new file mode 100644 index 0000000..671b1b3 --- /dev/null +++ b/future-proof/css-includes/06-rwd.css @@ -0,0 +1,275 @@ +/* ----------------------------- */ +/* ==desktop and HD devices */ +/* ----------------------------- */ + +@media (min-width: 480px) { +/* 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 high density devices */ +} + +/* ---------------------------------- */ +/* ==Responsive large / small / tiny */ +/* ---------------------------------- */ + +@media (min-width: 1024px) { + + /* 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-man { + margin: 0 !important; + } +} + +@media (max-width: 480px) { + + /* 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; + } + + /* 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-man { + margin: 0 !important; + } + + .small-pan { + padding: 0 !important; + } +} + +@media (max-width: 320px) { + + /* 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-man { + margin: 0 !important; + } + + .tiny-pan { + padding: 0 !important; + } +} diff --git a/future-proof/css-includes/07-flexbox.css b/future-proof/css-includes/07-flexbox.css new file mode 100644 index 0000000..189a809 --- /dev/null +++ b/future-proof/css-includes/07-flexbox.css @@ -0,0 +1,30 @@ + +/* flexbox layout +Tutorial: http://knacss.com/demos/tutoriel.html#flex */ +.flex { + display : flex; +} + +.flex-h { + flex-direction: row; +} + +.flex-v { + flex-direction: column; +} + +.flex-fluid { + flex: 1; +} + +.flex-start { + order : -1; +} + +.flex-mid { + order : 1; +} + +.flex-end { + order : 42; +} diff --git a/future-proof/css-includes/08-print.css b/future-proof/css-includes/08-print.css new file mode 100644 index 0000000..952cc72 --- /dev/null +++ b/future-proof/css-includes/08-print.css @@ -0,0 +1,87 @@ + +/* 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; + } + + .no-print { + display: none; + } + + img { + filter: grayscale(100%); + } + + /* no orphans, no widows */ + p, + blockquote { + orphans: 3; + widows: 3; + } + + /* no breaks inside these elements */ + blockquote, + ul, + ol { + page-break-inside: avoid; + } + + /* page break before main headers */ + h1 { + page-break-before: always; + } + + /* no breaks after these elements */ + h1, + h2, + h3, + caption { + page-break-after: avoid; + } + + a { + color: #000 !important; + text-decoration: underline !important; + } + + /* displaying URLs */ + a[href]:after { + content: " (" attr(href) ")"; + } + + a[href^="javascript:"]:after, + a[href^="#"]:after { + content: ""; + } +} diff --git a/future-proof/css-includes/09-booleans.css b/future-proof/css-includes/09-booleans.css new file mode 100644 index 0000000..584a885 --- /dev/null +++ b/future-proof/css-includes/09-booleans.css @@ -0,0 +1,38 @@ + +/* styling skip links */ + +.skip-links { + position: absolute; +} + +.skip-links a { + position: absolute; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); + padding: 0.5em; + background: black; + color: white; + text-decoration: none; +} + +.skip-links a:focus { + position: static; + overflow: visible; + clip: auto; +} + +@media (max-width: 480px) { + /* hyphenations on small screens */ + /* you shall not pass */ + div, + textarea, + table, + td, + th, + code, + pre, + samp { + word-wrap: break-word; + hyphens: auto; + } +} diff --git a/future-proof/css-includes/10-gmaps.css b/future-proof/css-includes/10-gmaps.css new file mode 100644 index 0000000..486a3dc --- /dev/null +++ b/future-proof/css-includes/10-gmaps.css @@ -0,0 +1,18 @@ + +/* ----------------------------- */ +/* ==gmaps support */ +/* ----------------------------- */ +/* Google Gmap3 bug fix on images */ +.gm-style img { + height: 100%; +} + +:not(.gm-style) img { + height: auto; +} + +.gm-style img, +.gmnoscreen img, +.gmnoprint img { + max-width: none !important; +} diff --git a/future-proof/css-includes/11-ie.css b/future-proof/css-includes/11-ie.css new file mode 100644 index 0000000..c5a4edd --- /dev/null +++ b/future-proof/css-includes/11-ie.css @@ -0,0 +1,76 @@ +/* ----------------------------- */ +/* ==IE6, IE7, IE8 support */ +/* ----------------------------- */ + +/* Active box-sizing for IE6/IE7 */ +/* @source https://github.com/Schepp/box-sizing-polyfill + +.ie67 * { + behavior: url(/js/boxsizing.htc); +} +*/ + +/* @bugfix for IE8 */ +.ie678 img { + width: auto; +} + +.ie678 .gm-style img { + height: 100%; +} + +/* hasLayout for IE6/IE7 */ +.clearfix, +.line, +.mod, +.row, +.col { + *zoom: 1; +} + +/*! inline-block and table-cell for IE6/IE7 */ +/*! warning: .col needs width on IE6/IE7 */ +.btn, +.col, +.inbl { + *display: inline; + *zoom: 1; +} + +.visually-hidden { + *clip: rect(1px 1px 1px 1px); +} + +/* IE8 grid hack */ +.ie8 .grid > *, +.ie8 [class*="autogrid"] > * { + letter-spacing: -0.31em; + text-rendering: optimizespeed; +} + +.ie8 .grid > * > *, +.ie8 [class*="autogrid"] > * > *{ + letter-spacing: normal; + word-spacing: normal; + text-rendering: auto; +} + +/* IE7 grid hack */ +.grid > * > *, +[class*="autogrid"] > * > *{ + *display: inline; + *zoom: 1; +} + +/* forms */ +/* Corrects excess space around these inputs in IE8/9 */ +.ie678 input[type="checkbox"], +.ie678 input[type="radio"] { + padding: 0; +} + +/* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */ +.ie678 textarea { + overflow: auto; +} + diff --git a/future-proof/css-includes/12-styling.css b/future-proof/css-includes/12-styling.css new file mode 100644 index 0000000..8b6cfc0 --- /dev/null +++ b/future-proof/css-includes/12-styling.css @@ -0,0 +1,119 @@ +/* ----------------------------- */ +/* ==minor stylings */ +/* ----------------------------- */ + +/* styling elements */ +code, +kbd, +mark { + border-radius: 2px; +} + +kbd { + padding: 0 2px; + border: 1px solid #999; +} + +code { + padding: 2px 4px; + background: rgba(0,0,0,0.04); + color: #b11; +} + +pre code { + padding: none; + background: none; + color: inherit; + border-radius: 0; +} + +mark { + padding:2px 4px; + background: #ff0; +} + +sup, +sub { + vertical-align: 0; + position: relative; +} + +sup { + bottom: 1ex; +} + +sub { + top: 0.5ex; +} + +blockquote { + margin-left: 0; + padding-left: 1em; + border-left: 4px solid rgba(0,0,0,0.15); + font-style: italic; +} + +q { + font-style: normal; +} + +q, +.q { + quotes: "“\00a0" "\00a0”"; +} + +q:lang(fr), +.q:lang(fr) { + quotes: "«\00a0" "\00a0»"; +} + +hr { + display: block; + clear: both; + height: 1px; + margin: 1em 0 2em; + padding: 0; + border: 0; + color: #ccc; + background-color: #ccc; +} + +/* 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); +} diff --git a/future-proof/css-includes/knacss.css b/future-proof/css-includes/knacss.css new file mode 100644 index 0000000..1e5a5e5 --- /dev/null +++ b/future-proof/css-includes/knacss.css @@ -0,0 +1,18 @@ +/* Config file */ +@import "00-config.css"; + +/* Base styles */ +@import "01-base.css"; + +/* Optional files : chose the ones you need */ +@import "02-grids.css"; +@import "03-tables.css"; +@import "04-forms.css"; +@import "05-icons.css"; +@import "06-rwd.css"; +@import "07-flexbox.css"; +@import "08-print.css"; +@import "09-booleans.css"; +@import "10-gmaps.css"; +@import "11-ie.css"; +@import "12-styling.css"; diff --git a/future-proof/styles.css b/future-proof/styles.css new file mode 100644 index 0000000..361d496 --- /dev/null +++ b/future-proof/styles.css @@ -0,0 +1,8 @@ +@import url("css-includes/knacss.css"); + +/* ----------------------------- */ +/* ==own stylesheet */ +/* ----------------------------- */ + +/* Here should go your own CSS styles */ + diff --git a/future-proof/styles.min.css b/future-proof/styles.min.css new file mode 100644 index 0000000..4256ce7 --- /dev/null +++ b/future-proof/styles.min.css @@ -0,0 +1,1880 @@ +/* Config file *//* Config file : variables, mixins, ... */ + +:root { + + /* font sizes */ + --base-font-size : 14; /* if "14" then 1em = 14px */ + --line-height : 1.5; /* equiv line-height 1.5 */ + --h1-size : 32px; + --h1-size : 3.2rem; /* equiv "32px" */ + --h2-size : 28px; + --h2-size : 2.8rem; /* equiv "28px" */ + --h3-size : 24px; + --h3-size : 2.4rem; /* equiv "24px" */ + --h4-size : 20px; + --h4-size : 2.0rem; /* equiv "20px" */ + --h5-size : 18px; + --h5-size : 1.8rem; /* equiv "18px" */ + --h6-size : 16px; + --h6-size : 1.6rem; /* equiv "16px" */ + + /* font stacks */ + --font-stack-common : Helvetica, Arial, sans-serif; + --font-stack-monospace : Consolas, 'DejaVu Sans Mono', Courier, monospace; + --font-stack-universal : FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; + + /* font colors */ + --base-color : #000; /* text color on body */ + --base-color-link : #333; /* primary links color */ + --base-color-link-hover : #000; /* primary hovered/focused links color */ + + /* backgrounds */ + --base-background : #fff; /* body background color */ + + /* spacings */ + --tiny-value : 0.5em; /* tiny value for margins / paddings */ + --small-value : 1em; /* small value for margins / paddings */ + --medium-value : 2em; /* medium value for margins / paddings */ + --large-value : 4em; /* large value for margins / paddings */ + --extra-large-value : 6em; /* extra large value for margins / paddings */ + --ultra-large-value : 10em; /* ultra large value for margins / paddings */ + + /* breakpoints */ + --tiny-screen : 320px; /* tiny screens media query */ + --small-screen : 480px; /* small screens media query */ + --medium-screen : 768px; /* small screens media query */ + --large-screen : 1024px; /* large screens media query */ + --extra-large-screen : 1280px; /* extra large screens media query */ + --ultra-large-screen : 1600px; /* ultra large screens media query */ + + /* misc */ + --gutter : 20px; /* gutter value (%, px, em, rem) for grid layouts */ +} + +/* Base styles *//*! +* www.KNACSS.com V3.0.3 (2014-05-21) @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 { + height: auto; + vertical-align: middle; + border: 0; +} + +audio, +canvas, +video { + display: inline-block; +} + +svg:not(:root) { + overflow: hidden; +} + +/* ----------------------------- */ +/* == typography */ +/* ----------------------------- */ + + +html { + + /* set base font-size to equiv "10px", which is adapted to rem unit */ + font-size: 62.5%; + + /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */ + /* thanks to @guardian, @victorbritopro and @eQRoeil */ + font-size: -webkit-calc(1em * 0.625); + font-size: calc(1em * 0.625); + + /* disallow text zooming on orientation change (non standard property) */ + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +body { + + /* set body font-size in em (1.4em equiv "14px") */ + font-size: -webkit-calc(14 * 0.1em); + font-size: calc(14 * 0.1em); + + background-color: #fff; + color: #000; + font-family: Helvetica, Arial, sans-serif; + line-height: 1.5; +} + +/* font-sizing for content */ +p, +.p-like, +ul, +ol, +dl, +blockquote, +pre, +td, +th, +label, +textarea, +caption, +details, +figure { + margin-top: 0.75em; + margin-bottom: 0; + line-height: 1.5; +} + +h1, +.h1-like { + font-size: 32px; + font-size: 3.2rem; +} + +h2, +.h2-like { + font-size: 28px; + font-size: 2.8rem; +} + +h3, +.h3-like { + font-size: 24px; + font-size: 2.4rem; +} + +h4, +.h4-like { + font-size: 20px; + font-size: 2.0rem; +} + +h5, +.h5-like { + font-size: 18px; + font-size: 1.8rem; +} + +h6, +.h6-like { + font-size: 16px; + font-size: 1.6rem; +} + +/* alternate font-sizing */ +.smaller { + font-size: 0.7em; +} + +.small { + font-size: 0.9em; +} + +.big { + font-size: 1.1em; +} + +.bigger { + font-size: 1.3em; +} + +.biggest { + font-size: 1.6em; +} + +code, +pre, +samp, +kbd { + /* IE fix */ + white-space: pre-line; + white-space: pre-wrap; + font-family: Consolas, 'DejaVu Sans Mono', Courier, monospace; + line-height: normal; +} +em, +.em, +address, +cite, +dfn, +i, +var { + font-style: italic; +} +.no-em { + font-style: normal; +} +strong, +.strong { + font-weight: bold; +} +.no-strong { + font-weight: normal; +} +small, +sub, +sup { + font-size: smaller; +} + +/* ----------------------------- */ +/* == hiding content */ +/* ----------------------------- */ + +/* hidden but not for assistance tools, Yahoo! method */ +.visually-hidden { + position: absolute !important; + border: 0 !important; + height: 1px !important; + width: 1px !important; + padding: 0 !important; + overflow: hidden !important; + clip: rect(1px, 1px, 1px, 1px) !important; +} + +body > script { + display: none !important; +} + +/* ----------------------------- */ +/* == browsers consistency */ +/* ----------------------------- */ + +/* avoid top margins on first content element */ +p:first-child, +.p-like: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 .p-like, +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: 2em; +} + +/* ----------------------------- */ +/* ==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 { + 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 (or starting) elements */ +.left, +.start { + float: left; +} + +img.left, +img.start { + margin-right: 1em; +} + +/* right (or ending) elements */ +.right, +.end { + float: right; +} + +img.right, +img.end { + margin-left: 1em; +} + +img.left, +img.right, +img.start, +img.end { + margin-bottom: 0.5em; +} + +.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; +} + +.w1140p { + width: 1140px; +} + +.mw1140p { + max-width: 1140px; +} + +.wauto { + width: auto; +} + +/* spacing helpers +p,m = padding,margin +a,t,r,b,l = all,top,right,bottom,left +s,m,l,n = small, medium, large, none +*/ +.man { + margin: 0; +} + +.pan { + padding: 0; +} + +.mas { + margin: 1em; +} + +.mam { + margin: 2em; +} + +.mal { + margin: 4em; +} + +.pas { + padding: 1em; +} + +.pam { + padding: 2em; +} + +.pal { + padding: 4em; +} + +.mtn { + margin-top: 0; +} + +.mts { + margin-top: 1em; +} + +.mtm { + margin-top: 2em; +} + +.mtl { + margin-top: 4em; +} + +.mrn { + margin-right: 0; +} + +.mrs { + margin-right: 1em; +} + +.mrm { + margin-right: 2em; +} + +.mrl { + margin-right: 4em; +} + +.mbn { + margin-bottom: 0; +} + +.mbs { + margin-bottom: 1em; +} + +.mbm { + margin-bottom: 2em; +} + +.mbl { + margin-bottom: 4em; +} + +.mln { + margin-left: 0; +} + +.mls { + margin-left: 1em; +} + +.mlm { + margin-left: 2em; +} + +.mll { + margin-left: 4em; +} + +.ptn { + padding-top: 0; +} + +.pts { + padding-top: 1em; +} + +.ptm { + padding-top: 2em; +} + +.ptl { + padding-top: 4em; +} + +.prn { + padding-right: 0; +} + +.prs { + padding-right: 1em; +} + +.prm { + padding-right: 2em; +} + +.prl { + padding-right: 4em; +} + +.pbn { + padding-bottom: 0; +} + +.pbs { + padding-bottom: 1em; +} + +.pbm { + padding-bottom: 2em; +} + +.pbl { + padding-bottom: 4em; +} + +.pln { + padding-left: 0; +} + +.pls { + padding-left: 1em; +} + +.plm { + padding-left: 2em; +} + +.pll { + padding-left: 4em; +} + +/* Optional files : chose the ones you need */ +/* ---------------------------------- */ +/* ==classic grids */ +/* .. use it when gutter size matters */ +/* ---------------------------------- */ + +/* grids inspired from SUIT https://github.com/suitcss/suit */ + +/* overall container of grids */ +.grid { + overflow: hidden; +} + +/* global styles for direct child ex. .grid3 */ +.grid > * { + display: block; + padding: 0; + /* gutter value */ + margin-left: -20px; + text-align: left; +} + +/* global styles for each "cell" */ +.grid > * > * { + display: inline-block; + /* gutter value */ + padding-left: 20px; + margin-left: 0; + vertical-align: top; +} + +/* whitespace fixing for modern browsers including IE9+ */ +:root .grid { + font-size: 0; + /* fallback for IE9+ */ + text-justify: distribute-all-lines; +} + +:root .grid > * > * { + font-size: -webkit-calc(14 / 100px); + font-size: calc(14 / 100px); + font-size: -webkit-calc(14 / 10rem); + font-size: calc(14 / 10rem); +} + +/* Opera hack */ +.opera:-o-prefocus, +.grid > * { + word-spacing: -0.43em; +} + +.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 */ + +/* ---------------------------------- */ +/* ==autogrids */ +/* .. to automatically justify blocs */ +/* ---------------------------------- */ + +/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */ + +/* container of autogrids */ +[class*="autogrid"] { + text-align: justify; +} + +[class*="autogrid"]:after { + content: ""; + display: inline-block; + width: 100%; +} + +[class*="autogrid"] > * { + display: inline-block; + vertical-align: top; + text-align: left; +} + +/* whitespace fixing for modern browsers including IE9+ */ +:root [class*="autogrid"] { + font-size: 0; + /* fallback for IE9+ */ + text-justify: distribute-all-lines; +} + +:root [class*="autogrid"] > * { + font-size: -webkit-calc(14 / 100px); + font-size: calc(14 / 100px); + font-size: -webkit-calc(14 / 10rem); + font-size: calc(14 / 10rem); +} + +/* Opera hack */ +[class*="autogrid"]:-o-prefocus { + word-spacing: -0.43em; +} + +.autogrid2 > * { + width: 49%; +} + +.autogrid3 > * { + width: 32%; +} + +.autogrid4 > * { + width: 23.6%; +} + +.autogrid5 > * { + width: 19%; +} + +.autogrid6 > * { + width: 15%; +} + +.autogrid8 > * { + width: 10.8%; +} + +.autogrid10 > * { + width: 9%; +} + +.autogrid12 > * { + width: 6.4%; +} + +@media (max-width: 1024px) { + .grid5 > *, + .grid6 > *, + .grid8 > *, + .grid10 > *, + .grid12 > * { + width: 33.333%; + } + + + .autogrid5 > *, + .autogrid6 > *, + .autogrid8 > *, + .autogrid10 > *, + .autogrid12 > * { + width: 32%; + } +} +/* ----------------------------- */ +/* ==tables */ +/* ----------------------------- */ + +table, +.table { + width: 100%; + max-width : 100%; + table-layout: fixed; + border-collapse: collapse; + vertical-align: top; + border: 1px solid #ccc; +} + +.table { + display: table; +} + +table#recaptcha_table, +table.table-auto { + table-layout:auto; +} + +caption { + padding: 1em; + color: #555; + font-style: italic; +} + +td, +th { + padding: 0.3em 0.8em; + border: 1px #aaa dotted; + vertical-align: top; + min-width: 2em; + cursor: default; + text-align: left; +}/* ----------------------------- */ +/* ==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 { + min-height: 5em; + vertical-align: top; + font-family: inherit; + font-size: inherit; + resize: vertical; +} + +/* clickable input types in iOS */ +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; + -webkit-appearance: button; +} + +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; +}/* ----------------------------- */ +/* ==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: 480px) { + .icon:before, + .icon.after:after { + font: 1em/0.6 sans-serif; + } +} + +.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; +}/* ----------------------------- */ +/* ==desktop and HD devices */ +/* ----------------------------- */ + +@media (min-width: 480px) { +/* 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 high density devices */ +} + +/* ---------------------------------- */ +/* ==Responsive large / small / tiny */ +/* ---------------------------------- */ + +@media (min-width: 1024px) { + .no-large-screen { + display: none; + } + + + + /* 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-man { + margin: 0 !important; + } +} + +@media (max-width: 320px) { + .grid > * > * { + width: 100% !important; + } + + + [class*="autogrid"] > * { + width: 100%; + } + + + + /* 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-man { + margin: 0 !important; + } + + .tiny-pan { + padding: 0 !important; + } +} +/* flexbox layout +Tutorial: http://knacss.com/demos/tutoriel.html#flex */ +.flex { + display : -webkit-box; + display : -webkit-flex; + display : -ms-flexbox; + display : flex; +} + +.flex-h { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.flex-v { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} + +.flex-fluid { + -webkit-box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; +} + +.flex-start { + -webkit-box-ordinal-group : 0; + -webkit-order : -1; + -ms-flex-order : -1; + order : -1; +} + +.flex-mid { + -webkit-box-ordinal-group : 2; + -webkit-order : 1; + -ms-flex-order : 1; + order : 1; +} + +.flex-end { + -webkit-box-ordinal-group : 43; + -webkit-order : 42; + -ms-flex-order : 42; + 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; + } + + .no-print { + display: none; + } + + img { + -webkit-filter: grayscale(100%); + filter: grayscale(100%); + } + + /* no orphans, no widows */ + p, + blockquote { + orphans: 3; + widows: 3; + } + + /* no breaks inside these elements */ + blockquote, + ul, + ol { + page-break-inside: avoid; + } + + /* page break before main headers */ + h1 { + page-break-before: always; + } + + /* no breaks after these elements */ + h1, + h2, + h3, + caption { + page-break-after: avoid; + } + + a { + color: #000 !important; + text-decoration: underline !important; + } + + /* displaying URLs */ + a[href]:after { + content: " (" attr(href) ")"; + } + + a[href^="javascript:"]:after, + a[href^="#"]:after { + content: ""; + } +} +/* styling skip links */ + +.skip-links { + position: absolute; +} + +.skip-links a { + position: absolute; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); + padding: 0.5em; + background: black; + color: white; + text-decoration: none; +} + +.skip-links a:focus { + position: static; + overflow: visible; + clip: auto; +} + +@media (max-width: 480px) { + .no-small-screen { + display: none; + } + + + .grid3 > *, + .grid4 > *, + .grid5 > *, + .grid6 > *, + .grid8 > *, + .grid10 > *, + .grid12 > * { + width: 50%; + } + + + .autogrid5 > *, + .autogrid6 > *, + .autogrid8 > *, + .autogrid10 > *, + .autogrid12 > * { + width: 49%; + } + + + + /* 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; + } + + /* 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-man { + margin: 0 !important; + } + + .small-pan { + padding: 0 !important; + } + + + /* hyphenations on small screens */ + /* 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; + hyphens: auto; + } +} +/* ----------------------------- */ +/* ==gmaps support */ +/* ----------------------------- */ +/* Google Gmap3 bug fix on images */ +.gm-style img { + height: 100%; +} + +:not(.gm-style) img { + height: auto; +} + +.gm-style img, +.gmnoscreen img, +.gmnoprint img { + max-width: none !important; +}/* ----------------------------- */ +/* ==IE6, IE7, IE8 support */ +/* ----------------------------- */ + +/* Active box-sizing for IE6/IE7 */ +/* @source https://github.com/Schepp/box-sizing-polyfill + +.ie67 * { + behavior: url(/js/boxsizing.htc); +} +*/ + +/* @bugfix for IE8 */ +.ie678 img { + width: auto; +} + +.ie678 .gm-style img { + height: 100%; +} + +/* hasLayout for IE6/IE7 */ +.clearfix, +.line, +.mod, +.row, +.col { + *zoom: 1; +} + +/*! inline-block and table-cell for IE6/IE7 */ +/*! warning: .col needs width on IE6/IE7 */ +.btn, +.col, +.inbl { + *display: inline; + *zoom: 1; +} + +.visually-hidden { + *clip: rect(1px 1px 1px 1px); +} + +/* IE8 grid hack */ +.ie8 .grid > *, +.ie8 [class*="autogrid"] > * { + letter-spacing: -0.31em; + text-rendering: optimizespeed; +} + +.ie8 .grid > * > *, +.ie8 [class*="autogrid"] > * > *{ + letter-spacing: normal; + word-spacing: normal; + text-rendering: auto; +} + +/* IE7 grid hack */ +.grid > * > *, +[class*="autogrid"] > * > *{ + *display: inline; + *zoom: 1; +} + +/* forms */ +/* Corrects excess space around these inputs in IE8/9 */ +.ie678 input[type="checkbox"], +.ie678 input[type="radio"] { + padding: 0; +} + +/* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */ +.ie678 textarea { + overflow: auto; +}/* ----------------------------- */ +/* ==minor stylings */ +/* ----------------------------- */ + +/* styling elements */ +code, +kbd, +mark { + border-radius: 2px; +} + +kbd { + padding: 0 2px; + border: 1px solid #999; +} + +code { + padding: 2px 4px; + background: rgba(0,0,0,0.04); + color: #b11; +} + +pre code { + padding: none; + background: none; + color: inherit; + border-radius: 0; +} + +mark { + padding:2px 4px; + background: #ff0; +} + +sup, +sub { + vertical-align: 0; + position: relative; +} + +sup { + bottom: 1ex; +} + +sub { + top: 0.5ex; +} + +blockquote { + margin-left: 0; + padding-left: 1em; + border-left: 4px solid rgba(0,0,0,0.15); + font-style: italic; +} + +q { + font-style: normal; +} + +q, +.q { + quotes: "“\00a0" "\00a0”"; +} + +q:lang(fr), +.q:lang(fr) { + quotes: "«\00a0" "\00a0»"; +} + +hr { + display: block; + clear: both; + height: 1px; + margin: 1em 0 2em; + padding: 0; + border: 0; + color: #ccc; + background-color: #ccc; +} + +/* 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); +} + +/* ----------------------------- */ +/* ==own stylesheet */ +/* ----------------------------- */ + +/* Here should go your own CSS styles */ +