for an uneven columns grid container
-/* global styles for direct child ex. .grid3 */
-.grid > * {
- display: block;
- padding: 0;
- /* gutter value */
+// Usage with preprocessors : if you're using LESS, you can config grids variables :
+// n = number of columns (default = 4)
+// example : .grid-perso { .grid(12); }
+// ... or uneven grids :
+// left = left ratio column (default = 2) / right = right ratio column (default = 1)
+// example : .grid-perso { .uneven-grid(2, 1); }
+
+[class*="grid-"] {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-between;
margin-left: -@gutter;
- text-align: left;
}
-/* global styles for each "cell" */
-.grid > * > * {
- display: inline-block;
- /* gutter value */
- padding-left: @gutter;
- margin-left: 0;
- vertical-align: top;
+[class*="grid-"] > * {
+ flex: 0 0 auto;
+ display: block; /* IE fix */
+ width: ~'calc(100% * 1 / @{number} - @{gutter})';
+ margin-left: @gutter;
}
-/* whitespace fixing for modern browsers including IE9+ */
-:root .grid {
- font-size: 0;
- /* fallback for IE9+ */
- text-justify: distribute-all-lines;
+// LESS mixins for *equal* columns grid container
+// example : .grid-perso { .grid(12); }
+.grid(@number:@number, @gutter:@gutter) {
+ & > * {
+ width: ~'calc(100% * 1 / @{number} - @{gutter})';
+ }
+ & > .flexitem-double {
+ width: ~'calc(100% * 2 / @{number} - @{gutter})';
+ }
+ @media (min-width: (@tiny-screen + 1)) and (max-width: @small-screen) {
+ & > * {
+ width: ~'calc(100% * 1 / 2 - @{gutter})';
+ }
+ & > .flexitem-double {
+ width: ~'calc(100% - @{gutter})';
+ }
+ }
+ @media (max-width: @tiny-screen) {
+ & > * {
+ width: ~'calc(100% - @{gutter})';
+ }
+ & > .flexitem-double {
+ width: ~'calc(100% - @{gutter})';
+ }
+ }
}
-:root .grid > * > * {
- /* fallback for Opera Mini */
- font-size: @base-font-size;
- font-size: unit((@base-font-size / 10), rem);
+// Examples : will be compiled in CSS
+
+.grid-2 {
+ .grid(2);
}
-/* Opera hack */
-.opera:-o-prefocus,
-.grid > * {
- word-spacing: -0.43em;
+.grid-3 {
+ .grid(3);
}
-.grid2 > * {
- width: 50%;
+.grid-4 {
+ .grid(4);
}
-.grid3 > * {
- width: 33.333%;
+.grid-5 {
+ .grid(5);
}
-.grid4 > * {
- width: 25%;
+.grid-6 {
+ .grid(6);
}
-.grid5 > * {
- width: 20%;
+.grid-7 {
+ .grid(7);
}
-.grid6 > * {
- width: 16.667%;
+.grid-8 {
+ .grid(8);
}
-.grid8 > * {
- width: 12.5%;
+.grid-10 {
+ .grid(10);
}
-.grid10 > * {
- width: 10%;
+.grid-12 {
+ .grid(12);
}
-.grid12 > * {
- width: 8.333%;
+// LESS mixins for *unequal* columns grid container
+// example : .grid-perso { .uneven-grid(2, 1); }
+ .uneven-grid(@left:@left, @right:@right, @gutter:@gutter) {
+ & > *:nth-child(odd) {
+ @size: (@left / (@left + @right)) * 100%;
+ width: ~'calc(@{size} - @{gutter})';
+ }
+ & > *:nth-child(even) {
+ @size: (@right / (@left + @right)) * 100%;
+ width: ~'calc(@{size} - @{gutter})';
+ }
+ @media (max-width: @tiny-screen) {
+ & > *:nth-child(n) {
+ width: ~'calc(100% - @{gutter})';
+ }
+ }
}
-/* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */
-.grid2-1 > *:first-child,
-.grid1-2 > * + * {
- width: 66.666%;
+
+// Examples : will be compiled in CSS
+
+.grid-2-1 {
+ .uneven-grid(2,1);
}
-.grid1-2 > *:first-child,
-.grid2-1 > * + * {
- width: 33.333%;
+.grid-1-2 {
+ .uneven-grid(1,2);
}
-.grid1-3 > *:first-child,
-.grid3-1 > * + * {
- width: 25%;
+.grid-3-1 {
+ .uneven-grid(3,1);
}
-.grid3-1 > *:first-child,
-.grid1-3 > * + * {
- width: 75%;
+.grid-1-3 {
+ .uneven-grid(1,3);
}
-/* ---------------------------------- */
-/* ==autogrids */
-/* .. to automatically justify blocs */
-/* ---------------------------------- */
-
-/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */
-
-/* container of autogrids */
-[class*="autogrid"] {
- text-align: justify;
+.grid-3-2 {
+ .uneven-grid(3,2);
}
-[class*="autogrid"]:after {
- content: "";
- display: inline-block;
- width: 100%;
+.grid-2-3 {
+ .uneven-grid(2,3);
}
-[class*="autogrid"] > * {
- display: inline-block;
- vertical-align: top;
- text-align: left;
+.grid-4-1 {
+ .uneven-grid(4,1);
}
-/* whitespace fixing for modern browsers including IE9+ */
-:root [class*="autogrid"] {
- font-size: 0;
- /* fallback for IE9+ */
- text-justify: distribute-all-lines;
-}
-
-:root [class*="autogrid"] > * {
- /* fallback for Opera Mini */
- font-size: @base-font-size;
- font-size: unit((@base-font-size / 10), rem);
-}
-
-/* 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%;
-}
+.grid-1-4 {
+ .uneven-grid(1,4);
+}
\ No newline at end of file
diff --git a/less/_04-tables.less b/less/_04-tables.less
index d83ffb5..fe968ad 100644
--- a/less/_04-tables.less
+++ b/less/_04-tables.less
@@ -24,7 +24,7 @@ table.table-auto {
caption {
padding: @small-value;
color: #555;
- font-style: italic;
+ font-style: italic;
}
td,
diff --git a/less/_05-forms.less b/less/_05-forms.less
index cd4a570..97f23fa 100644
--- a/less/_05-forms.less
+++ b/less/_05-forms.less
@@ -27,7 +27,7 @@ label,
font-size: inherit;
}
-label {
+label {
display: inline-block;
vertical-align: middle;
cursor: pointer;
@@ -46,19 +46,6 @@ textarea {
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; } */
@@ -79,11 +66,14 @@ 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;
+.btn:focus,
+input:focus,
+button:focus {
+ outline: 0;
+ -webkit-tap-highlight-color: transparent;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ background-image: none;
}
diff --git a/less/_06-helpers.less b/less/_06-helpers.less
new file mode 100644
index 0000000..2dbd802
--- /dev/null
+++ b/less/_06-helpers.less
@@ -0,0 +1,297 @@
+/* ---------------------------------- */
+/* ==visual helpers */
+/* .. use them with parcimony ! */
+/* ---------------------------------- */
+
+/* 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,
+.ma0 {
+ margin: 0;
+}
+
+.pan,
+.pa0 {
+ padding: 0;
+}
+
+.mas {
+ margin: @small-value;
+}
+
+.mam {
+ margin: @medium-value;
+}
+
+.mal {
+ margin: @large-value;
+}
+
+.pas {
+ padding: @small-value;
+}
+
+.pam {
+ padding: @medium-value;
+}
+
+.pal {
+ padding: @large-value;
+}
+
+.mtn,
+.mt0 {
+ margin-top: 0;
+}
+
+.mts {
+ margin-top: @small-value;
+}
+
+.mtm {
+ margin-top: @medium-value;
+}
+
+.mtl {
+ margin-top: @large-value;
+}
+
+.mrn,
+.mr0 {
+ margin-right: 0;
+}
+
+.mrs {
+ margin-right: @small-value;
+}
+
+.mrm {
+ margin-right: @medium-value;
+}
+
+.mrl {
+ margin-right: @large-value;
+}
+
+.mbn,
+.mb0 {
+ margin-bottom: 0;
+}
+
+.mbs {
+ margin-bottom: @small-value;
+}
+
+.mbm {
+ margin-bottom: @medium-value;
+}
+
+.mbl {
+ margin-bottom: @large-value;
+}
+
+.mln,
+.ml0 {
+ margin-left: 0;
+}
+
+.mls {
+ margin-left: @small-value;
+}
+
+.mlm {
+ margin-left: @medium-value;
+}
+
+.mll {
+ margin-left: @large-value;
+}
+
+.ptn,
+.pt0 {
+ padding-top: 0;
+}
+
+.pts {
+ padding-top: @small-value;
+}
+
+.ptm {
+ padding-top: @medium-value;
+}
+
+.ptl {
+ padding-top: @large-value;
+}
+
+.prn,
+.pr0 {
+ padding-right: 0;
+}
+
+.prs {
+ padding-right: @small-value;
+}
+
+.prm {
+ padding-right: @medium-value;
+}
+
+.prl {
+ padding-right: @large-value;
+}
+
+.pbn,
+.pb0 {
+ padding-bottom: 0;
+}
+
+.pbs {
+ padding-bottom: @small-value;
+}
+
+.pbm {
+ padding-bottom: @medium-value;
+}
+
+.pbl {
+ padding-bottom: @large-value;
+}
+
+.pln,
+.pl0 {
+ padding-left: 0;
+}
+
+.pls {
+ padding-left: @small-value;
+}
+
+.plm {
+ padding-left: @medium-value;
+}
+
+.pll {
+ padding-left: @large-value;
+}
\ No newline at end of file
diff --git a/less/_07-responsive.less b/less/_07-responsive.less
new file mode 100644
index 0000000..4647444
--- /dev/null
+++ b/less/_07-responsive.less
@@ -0,0 +1,372 @@
+/* ----------------------------- */
+/* ==desktop and HD devices */
+/* ----------------------------- */
+
+@media (min-width: (@medium-screen + 1)) {
+ /* 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 */
+/* ---------------------------------- */
+
+@media (min-width: (@medium-screen + 1)) {
+
+ /* 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;
+ }
+}
+
+/* ---------------------------------- */
+/* ==Responsive medium */
+/* ---------------------------------- */
+
+@media (min-width: (@small-screen + 1)) and (max-width: @medium-screen) {
+
+ /* layouts for medium screens */
+ .medium-hidden {
+ display: none !important;
+ }
+
+ .medium-visible {
+ display: block !important;
+ }
+
+ .medium-no-float {
+ float: none;
+ }
+
+ .medium-inbl {
+ display: inline-block;
+ float: none;
+ vertical-align: top;
+ }
+
+ .medium-row {
+ display: table;
+ table-layout: fixed;
+ width: 100% !important;
+ }
+
+ .medium-col {
+ display: table-cell;
+ vertical-align: top;
+ }
+
+ /* widths for medium screens */
+ .medium-w25 {
+ width: 25% !important;
+ }
+
+ .medium-w33 {
+ width: 33.3333% !important;
+ }
+
+ .medium-w50 {
+ width: 50% !important;
+ }
+
+ .medium-w66 {
+ width: 66.6666% !important;
+ }
+
+ .medium-w75 {
+ width: 75% !important;
+ }
+
+ .medium-w100,
+ .medium-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 medium screens */
+ .medium-man,
+ .medium-ma0 {
+ margin: 0 !important;
+ }
+}
+
+/* ---------------------------------- */
+/* ==Responsive small */
+/* ---------------------------------- */
+
+@media (min-width: (@tiny-screen + 1)) and (max-width: @small-screen) {
+
+ /* 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,
+ .small-ma0 {
+ margin: 0 !important;
+ }
+
+ .small-pan,
+ .small-pa0 {
+ padding: 0 !important;
+ }
+
+}
+
+/* ---------------------------------- */
+/* ==Responsive tiny */
+/* ---------------------------------- */
+
+@media (max-width: @tiny-screen) {
+
+ /* 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;
+ }
+
+ .flexbox {
+ flex-direction: column;
+ }
+
+ .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,
+ .tiny-ma0 {
+ margin: 0 !important;
+ }
+
+ .tiny-pan,
+ .tiny-pa0 {
+ padding: 0 !important;
+ }
+
+}
diff --git a/less/_08-print.less b/less/_08-print.less
new file mode 100644
index 0000000..3ef76f5
--- /dev/null
+++ b/less/_08-print.less
@@ -0,0 +1,94 @@
+/* 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,
+ .p-like,
+ h1,
+ .h1-like,
+ h2,
+ .h2-like,
+ h3,
+ .h3-like,
+ h4,
+ .h4-like,
+ h5,
+ .h5-like,
+ h6,
+ .h6-like,
+ blockquote,
+ ul,
+ ol {
+ color: #000 !important;
+ margin: auto !important;
+ }
+
+ .print {
+ display: block;
+ }
+
+ .no-print {
+ display: none;
+ }
+
+ /* no orphans, no widows */
+ p,
+ .p-like,
+ blockquote {
+ orphans: 3;
+ widows: 3;
+ }
+
+ /* no breaks inside these elements */
+ blockquote,
+ ul,
+ ol {
+ page-break-inside: avoid;
+ }
+
+ /* page break before main headers */
+ h1,
+ .h1-like {
+ page-break-before: always;
+ }
+
+ /* no breaks after these elements */
+ h1,
+ .h1-like,
+ h2,
+ .h2-like,
+ h3,
+ .h3-like,
+ 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/less/_09-misc.less b/less/_09-misc.less
new file mode 100644
index 0000000..808ee3b
--- /dev/null
+++ b/less/_09-misc.less
@@ -0,0 +1,55 @@
+/* ----------------------------- */
+/* ==misc rules */
+/* ----------------------------- */
+
+/* styling skip links */
+.skip-links {
+ position: absolute;
+
+ & a {
+ position: absolute;
+ overflow: hidden;
+ clip: rect(1px, 1px, 1px, 1px);
+ padding: 0.5em;
+ background: black;
+ color: white;
+ text-decoration: none;
+
+ &:focus {
+ position: static;
+ overflow: visible;
+ clip: auto;
+ }
+ }
+}
+
+// hyphens on small screens
+@media (max-width: @small-screen) {
+ /* you shall not pass */
+ div,
+ textarea,
+ table,
+ td,
+ th,
+ code,
+ pre,
+ samp {
+ word-wrap: break-word;
+ hyphens: auto;
+ }
+}
+
+/* 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/less/_10-styling.less b/less/_10-styling.less
new file mode 100644
index 0000000..2f0531b
--- /dev/null
+++ b/less/_10-styling.less
@@ -0,0 +1,141 @@
+/* ----------------------------- */
+/* ==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 {
+ position: relative;
+ padding-left: 3em;
+}
+
+blockquote::before {
+ content: "\201C";
+ position: absolute;
+ left: 0;
+ top: 0;
+ font-family: georgia, serif;
+ font-size: 5em;
+ line-height: 0.9;
+ color: rgba(0, 0, 0, .3);
+}
+
+blockquote > footer {
+ margin-top: .75em;
+ font-size: 0.9em;
+ color: rgba(0, 0, 0, .7);
+}
+
+blockquote > footer::before {
+ content: "\2014 \0020";
+}
+
+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 */
+.table-alternate {
+ border: 0;
+}
+
+.table-alternate tbody {
+ border: 1px solid #ccc;
+}
+
+.table-alternate thead tr > * + * {
+ border-left: 0;
+}
+
+.table-alternate tbody tr > * + * {
+ border-left: 1px solid #ccc;
+}
+
+/* alternate-vert tables */
+.table-alternate-v {
+ border: 0;
+ border-right: 1px solid #ccc;
+}
+
+.table-alternate-v tr > :first-child {
+ border-bottom: 0;
+}
+
+.table-alternate-v tr > * + * {
+ border-top: 1px solid #ccc;
+}
+
+/* striped tables */
+.table-striped tbody tr:nth-child(odd) {
+ background: #eee;
+ background: rgba(0, 0, 0, .05);
+}
+
+/* striped-vert tables */
+.table-striped-v tr > :first-child {
+ background: #eee;
+ background: rgba(0, 0, 0, .05);
+}
diff --git a/less/_11-wordpress.less b/less/_11-wordpress.less
new file mode 100644
index 0000000..805dc82
--- /dev/null
+++ b/less/_11-wordpress.less
@@ -0,0 +1,302 @@
+/* ----------------------------- */
+/* ==WordPress reset */
+/* ----------------------------- */
+
+/*
+Author: Geoffrey Crofte, Alsacréations
+Contributors: Automattic, Geoffrey Crofte
+Description: Reset styles for WordPress usage of KNACSS
+*/
+
+/* ----------------------------- */
+/* ==Menus */
+/* ----------------------------- */
+
+// current menu elements
+.current_page_item > a {
+}
+.current-menu-item > a {
+}
+.current_page_ancestor > a {
+}
+
+// blocks of content navigation
+.comment-navigation,
+.paging-navigation,
+.post-navigation {
+ margin: 0 0 1.5em;
+ overflow: hidden;
+}
+
+.comment-navigation .nav-previous,
+.paging-navigation .nav-previous,
+.post-navigation .nav-previous {
+ float: left;
+ width: 50%;
+}
+
+.comment-navigation .nav-next,
+.paging-navigation .nav-next,
+.post-navigation .nav-next {
+ float: right;
+ text-align: right;
+ width: 50%;
+}
+
+/* ----------------------------- */
+/* ==Alignments */
+/* ----------------------------- */
+
+// class in img elements
+.alignnone {
+ margin: .25em 1.5em 1.5em 0;
+}
+
+.aligncenter {
+ clear: both;
+ display: block;
+ margin: 1.5em auto;
+}
+
+.alignleft {
+ float: left;
+ margin: 0 1.5em .25em 0;
+}
+
+.alignright {
+ float: right;
+ margin: 0 0 .25em 1.5em;
+}
+
+/* ----------------------------- */
+/* ==Clearings */
+/* ----------------------------- */
+
+.entry-content,
+.comment-content {
+ clear: both;
+
+ &::after, &::before {
+ content: "";
+ display: table;
+ }
+}
+
+/* ----------------------------- */
+/* ==Widgets */
+/* ----------------------------- */
+
+.widget + .widget {
+ margin: 1.5em 0 0;
+}
+
+// usage example:
+.widget select {
+ max-width: 100%;
+}
+
+/* ----------------------------- */
+/* ==Posts and pages */
+/* ----------------------------- */
+
+/* === 5.1 Posts - post_class === */
+
+// featured content
+.sticky {
+}
+
+// attachment post
+.attachment {
+}
+
+// format of post
+.format- {
+ &aside {
+ }
+ &gallery {
+ }
+ &link {
+ }
+ &image {
+ }
+ "e {
+ }
+ &status {
+ }
+ &video {
+ }
+ &chat {
+ }
+}
+
+// class for a tag
+.tag- {
+ &name-of-tag {
+ }
+}
+
+// class for categorie
+.category- {
+ &name-of-category {
+ }
+}
+
+/* === 5.2 Pages - body_class === */
+
+// front page
+.home {
+ // if display posts
+ &.blog {
+ }
+ // if static page
+ &.page {
+ }
+}
+
+// page displays posts
+.blog {
+ // if is frontpage
+ &.home {
+ }
+ // if static page
+ &.page {
+ }
+}
+
+// simple page
+.page {
+}
+
+// page of single post
+.single {
+}
+
+// page of archives
+.archive {
+}
+
+// page of search
+.search {
+ // if has results
+ .search-results {
+ }
+ // if has no results
+ .search-no-results {
+ }
+}
+
+// page 404
+.error404 {
+}
+
+// user logged in
+.logged-in {
+}
+
+// text direction if right-to-left
+// prefer rtl.css: http://codex.wordpress.org/Right-to-Left_Language_Support
+.rtl {
+}
+
+/* === 5.3 Posts and Pages - Contents === */
+
+.hentry {
+ margin: 0 0 1.5em;
+}
+
+.page-content,
+.entry-content,
+.entry-summary {
+ margin: 1.5em 0 0;
+}
+
+.page-links {
+ clear: both;
+ margin: 0 0 1.5em;
+}
+
+/* ----------------------------- */
+/* ==Comments */
+/* ----------------------------- */
+
+.comment-content a {
+ word-wrap: break-word;
+}
+
+.bypostauthor {
+ // some make-the-logo-bigger styles
+}
+
+/* ----------------------------- */
+/* ==Media */
+/* ----------------------------- */
+
+img.wp-smiley {
+ margin-bottom: 0;
+ margin-top: 0;
+ padding: 0;
+ border: none;
+}
+
+/* ----------------------------- */
+/* ==Captions */
+/* ----------------------------- */
+
+.wp-caption {
+ max-width: 100%;
+ margin-bottom: 1.5em;
+}
+
+.wp-caption img {
+ display: block;
+ margin: 0 auto;
+}
+
+.wp-caption-text {
+ margin: 1em 0;
+ text-align: center;
+}
+
+/* ----------------------------- */
+/* ==Galleries */
+/* ----------------------------- */
+
+.gallery {
+ margin-bottom: 1.5em;
+}
+
+.gallery-item {
+ display: inline-block;
+ width: 100%;
+ text-align: center;
+ vertical-align: top;
+
+ .gallery-columns-2 & {
+ max-width: 50%;
+ }
+ .gallery-columns-3 & {
+ max-width: 33.33%;
+ }
+ .gallery-columns-4 & {
+ max-width: 25%;
+ }
+ .gallery-columns-5 & {
+ max-width: 20%;
+ }
+ .gallery-columns-6 & {
+ max-width: 16.66%;
+ }
+ .gallery-columns-7 & {
+ max-width: 14.28%;
+ }
+ .gallery-columns-8 & {
+ max-width: 12.5%;
+ }
+ .gallery-columns-9 & {
+ max-width: 11.11%;
+ }
+}
+
+.gallery-caption {
+ display: block;
+}
diff --git a/less/knacss.less b/less/knacss.less
index d52f5b1..3a47f23 100644
--- a/less/knacss.less
+++ b/less/knacss.less
@@ -1,23 +1,28 @@
// LESS config file
-// (you should comment this line and move config file from vendor/knacss folder to your own folder)
+// -----------------
+
+// (WARNING : you should comment this line and move config file from vendor/knacss folder to your own folder)
@import "_00-config";
+// normalize include
+@import "_01a-normalize"; // normalize
+
// LESS base styles
-@import "_01-base"; // reset, config and basic layout
+@import "_01b-base"; // reset and basic styles
// LESS files : chose the ones you need
-@import "_02-helpers"; // width and spacers visually classes
-@import "_03-grids"; // grids and autogrids
-@import "_04-tables";
-@import "_05-forms";
-@import "_06-icons"; // UTF-8 icons
-@import "_07-flexbox";
-@import "_08-rwd"; // Responsive Web Design helpers
-@import "_09-print";
-@import "_10-booleans"; // skip links and hyphens
-@import "_11-gmaps"; // Google maps bugs fix
-@import "_12-ie"; // IE6, IE7, IE8 support
-@import "_13-styling"; // minor stylings
+@import "_02-layout"; // alignment, modules, positionning
+@import "_03-grids"; // grids
+@import "_04-tables"; // data tables consistency
+@import "_05-forms"; // forms consistency
+@import "_06-helpers"; // width and spacers visually classes
+@import "_07-responsive"; // Responsive Web Design helpers
+@import "_08-print"; // print quick reset
+@import "_09-misc"; // skip links, google maps and hyphens
+@import "_10-styling"; // minor stylings
+
+// WordPress base styles
+@import "_11-wordpress"; // WordPress reset and basic styles
/* ----------------------------- */
/* ==own stylesheet */
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..4c842e0
--- /dev/null
+++ b/package.json
@@ -0,0 +1,24 @@
+{
+ "name": "knacss",
+ "version": "4.1.1",
+ "homepage": "http://www.knacss.com/",
+ "bugs": "https://github.com/raphaelgoetter/KNACSS/issues",
+ "author": [
+ "Raphaël GOETTER, Alsacreations (http://goetter.fr)"
+ ],
+ "contributors": [
+ "Raphaël GOETTER, Alsacreations"
+ ],
+ "description": "KNACSS is a minimalist, responsive and extensible style sheet to kick-start your HTML / CSS projects. It relies on common best practices and experience on the topic.",
+ "main": "css/knacss.css",
+ "keywords": [
+ "css", "framework", "reset", "responsive", "less", "sass", "rwd", "boilerplate", "workflow"
+ ],
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/raphaelgoetter/KNACSS"
+ },
+ "license": "WTFPL",
+ "dependencies": {},
+ "engines": {}
+}
diff --git a/sass/_00-config.scss b/sass/_00-config.scss
index a559d02..27b89e1 100644
--- a/sass/_00-config.scss
+++ b/sass/_00-config.scss
@@ -1,80 +1,57 @@
-// Config file : variables, mixins, ...
+/*!
+* www.KNACSS.com V4.1.1 (2015-03-30) @author: Raphael Goetter, Alsacreations
+* Licence WTFPL http://www.wtfpl.net/
+*/
+
+// Config file and project variables
// font sizes
-$base-font-size : 14px; // if "14px" 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"
+$base-font-size : 14px; // if "14px" 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; // common font
-$font-stack-headings : Helvetica, Arial, sans-serif; // headings font
-$font-stack-monospace : Consolas, 'DejaVu Sans Mono', Courier, monospace; // monospace font
-$font-stack-universal : FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; // universal stack
+$font-stack-common : Helvetica, Arial, sans-serif; // common font
+$font-stack-headings : Helvetica, Arial, sans-serif; // headings font
+$font-stack-monospace : Consolas, DejaVu Sans Mono, Courier, monospace; // monospace font
+$font-stack-universal : FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; // universal stack
// font colors
-$base-color : #000; // text color on body and content
-$primary-color : #000; // text color on primary elements
-$secondary-color : #000; // text color on secondary elements
-$headings-color : #000; // text color on headings
-$base-color-link : #333; // base links color
-$base-color-link-hover : #000; // base hovered/focused links color
+$base-color : #000; // text color on body and content
+$primary-color : #000; // text color on primary elements
+$secondary-color : #000; // text color on secondary elements
+$headings-color : #000; // text color on headings
+$base-color-link : #333; // base links color
+$base-color-link-hover : #000; // base hovered/focused links color
// backgrounds
-$base-background : #fff; // body background color
-$primary-background : #fff; // primary elements background color
-$secondary-background : #fff; // secondary elements background color
+$base-background : #fff; // body background color
+$primary-background : #fff; // primary elements background color
+$secondary-background : #fff; // secondary elements background color
// spacings (choose unit you prefer)
-$tiny-value : 5px; // tiny value for margins / paddings
-$small-value : 10px; // small value for margins / paddings
-$medium-value : 20px; // medium value for margins / paddings
-$large-value : 40px; // large value for margins / paddings
-$extra-large-value : 80px; // extra large value for margins / paddings
-$ultra-large-value : 160px; // ultra large value for margins / paddings
+$tiny-value : 5px; // tiny value for margins / paddings
+$small-value : 10px; // small value for margins / paddings
+$medium-value : 20px; // medium value for margins / paddings
+$large-value : 40px; // large value for margins / paddings
+$extra-large-value : 80px; // extra large value for margins / paddings
+$ultra-large-value : 160px; // ultra large value for margins / paddings
// breakpoints (choose unit you prefer)
-$tiny-screen : 480px; // tiny screens media query (less than 480px)
-$small-screen : 768px; // screens between 481px and 768px
-$medium-screen : 1024px; // screens between 769px and 1024px
-$large-screen : 1280px; // screens between 1025px and 1280px
-$extra-large-screen : 1600px; // screens between 1281px and 1600px
-$ultra-large-screen : 1920px; // ultra large screens
+$tiny-screen : 480px; // tiny screens media query (less than 480px)
+$small-screen : 768px; // screens between 481px and 768px
+$medium-screen : 1024px; // screens between 769px and 1024px
+$large-screen : 1280px; // screens between 1025px and 1280px
+$extra-large-screen : 1600px; // screens between 1281px and 1600px
+$ultra-large-screen : 1920px; // ultra large screens
-// misc (choose unit you prefer)
-$gutter : 20px; // gutter value for grid layouts. Unit can be: %, px, em, rem
-
-// Sass mixins : don't touch or you'll be banned ;)
-// px to em/rem
-
-@mixin rem($size) {
- @if unitless($size) {
- font-size: ($size * 1rem) / 1rem * $base-font-size;
- font-size: $size * 1rem;
- }
- @else {
- @warn "Please make sure `$size` is unitless."
- }
-}
-@mixin em($size) {
- @if unitless($size) {
- $bf: $base-font-size / 1px;
- font-size: $size / $bf * 1em;
- }
- @else {
- @warn "Please make sure `$size` is unitless."
- }
-}
-@mixin px($size) {
- @if unitless($size) {
- $bf: $base-font-size / 1px;
- font-size: $size * $bf * 1px;
- }
- @else {
- @warn "Please make sure `$size` is unitless."
- }
-}
\ No newline at end of file
+// grids variables (choose unit you prefer)
+$gutter: 1em; // gutter value for grid layouts. Unit can be: %, px, em, rem
+$number: 4; // number of equal columns
+$left: 2; // left side of uneven columns
+$right: 1; // right side of uneven columns
\ No newline at end of file
diff --git a/sass/_01a-normalize.scss b/sass/_01a-normalize.scss
new file mode 100644
index 0000000..87e37d2
--- /dev/null
+++ b/sass/_01a-normalize.scss
@@ -0,0 +1,427 @@
+/*! normalize.css v3.0.2 | MIT License | github.com/necolas/normalize.css */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ * user zoom.
+ */
+
+html {
+ font-family: sans-serif; /* 1 */
+ -ms-text-size-adjust: 100%; /* 2 */
+ -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+ margin: 0;
+}
+
+/* HTML5 display definitions
+ ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+ display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+ display: inline-block; /* 1 */
+ vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+ display: none;
+ height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+ display: none;
+}
+
+/* Links
+ ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+ background-color: transparent;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+ outline: 0;
+}
+
+/* Text-level semantics
+ ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+ border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+ font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+ font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+ background: #ff0;
+ color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+ font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sup {
+ top: -0.5em;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+/* Embedded content
+ ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+ border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+ overflow: hidden;
+}
+
+/* Grouping content
+ ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+ margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+ height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+ overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+ font-family: monospace, monospace;
+ font-size: 1em;
+}
+
+/* Forms
+ ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ * Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ color: inherit; /* 1 */
+ font: inherit; /* 2 */
+ margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+ overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+ text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ * and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ * `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+ -webkit-appearance: button; /* 2 */
+ cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+ cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+ line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ * (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ -moz-box-sizing: content-box;
+ -webkit-box-sizing: content-box; /* 2 */
+ box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+ border: 1px solid #c0c0c0;
+ margin: 0 2px;
+ padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+ border: 0; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+ overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+ font-weight: bold;
+}
+
+/* Tables
+ ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+td,
+th {
+ padding: 0;
+}
diff --git a/sass/_01b-base.scss b/sass/_01b-base.scss
new file mode 100644
index 0000000..4b7dcc1
--- /dev/null
+++ b/sass/_01b-base.scss
@@ -0,0 +1,248 @@
+/* ----------------------------- */
+/* == soft reset */
+/* ----------------------------- */
+
+/* switching to border-box model for all elements */
+html {
+ box-sizing: border-box;
+}
+
+* {
+ box-sizing: inherit;
+}
+
+ul,
+ol {
+ padding-left: 2em;
+}
+
+ul.unstyled {
+ list-style: none;
+}
+
+img {
+ vertical-align: middle;
+}
+
+/* height auto only for non SVG images */
+img:not([src$=".svg"]) {
+ height: auto;
+}
+
+blockquote,
+figure {
+ margin-left: 0;
+ margin-right: 0;
+}
+
+/* ----------------------------- */
+/* == 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: ($base-font-size / 10px) + em;
+
+ background-color: $base-background;
+ color: $base-color;
+ font-family: $font-stack-common;
+ line-height: $line-height;
+}
+
+a {
+ color: $base-color-link;
+ &:hover, &:focus, &:active {
+ color: $base-color-link-hover;
+ }
+}
+
+/* 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: $line-height;
+}
+
+h1, .h1-like {
+ font-size: $h1-size;
+ font-family: $font-stack-headings;
+}
+
+h2, .h2-like {
+ font-size: $h2-size;
+ font-family: $font-stack-headings;
+}
+
+h3, .h3-like {
+ font-size: $h3-size;
+}
+
+h4, .h4-like {
+ font-size: $h4-size;
+}
+
+h5, .h5-like {
+ font-size: $h5-size;
+}
+
+h6, .h6-like {
+ font-size: $h6-size;
+}
+
+/* alternate font-sizing */
+.smaller {
+ font-size: 0.6em;
+}
+
+.small {
+ font-size: 0.8em;
+}
+
+.big {
+ font-size: 1.2em;
+}
+
+.bigger {
+ font-size: 1.5em;
+}
+
+.biggest {
+ font-size: 2em;
+}
+
+code,
+pre,
+samp,
+kbd {
+ /* IE fix */
+ white-space: pre-line;
+ white-space: pre-wrap;
+ font-family: $font-stack-monospace;
+ line-height: normal;
+}
+
+em,
+.italic,
+address,
+cite,
+i,
+var {
+ font-style: italic;
+}
+
+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;
+}
+
+@media (max-width: $small-screen) {
+ .no-small-screen {
+ display: none;
+ }
+}
+
+@media (min-width: $large-screen) {
+ .no-large-screen {
+ display: none;
+ }
+}
+
+/* ----------------------------- */
+/* == browsers consistency */
+/* ----------------------------- */
+
+/* avoid top margins on first content element */
+p,
+.p-like,
+ul,
+ol,
+dl,
+blockquote,
+pre,
+h1,
+.h1-like,
+h2,
+.h2-like,
+h3,
+.h3-like,
+h4,
+.h4-like,
+h5,
+.h5-like,
+h6,
+.h6-like {
+ &: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: $medium-value;
+}
diff --git a/sass/_02-layout.scss b/sass/_02-layout.scss
new file mode 100644
index 0000000..7183af8
--- /dev/null
+++ b/sass/_02-layout.scss
@@ -0,0 +1,135 @@
+/* ----------------------------- */
+/* ==layout and modules */
+/* ----------------------------- */
+
+/* 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,
+.line {
+ &::after {
+ content: "";
+ display: table;
+ clear: both;
+ border-collapse: collapse;
+ }
+}
+
+/* simple blocks alignment */
+.left {
+ margin-right: auto;
+}
+
+.right {
+ margin-left: auto;
+}
+
+.center {
+ margin-left: auto;
+ margin-right: auto;
+}
+
+/* text and contents alignment */
+.txtleft {
+ text-align: left;
+}
+
+.txtright {
+ text-align: right;
+}
+
+.txtcenter {
+ text-align: center;
+}
+
+/* floating elements */
+.fl {
+ float: left;
+}
+
+img.fl {
+ margin-right: $small-value;
+}
+
+.fr {
+ float: right;
+}
+
+img.fr {
+ margin-left: $small-value;
+}
+
+img.fl,
+img.fr {
+ margin-bottom: $tiny-value;
+}
+
+/* table layout */
+.row {
+ display: table;
+ table-layout: fixed;
+ width: 100%;
+}
+
+.row > *,
+.col {
+ display: table-cell;
+ vertical-align: top;
+}
+
+/* no table-cell for script tag when body is a .row */
+body > script {
+ display: none !important;
+}
+
+/* inline-block */
+.inbl {
+ display: inline-block;
+ vertical-align: top;
+}
+
+/* flexbox layout
+http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
+*/
+
+.flexbox,
+.flexbox-h,
+.flexbox-v {
+ display : flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+}
+
+.flexbox-v {
+ flex-direction: column;
+}
+
+.flexitem-fluid {
+ flex: 1;
+}
+
+.flexitem-first {
+ order : -1;
+}
+
+.flexitem-medium {
+ order : 0;
+}
+
+.flexitem-last {
+ order : 1;
+}
+
+.flexitem-center {
+ margin: auto;
+}
diff --git a/sass/_03-grids.scss b/sass/_03-grids.scss
index 7bb97b5..b19a1f6 100644
--- a/sass/_03-grids.scss
+++ b/sass/_03-grids.scss
@@ -1,175 +1,151 @@
/* ---------------------------------- */
-/* ==classic grids */
-/* .. use it when gutter size matters */
+/* ==Grids */
/* ---------------------------------- */
-/* grids inspired from SUIT https://github.com/suitcss/suit */
+// WARNING : KNACSS grids are flexbox based and only supported by IE10+
+// Tuto : http://www.alsacreations.com/tuto/lire/1659-une-grille-responsive-avec-flexbox-et-LESS.html
+// Demo : http://codepen.io/raphaelgoetter/pen/ZYjwEB
-/* overall container of grids */
-.grid {
- overflow: hidden;
-}
+// Usage in vanilla CSS:
+// -
for an equal fourth columns grid container
+// -
for an uneven columns grid container
-/* global styles for direct child ex. .grid3 */
-.grid > * {
- display: block;
- padding: 0;
- /* gutter value */
+// Usage with preprocessors : if you're using Sass, you can config grids variables :
+// n = number of columns (default = 4) / g = gutter value (default = 1em)
+// example : .grid-perso { @include grid(12, 10px); }
+// ... or uneven grids :
+// left = left ratio column (default = 2) / right = right ratio column (default = 1) / gutter (default = 1em)
+// example : .grid-perso { @include uneven-grid(2, 1, 10px); }
+
+[class*="grid-"] {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-between;
margin-left: -$gutter;
- text-align: left;
}
-/* global styles for each "cell" */
-.grid > * > * {
- display: inline-block;
- /* gutter value */
- padding-left: $gutter;
- margin-left: 0;
- vertical-align: top;
+[class*="grid-"] > * {
+ flex: 0 0 auto;
+ display: block; /* IE fix */
+ width: calc(100% * 1 / #{$number} - #{$gutter});
+ margin-left: $gutter;
}
-/* whitespace fixing for modern browsers including IE9+ */
-:root .grid {
- font-size: 0;
- /* fallback for IE9+ */
- text-justify: distribute-all-lines;
+// Sass mixins for *equal* columns grid container
+// example : .grid-perso { @include grid(12); }
+@mixin grid($number:$number,$gutter:$gutter) {
+& > * {
+ width: calc(100% * 1 / #{$number} - #{$gutter});
+}
+& > .flexitem-double {
+ width: calc(100% * 2 / #{$number} - #{$gutter});
+}
+ @media (min-width: ($tiny-screen + 1)) and (max-width: $small-screen) {
+ & > * {
+ width: calc(100% * 1 / 2 - #{$gutter});
+ }
+ & > .flexitem-double {
+ width: calc(100% - #{$gutter});
+ }
+ }
+ @media (max-width: $tiny-screen) {
+ & > * {
+ width: calc(100% - #{$gutter});
+ }
+ & > .flexitem-double {
+ width: calc(100% - #{$gutter});
+ }
+ }
}
-:root .grid > * > * {
- /* fallback for Opera Mini */
- font-size: $base-font-size;
- font-size: ($base-font-size / 10px) + rem;
+// Examples : will be compiled in CSS
+
+.grid-2 {
+ @include grid(2);
}
-/* Opera hack */
-.opera:-o-prefocus,
-.grid > * {
- word-spacing: -0.43em;
+.grid-3 {
+ @include grid(3);
}
-.grid2 > * {
- width: 50%;
+.grid-4 {
+ @include grid(4);
}
-.grid3 > * {
- width: 33.333%;
+.grid-5 {
+ @include grid(5);
}
-.grid4 > * {
- width: 25%;
+.grid-6 {
+ @include grid(6);
}
-.grid5 > * {
- width: 20%;
+.grid-7 {
+ @include grid(7);
}
-.grid6 > * {
- width: 16.667%;
+.grid-8 {
+ @include grid(8);
}
-.grid8 > * {
- width: 12.5%;
+.grid-10 {
+ @include grid(10);
}
-.grid10 > * {
- width: 10%;
+.grid-12 {
+ @include grid(12);
}
-.grid12 > * {
- width: 8.333%;
+// LESS mixins for *unequal* columns grid container
+// example : .grid-perso { @include uneven-grid(2, 1); }
+@mixin uneven-grid($left:$left, $right:$right, $gutter:$gutter) {
+ & > *:nth-child(odd) {
+ $size: ($left / ($left + $right)) * 100%;
+ width: calc(#{$size} - #{$gutter});
+ }
+ & > *:nth-child(even) {
+ $size: ($right / ($left + $right)) * 100%;
+ width: calc(#{$size} - #{$gutter});
+ }
+ @media (max-width: $tiny-screen) {
+ & > *:nth-child(n) {
+ width: calc(100% - #{$gutter});
+ }
+ }
}
-/* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */
-.grid2-1 > *:first-child,
-.grid1-2 > * + * {
- width: 66.666%;
+
+// Examples : will be compiled in CSS
+
+.grid-2-1 {
+ @include uneven-grid(2,1);
}
-.grid1-2 > *:first-child,
-.grid2-1 > * + * {
- width: 33.333%;
+.grid-1-2 {
+ @include uneven-grid(1,2);
}
-.grid1-3 > *:first-child,
-.grid3-1 > * + * {
- width: 25%;
+.grid-3-1 {
+ @include uneven-grid(3,1);
}
-.grid3-1 > *:first-child,
-.grid1-3 > * + * {
- width: 75%;
+.grid-1-3 {
+ @include uneven-grid(1,3);
}
-/* ---------------------------------- */
-/* ==autogrids */
-/* .. to automatically justify blocs */
-/* ---------------------------------- */
-
-/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */
-
-/* container of autogrids */
-[class*="autogrid"] {
- text-align: justify;
+.grid-3-2 {
+ @include uneven-grid(3,2);
}
-[class*="autogrid"]:after {
- content: "";
- display: inline-block;
- width: 100%;
+.grid-2-3 {
+ @include uneven-grid(2,3);
}
-[class*="autogrid"] > * {
- display: inline-block;
- vertical-align: top;
- text-align: left;
+.grid-4-1 {
+ @include uneven-grid(4,1);
}
-/* whitespace fixing for modern browsers including IE9+ */
-:root [class*="autogrid"] {
- font-size: 0;
- /* fallback for IE9+ */
- text-justify: distribute-all-lines;
-}
-
-:root [class*="autogrid"] > * {
- /* fallback for Opera Mini */
- font-size: $base-font-size;
- font-size: ($base-font-size / 10px) + rem;
-}
-
-/* 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%;
-}
+.grid-1-4 {
+ @include uneven-grid(1,4);
+}
\ No newline at end of file
diff --git a/sass/_04-tables.scss b/sass/_04-tables.scss
index 28e5e0f..8979941 100644
--- a/sass/_04-tables.scss
+++ b/sass/_04-tables.scss
@@ -24,7 +24,7 @@ table.table-auto {
caption {
padding: $small-value;
color: #555;
- font-style: italic;
+ font-style: italic;
}
td,
diff --git a/sass/_05-forms.scss b/sass/_05-forms.scss
index cd4a570..97f23fa 100644
--- a/sass/_05-forms.scss
+++ b/sass/_05-forms.scss
@@ -27,7 +27,7 @@ label,
font-size: inherit;
}
-label {
+label {
display: inline-block;
vertical-align: middle;
cursor: pointer;
@@ -46,19 +46,6 @@ textarea {
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; } */
@@ -79,11 +66,14 @@ 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;
+.btn:focus,
+input:focus,
+button:focus {
+ outline: 0;
+ -webkit-tap-highlight-color: transparent;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ background-image: none;
}
diff --git a/sass/_06-helpers.scss b/sass/_06-helpers.scss
new file mode 100644
index 0000000..8dbd817
--- /dev/null
+++ b/sass/_06-helpers.scss
@@ -0,0 +1,296 @@
+/* ---------------------------------- */
+/* ==visual helpers */
+/* .. use them with parcimony ! */
+/* ---------------------------------- */
+
+/* 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,
+.ma0 {
+ margin: 0;
+}
+
+.pan,
+.pa0 {
+ padding: 0;
+}
+
+.mas {
+ margin: $small-value;
+}
+
+.mam {
+ margin: $medium-value;
+}
+
+.mal {
+ margin: $large-value;
+}
+
+.pas {
+ padding: $small-value;
+}
+
+.pam {
+ padding: $medium-value;
+}
+
+.pal {
+ padding: $large-value;
+}
+
+.mtn,
+.mt0 {
+ margin-top: 0;
+}
+
+.mts {
+ margin-top: $small-value;
+}
+
+.mtm {
+ margin-top: $medium-value;
+}
+
+.mtl {
+ margin-top: $large-value;
+}
+
+.mrn,
+.mr0 {
+ margin-right: 0;
+}
+
+.mrs {
+ margin-right: $small-value;
+}
+
+.mrm {
+ margin-right: $medium-value;
+}
+
+.mrl {
+ margin-right: $large-value;
+}
+
+.mbn,
+.mb0 {
+ margin-bottom: 0;
+}
+
+.mbs {
+ margin-bottom: $small-value;
+}
+
+.mbm {
+ margin-bottom: $medium-value;
+}
+
+.mbl {
+ margin-bottom: $large-value;
+}
+
+.mln,
+.ml0 {
+ margin-left: 0;
+}
+
+.mls {
+ margin-left: $small-value;
+}
+
+.mlm {
+ margin-left: $medium-value;
+}
+
+.mll {
+ margin-left: $large-value;
+}
+
+.ptn,
+.pt0 {
+ padding-top: 0;
+}
+
+.pts {
+ padding-top: $small-value;
+}
+
+.ptm {
+ padding-top: $medium-value;
+}
+
+.ptl {
+ padding-top: $large-value;
+}
+
+.prn,
+.pr0 {
+ padding-right: 0;
+}
+
+.prs {
+ padding-right: $small-value;
+}
+
+.prm {
+ padding-right: $medium-value;
+}
+
+.prl {
+ padding-right: $large-value;
+}
+
+.pbn,
+.pb0 {
+ padding-bottom: 0;
+}
+
+.pbs {
+ padding-bottom: $small-value;
+}
+
+.pbm {
+ padding-bottom: $medium-value;
+}
+
+.pbl {
+ padding-bottom: $large-value;
+}
+
+.pln,
+.pl0 {
+ padding-left: 0;
+}
+
+.pls {
+ padding-left: $small-value;
+}
+
+.plm {
+ padding-left: $medium-value;
+}
+
+.pll {
+ padding-left: $large-value;
+}
\ No newline at end of file
diff --git a/sass/_07-responsive.scss b/sass/_07-responsive.scss
new file mode 100644
index 0000000..207ce0f
--- /dev/null
+++ b/sass/_07-responsive.scss
@@ -0,0 +1,371 @@
+/* ----------------------------- */
+/* ==desktop and HD devices */
+/* ----------------------------- */
+
+@media (min-width: ($medium-screen + 1)) {
+/* 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 */
+/* ---------------------------------- */
+
+@media (min-width: ($medium-screen + 1)) {
+
+ /* 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,
+ .large-ma0 {
+ margin: 0 !important;
+ }
+}
+
+/* ---------------------------------- */
+/* ==Responsive medium */
+/* ---------------------------------- */
+
+@media (min-width: ($small-screen + 1)) and (max-width: $medium-screen) {
+
+ /* layouts for medium screens */
+ .medium-hidden {
+ display: none !important;
+ }
+
+ .medium-visible {
+ display: block !important;
+ }
+
+ .medium-no-float {
+ float: none;
+ }
+
+ .medium-inbl {
+ display: inline-block;
+ float: none;
+ vertical-align: top;
+ }
+
+ .medium-row {
+ display: table;
+ table-layout: fixed;
+ width: 100% !important;
+ }
+
+ .medium-col {
+ display: table-cell;
+ vertical-align: top;
+ }
+
+ /* widths for medium screens */
+ .medium-w25 {
+ width: 25% !important;
+ }
+
+ .medium-w33 {
+ width: 33.3333% !important;
+ }
+
+ .medium-w50 {
+ width: 50% !important;
+ }
+
+ .medium-w66 {
+ width: 66.6666% !important;
+ }
+
+ .medium-w75 {
+ width: 75% !important;
+ }
+
+ .medium-w100,
+ .medium-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 medium screens */
+ .medium-man,
+ .medium-ma0 {
+ margin: 0 !important;
+ }
+}
+
+/* ---------------------------------- */
+/* ==Responsive small */
+/* ---------------------------------- */
+
+@media (min-width: ($tiny-screen + 1)) and (max-width: $small-screen) {
+
+ /* 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,
+ .small-ma0 {
+ margin: 0 !important;
+ }
+
+ .small-pan,
+ .small-pa0 {
+ padding: 0 !important;
+ }
+
+}
+
+/* ---------------------------------- */
+/* ==Responsive tiny */
+/* ---------------------------------- */
+
+@media (max-width: $tiny-screen) {
+
+ /* quick small 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;
+ }
+
+ .flexbox {
+ flex-direction: column;
+ }
+
+ .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,
+ .tiny-ma0 {
+ margin: 0 !important;
+ }
+
+ .tiny-pan,
+ .tiny-pa0 {
+ padding: 0 !important;
+ }
+
+}
diff --git a/sass/_08-print.scss b/sass/_08-print.scss
new file mode 100644
index 0000000..3f7edf1
--- /dev/null
+++ b/sass/_08-print.scss
@@ -0,0 +1,93 @@
+/* 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,
+ .p-like,
+ h1,
+ .h1-like,
+ h2,
+ .h2-like,
+ h3,
+ .h3-like,
+ h4,
+ .h4-like,
+ h5,
+ .h5-like,
+ h6,
+ .h6-like,
+ blockquote,
+ ul,
+ ol {
+ color: #000 !important;
+ margin: auto !important;
+ }
+
+ .print {
+ display: block;
+ }
+
+ .no-print {
+ display: none;
+ }
+
+ /* no orphans, no widows */
+ p,
+ .p-like,
+ blockquote {
+ orphans: 3;
+ widows: 3;
+ }
+
+ /* no breaks inside these elements */
+ blockquote,
+ ul,
+ ol {
+ page-break-inside: avoid;
+ }
+
+ /* page break before main headers */
+ h1,
+ .h1-like {
+ page-break-before: always;
+ }
+
+ /* no breaks after these elements */
+ h1,
+ .h1-like,
+ h2,
+ .h2-like,
+ h3,
+ .h3-like,
+ 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/sass/_09-misc.scss b/sass/_09-misc.scss
new file mode 100644
index 0000000..11f5f30
--- /dev/null
+++ b/sass/_09-misc.scss
@@ -0,0 +1,55 @@
+/* ----------------------------- */
+/* ==misc rules */
+/* ----------------------------- */
+
+/* styling skip links */
+.skip-links {
+ position: absolute;
+
+ & a {
+ position: absolute;
+ overflow: hidden;
+ clip: rect(1px, 1px, 1px, 1px);
+ padding: 0.5em;
+ background: black;
+ color: white;
+ text-decoration: none;
+
+ &:focus {
+ position: static;
+ overflow: visible;
+ clip: auto;
+ }
+ }
+}
+
+// hyphens on small screens
+@media (max-width: $small-screen) {
+ /* you shall not pass */
+ div,
+ textarea,
+ table,
+ td,
+ th,
+ code,
+ pre,
+ samp {
+ word-wrap: break-word;
+ hyphens: auto;
+ }
+}
+
+/* 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/sass/_10-styling.scss b/sass/_10-styling.scss
new file mode 100644
index 0000000..74b90e5
--- /dev/null
+++ b/sass/_10-styling.scss
@@ -0,0 +1,139 @@
+/* ----------------------------- */
+/* ==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 {
+ position: relative;
+ padding-left: 3em;
+}
+
+blockquote::before {
+ content: "\201C";
+ position: absolute;
+ left: 0;
+ top: 0;
+ font-family: georgia, serif;
+ font-size: 5em;
+ line-height: 0.9;
+ color: rgba(0, 0, 0, .3);
+}
+
+blockquote > footer {
+ margin-top: .75em;
+ font-size: 0.9em;
+ color: rgba(0, 0, 0, .7);
+}
+
+blockquote > footer::before {
+ content: "\2014 \0020";
+}
+
+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 */
+.table-alternate {
+ border: 0;
+}
+
+.table-alternate tbody {
+ border: 1px solid #ccc;
+}
+
+.table-alternate thead tr > * + * {
+ border-left: 0;
+}
+
+.table-alternate tbody tr > * + * {
+ border-left: 1px solid #ccc;
+}
+
+/* alternate-vert tables */
+.table-alternate-v {
+ border: 0;
+ border-right: 1px solid #ccc;
+}
+
+.table-alternate-v tr > :first-child {
+ border-bottom: 0;
+}
+
+.table-alternate-v tr > * + * {
+ border-top: 1px solid #ccc;
+}
+
+/* striped tables */
+.table-striped tbody tr:nth-child(odd) {
+ background: #eee;
+ background: rgba(0, 0, 0, .05);
+}
+
+/* striped-vert tables */
+.table-striped-v tr > :first-child {
+ background: #eee;
+ background: rgba(0, 0, 0, .05);
+}
diff --git a/sass/_11-wordpress.scss b/sass/_11-wordpress.scss
new file mode 100644
index 0000000..805dc82
--- /dev/null
+++ b/sass/_11-wordpress.scss
@@ -0,0 +1,302 @@
+/* ----------------------------- */
+/* ==WordPress reset */
+/* ----------------------------- */
+
+/*
+Author: Geoffrey Crofte, Alsacréations
+Contributors: Automattic, Geoffrey Crofte
+Description: Reset styles for WordPress usage of KNACSS
+*/
+
+/* ----------------------------- */
+/* ==Menus */
+/* ----------------------------- */
+
+// current menu elements
+.current_page_item > a {
+}
+.current-menu-item > a {
+}
+.current_page_ancestor > a {
+}
+
+// blocks of content navigation
+.comment-navigation,
+.paging-navigation,
+.post-navigation {
+ margin: 0 0 1.5em;
+ overflow: hidden;
+}
+
+.comment-navigation .nav-previous,
+.paging-navigation .nav-previous,
+.post-navigation .nav-previous {
+ float: left;
+ width: 50%;
+}
+
+.comment-navigation .nav-next,
+.paging-navigation .nav-next,
+.post-navigation .nav-next {
+ float: right;
+ text-align: right;
+ width: 50%;
+}
+
+/* ----------------------------- */
+/* ==Alignments */
+/* ----------------------------- */
+
+// class in img elements
+.alignnone {
+ margin: .25em 1.5em 1.5em 0;
+}
+
+.aligncenter {
+ clear: both;
+ display: block;
+ margin: 1.5em auto;
+}
+
+.alignleft {
+ float: left;
+ margin: 0 1.5em .25em 0;
+}
+
+.alignright {
+ float: right;
+ margin: 0 0 .25em 1.5em;
+}
+
+/* ----------------------------- */
+/* ==Clearings */
+/* ----------------------------- */
+
+.entry-content,
+.comment-content {
+ clear: both;
+
+ &::after, &::before {
+ content: "";
+ display: table;
+ }
+}
+
+/* ----------------------------- */
+/* ==Widgets */
+/* ----------------------------- */
+
+.widget + .widget {
+ margin: 1.5em 0 0;
+}
+
+// usage example:
+.widget select {
+ max-width: 100%;
+}
+
+/* ----------------------------- */
+/* ==Posts and pages */
+/* ----------------------------- */
+
+/* === 5.1 Posts - post_class === */
+
+// featured content
+.sticky {
+}
+
+// attachment post
+.attachment {
+}
+
+// format of post
+.format- {
+ &aside {
+ }
+ &gallery {
+ }
+ &link {
+ }
+ &image {
+ }
+ "e {
+ }
+ &status {
+ }
+ &video {
+ }
+ &chat {
+ }
+}
+
+// class for a tag
+.tag- {
+ &name-of-tag {
+ }
+}
+
+// class for categorie
+.category- {
+ &name-of-category {
+ }
+}
+
+/* === 5.2 Pages - body_class === */
+
+// front page
+.home {
+ // if display posts
+ &.blog {
+ }
+ // if static page
+ &.page {
+ }
+}
+
+// page displays posts
+.blog {
+ // if is frontpage
+ &.home {
+ }
+ // if static page
+ &.page {
+ }
+}
+
+// simple page
+.page {
+}
+
+// page of single post
+.single {
+}
+
+// page of archives
+.archive {
+}
+
+// page of search
+.search {
+ // if has results
+ .search-results {
+ }
+ // if has no results
+ .search-no-results {
+ }
+}
+
+// page 404
+.error404 {
+}
+
+// user logged in
+.logged-in {
+}
+
+// text direction if right-to-left
+// prefer rtl.css: http://codex.wordpress.org/Right-to-Left_Language_Support
+.rtl {
+}
+
+/* === 5.3 Posts and Pages - Contents === */
+
+.hentry {
+ margin: 0 0 1.5em;
+}
+
+.page-content,
+.entry-content,
+.entry-summary {
+ margin: 1.5em 0 0;
+}
+
+.page-links {
+ clear: both;
+ margin: 0 0 1.5em;
+}
+
+/* ----------------------------- */
+/* ==Comments */
+/* ----------------------------- */
+
+.comment-content a {
+ word-wrap: break-word;
+}
+
+.bypostauthor {
+ // some make-the-logo-bigger styles
+}
+
+/* ----------------------------- */
+/* ==Media */
+/* ----------------------------- */
+
+img.wp-smiley {
+ margin-bottom: 0;
+ margin-top: 0;
+ padding: 0;
+ border: none;
+}
+
+/* ----------------------------- */
+/* ==Captions */
+/* ----------------------------- */
+
+.wp-caption {
+ max-width: 100%;
+ margin-bottom: 1.5em;
+}
+
+.wp-caption img {
+ display: block;
+ margin: 0 auto;
+}
+
+.wp-caption-text {
+ margin: 1em 0;
+ text-align: center;
+}
+
+/* ----------------------------- */
+/* ==Galleries */
+/* ----------------------------- */
+
+.gallery {
+ margin-bottom: 1.5em;
+}
+
+.gallery-item {
+ display: inline-block;
+ width: 100%;
+ text-align: center;
+ vertical-align: top;
+
+ .gallery-columns-2 & {
+ max-width: 50%;
+ }
+ .gallery-columns-3 & {
+ max-width: 33.33%;
+ }
+ .gallery-columns-4 & {
+ max-width: 25%;
+ }
+ .gallery-columns-5 & {
+ max-width: 20%;
+ }
+ .gallery-columns-6 & {
+ max-width: 16.66%;
+ }
+ .gallery-columns-7 & {
+ max-width: 14.28%;
+ }
+ .gallery-columns-8 & {
+ max-width: 12.5%;
+ }
+ .gallery-columns-9 & {
+ max-width: 11.11%;
+ }
+}
+
+.gallery-caption {
+ display: block;
+}
diff --git a/sass/knacss.scss b/sass/knacss.scss
index 53901c5..95dd270 100644
--- a/sass/knacss.scss
+++ b/sass/knacss.scss
@@ -1,23 +1,28 @@
// Sass config file
-// (you should comment this line and move config file from vendor/knacss folder to your own folder)
+// -----------------
+
+// (WARNING : you should comment this line and move config file from vendor/knacss folder to your own folder)
@import "_00-config";
+// normalize include
+@import "_01a-normalize"; // normalize
+
// Sass base styles
-@import "_01-base";
+@import "_01b-base"; // reset and basic styles
// Sass files : chose the ones you need
-@import "_02-helpers"; // width and spacers visually classes
-@import "_03-grids"; // grids and autogrids
-@import "_04-tables";
-@import "_05-forms";
-@import "_06-icons"; // UTF-8 icons
-@import "_07-flexbox";
-@import "_08-rwd"; // Responsive Web Design helpers
-@import "_09-print";
-@import "_10-booleans"; // skip links and hyphens
-@import "_11-gmaps"; // Google maps bugs fix
-@import "_12-ie"; // IE6, IE7, IE8 support
-@import "_13-styling"; // minor stylings
+@import "_02-layout"; // alignment, modules, positionning
+@import "_03-grids"; // grids
+@import "_04-tables"; // data tables consistency
+@import "_05-forms"; // forms consistency
+@import "_06-helpers"; // width and spacers visually classes
+@import "_07-responsive"; // Responsive Web Design helpers
+@import "_08-print"; // print quick reset
+@import "_09-misc"; // skip links, google maps and hyphens
+@import "_10-styling"; // minor stylings
+
+// WordPress base styles
+@import "_11-wordpress"; // WordPress reset and basic styles
/* ----------------------------- */
/* ==own stylesheet */
+