diff --git a/less/_00-config.less b/less/_00-config.less index 10b1144..90fe717 100644 --- a/less/_00-config.less +++ b/less/_00-config.less @@ -1,55 +1,55 @@ -// Config file : variables, mixins, ... +// 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 +@gutter : 20px; // gutter value for grid layouts. Unit can be: %, px, em, rem // LESS mixins : don't touch or you'll be banned ;) -// px to em/rem +// px to em/rem .rem(@size, @bf: @base-font-size){ @rem: @size / 10; font-size: unit(round(@base-font-size * @size /10), px); diff --git a/less/_01-base.less b/less/_01-base.less index eaa346e..e06c6a6 100644 --- a/less/_01-base.less +++ b/less/_01-base.less @@ -62,7 +62,7 @@ html { /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */ /* thanks to @guardian, @victorbritopro and @eQRoeil */ - font-size: calc(1em * 0.625); + font-size: calc(1em * 0.625); /* disallow text zooming on orientation change (non standard property) */ -webkit-text-size-adjust: 100%; @@ -76,7 +76,7 @@ body { background-color: @base-background; color: @base-color; - font-family: @font-stack-common; + font-family: @font-stack-common; line-height: @line-height; } @@ -100,7 +100,7 @@ th, label, textarea, caption, -details, +details, figure { margin-top: 0.75em; margin-bottom: 0; @@ -160,12 +160,12 @@ h6, .em(@base-font-size + 6); } -code, +code, pre, samp, kbd { /* IE fix */ - white-space: pre-line; + white-space: pre-line; white-space: pre-wrap; font-family: @font-stack-monospace; line-height: normal; @@ -197,14 +197,14 @@ sup { /* ----------------------------- */ /* hidden but not for an assistive technology like a screen reader, Yahoo! method */ -.visually-hidden { +.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; + border: 0 !important; + height: 1px !important; + width: 1px !important; + padding: 0 !important; + overflow: hidden !important; + clip: rect(1px, 1px, 1px, 1px) !important; } body > script { @@ -229,17 +229,17 @@ body > script { /* avoid top margins on first content element */ p, -.p-like, -ul, -ol, +.p-like, +ul, +ol, dl, -blockquote, +blockquote, pre, -h1, -h2, -h3, -h4, -h5, +h1, +h2, +h3, +h4, +h5, h6 { &:first-child { margin-top: 0; @@ -256,14 +256,14 @@ li ol { } /* max values */ -img, -table, -td, -blockquote, -code, -pre, -textarea, -input, +img, +table, +td, +blockquote, +code, +pre, +textarea, +input, video { max-width: 100%; } @@ -345,23 +345,23 @@ img.end { margin-left: @small-value; } -img.left, +img.left, img.right, -img.start, +img.start, img.end { margin-bottom: @tiny-value; } -.center { - margin-left: auto; +.center { + margin-left: auto; margin-right: auto; } -.txtleft { +.txtleft { text-align: left; } -.txtright { +.txtright { text-align: right; } diff --git a/less/_02-helpers.less b/less/_02-helpers.less index 170a436..2dbd802 100644 --- a/less/_02-helpers.less +++ b/less/_02-helpers.less @@ -12,113 +12,113 @@ width: 20%; } -.w25 { - width: 25%; +.w25 { + width: 25%; } -.w30 { - width: 30%; +.w30 { + width: 30%; } -.w33 { - width: 33.3333%; +.w33 { + width: 33.3333%; } -.w40 { - width: 40%; +.w40 { + width: 40%; } -.w50 { - width: 50%; +.w50 { + width: 50%; } -.w60 { - width: 60%; +.w60 { + width: 60%; } -.w66 { - width: 66.6666%; +.w66 { + width: 66.6666%; } -.w70 { - width: 70%; +.w70 { + width: 70%; } -.w75 { - width: 75%; +.w75 { + width: 75%; } -.w80 { - width: 80%; +.w80 { + width: 80%; } -.w90 { - width: 90%; +.w90 { + width: 90%; } -.w100 { - width: 100%; +.w100 { + width: 100%; } -.w50p { - width: 50px; +.w50p { + width: 50px; } -.w100p { - width: 100px; +.w100p { + width: 100px; } -.w150p { - width: 150px; +.w150p { + width: 150px; } -.w200p { - width: 200px; +.w200p { + width: 200px; } -.w300p { - width: 300px; +.w300p { + width: 300px; } -.w400p { - width: 400px; +.w400p { + width: 400px; } -.w500p { - width: 500px; +.w500p { + width: 500px; } -.w600p { - width: 600px; +.w600p { + width: 600px; } -.w700p { - width: 700px; +.w700p { + width: 700px; } -.w800p { - width: 800px; +.w800p { + width: 800px; } -.w960p { - width: 960px; +.w960p { + width: 960px; } -.mw960p { - max-width: 960px; +.mw960p { + max-width: 960px; } -.w1140p { - width: 1140px; +.w1140p { + width: 1140px; } -.mw1140p { - max-width: 1140px; +.mw1140p { + max-width: 1140px; } -.wauto { - width: auto; +.wauto { + width: auto; } /* spacing helpers @@ -126,162 +126,172 @@ 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; +.man, +.ma0 { + margin: 0; } -.pan { - padding: 0; +.pan, +.pa0 { + padding: 0; } -.mas { - margin: @small-value; +.mas { + margin: @small-value; } -.mam { - margin: @medium-value; +.mam { + margin: @medium-value; } -.mal { - margin: @large-value; +.mal { + margin: @large-value; } -.pas { - padding: @small-value; +.pas { + padding: @small-value; } -.pam { - padding: @medium-value; +.pam { + padding: @medium-value; } -.pal { - padding: @large-value; +.pal { + padding: @large-value; } -.mtn { - margin-top: 0; +.mtn, +.mt0 { + margin-top: 0; } -.mts { - margin-top: @small-value; +.mts { + margin-top: @small-value; } -.mtm { - margin-top: @medium-value; +.mtm { + margin-top: @medium-value; } -.mtl { - margin-top: @large-value; +.mtl { + margin-top: @large-value; } -.mrn { - margin-right: 0; +.mrn, +.mr0 { + margin-right: 0; } -.mrs { - margin-right: @small-value; +.mrs { + margin-right: @small-value; } -.mrm { - margin-right: @medium-value; +.mrm { + margin-right: @medium-value; } -.mrl { - margin-right: @large-value; +.mrl { + margin-right: @large-value; } -.mbn { - margin-bottom: 0; +.mbn, +.mb0 { + margin-bottom: 0; } -.mbs { - margin-bottom: @small-value; +.mbs { + margin-bottom: @small-value; } -.mbm { - margin-bottom: @medium-value; +.mbm { + margin-bottom: @medium-value; } -.mbl { - margin-bottom: @large-value; +.mbl { + margin-bottom: @large-value; } -.mln { - margin-left: 0; +.mln, +.ml0 { + margin-left: 0; } -.mls { - margin-left: @small-value; +.mls { + margin-left: @small-value; } -.mlm { - margin-left: @medium-value; +.mlm { + margin-left: @medium-value; } -.mll { - margin-left: @large-value; +.mll { + margin-left: @large-value; } -.ptn { - padding-top: 0; +.ptn, +.pt0 { + padding-top: 0; } -.pts { - padding-top: @small-value; +.pts { + padding-top: @small-value; } -.ptm { - padding-top: @medium-value; +.ptm { + padding-top: @medium-value; } -.ptl { - padding-top: @large-value; +.ptl { + padding-top: @large-value; } -.prn { - padding-right: 0; +.prn, +.pr0 { + padding-right: 0; } -.prs { - padding-right: @small-value; +.prs { + padding-right: @small-value; } -.prm { - padding-right: @medium-value; +.prm { + padding-right: @medium-value; } -.prl { - padding-right: @large-value; +.prl { + padding-right: @large-value; } -.pbn { - padding-bottom: 0; +.pbn, +.pb0 { + padding-bottom: 0; } -.pbs { - padding-bottom: @small-value; +.pbs { + padding-bottom: @small-value; } -.pbm { - padding-bottom: @medium-value; +.pbm { + padding-bottom: @medium-value; } -.pbl { - padding-bottom: @large-value; +.pbl { + padding-bottom: @large-value; } -.pln { - padding-left: 0; +.pln, +.pl0 { + padding-left: 0; } -.pls { - padding-left: @small-value; +.pls { + padding-left: @small-value; } -.plm { - padding-left: @medium-value; +.plm { + padding-left: @medium-value; } -.pll { - padding-left: @large-value; +.pll { + padding-left: @large-value; } \ No newline at end of file diff --git a/less/_03-grids.less b/less/_03-grids.less index d1a1c13..168881e 100644 --- a/less/_03-grids.less +++ b/less/_03-grids.less @@ -6,24 +6,22 @@ /* grids inspired from SUIT https://github.com/suitcss/suit */ /* overall container of grids */ -.grid { +.grid { overflow: hidden; } /* global styles for direct child ex. .grid3 */ -.grid > * { +.grid > * { display: block; padding: 0; - /* gutter value */ - margin-left: -@gutter; + margin-left: -@gutter; /* gutter value */ text-align: left; } /* global styles for each "cell" */ -.grid > * > * { +.grid > * > * { display: inline-block; - /* gutter value */ - padding-left: @gutter; + padding-left: @gutter; /* gutter value */ margin-left: 0; vertical-align: top; } @@ -31,8 +29,7 @@ /* whitespace fixing for modern browsers including IE9+ */ :root .grid { font-size: 0; - /* fallback for IE9+ */ - text-justify: distribute-all-lines; + text-justify: distribute-all-lines; /* fallback for IE9+ */ } :root .grid > * > * { @@ -81,23 +78,23 @@ /* 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 > * + * { + width: 66.666%; } .grid1-2 > *:first-child, -.grid2-1 > * + * { - width: 33.333%; +.grid2-1 > * + * { + width: 33.333%; } .grid1-3 > *:first-child, -.grid3-1 > * + * { - width: 25%; +.grid3-1 > * + * { + width: 25%; } .grid3-1 > *:first-child, -.grid1-3 > * + * { - width: 75%; +.grid1-3 > * + * { + width: 75%; } /* ---------------------------------- */ @@ -108,14 +105,14 @@ /* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */ /* container of autogrids */ -[class*="autogrid"] { +[class*="autogrid"] { text-align: justify; } [class*="autogrid"]:after { content: ""; display: inline-block; - width: 100%; + width: 100%; } [class*="autogrid"] > * { 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..5db41f8 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; diff --git a/less/_06-icons.less b/less/_06-icons.less index e7721aa..f229c9d 100644 --- a/less/_06-icons.less +++ b/less/_06-icons.less @@ -70,10 +70,10 @@ font-weight: bold; } -.icon-arrow1:before, +.icon-arrow1:before, .icon-arrow1.after:after { content: "\2192"; - position: relative; + position: relative; top: -0.15em; } @@ -92,7 +92,7 @@ content: "\2039"; font-weight: bold; font-size: 1.6em; - position: relative; + position: relative; top: -0.15em; } @@ -101,7 +101,7 @@ content: "\203A"; font-weight: bold; font-size: 1.6em; - position: relative; + position: relative; top: -0.15em; } diff --git a/less/_08-rwd.less b/less/_08-rwd.less index df71f0b..1564b37 100644 --- a/less/_08-rwd.less +++ b/less/_08-rwd.less @@ -17,16 +17,16 @@ @media (min-width: (@medium-screen + 1)) { /* layouts for large screens */ - .large-hidden { - display: none !important; + .large-hidden { + display: none !important; } - .large-visible { - display: block !important; + .large-visible { + display: block !important; } .large-no-float { - float: none; + float: none; } .large-inbl { @@ -34,35 +34,37 @@ 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-w25 { + width: 25% !important; } - .large-w33 { - width: 33.3333% !important; + .large-w33 { + width: 33.3333% !important; } - .large-w50 { - width: 50% !important; + .large-w50 { + width: 50% !important; } - .large-w66 { - width: 66.6666% !important; + .large-w66 { + width: 66.6666% !important; } - .large-w75 { - width: 75% !important; + .large-w75 { + width: 75% !important; } .large-w100, @@ -73,30 +75,12 @@ width: auto !important; margin-left: 0 !important; margin-right: 0 !important; - border: 0; + border: 0; } /* margins for large screens */ - .large-man { - margin: 0 !important; - } - - /* grid rwd for large screens */ - .grid5 > *, - .grid6 > *, - .grid8 > *, - .grid10 > *, - .grid12 > * { - width: 33.333%; - } - - /* autogrid rwd for large screens */ - .autogrid5 > *, - .autogrid6 > *, - .autogrid8 > *, - .autogrid10 > *, - .autogrid12 > * { - width: 32%; + .large-man { + margin: 0 !important; } } @@ -107,16 +91,16 @@ @media (min-width: (@small-screen + 1)) and (max-width: @medium-screen) { /* layouts for medium screens */ - .medium-hidden { - display: none !important; + .medium-hidden { + display: none !important; } - .medium-visible { - display: block !important; + .medium-visible { + display: block !important; } .medium-no-float { - float: none; + float: none; } .medium-inbl { @@ -124,35 +108,37 @@ 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-w25 { + width: 25% !important; } - .medium-w33 { - width: 33.3333% !important; + .medium-w33 { + width: 33.3333% !important; } .medium-w50 { width: 50% !important; } - .medium-w66 { - width: 66.6666% !important; + .medium-w66 { + width: 66.6666% !important; } - .medium-w75 { - width: 75% !important; + .medium-w75 { + width: 75% !important; } .medium-w100, @@ -163,12 +149,13 @@ width: auto !important; margin-left: 0 !important; margin-right: 0 !important; - border: 0; + border: 0; } /* margins for medium screens */ - .medium-man { - margin: 0 !important; + .medium-man, + .medium-ma0 { + margin: 0 !important; } } @@ -199,19 +186,19 @@ .mw960p { width: auto; float: none; - } + } /* layouts for small screens */ - .small-hidden { - display: none !important; + .small-hidden { + display: none !important; } - .small-visible { - display: block !important; + .small-visible { + display: block !important; } .small-no-float { - float: none; + float: none; } .small-inbl { @@ -219,55 +206,59 @@ 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-w25 { + width: 25% !important; } - .small-w33 { - width: 33.3333% !important; + .small-w33 { + width: 33.3333% !important; } - .small-w50 { - width: 50% !important; + .small-w50 { + width: 50% !important; } - .small-w66 { - width: 66.6666% !important; + .small-w66 { + width: 66.6666% !important; } - .small-w75 { - width: 75% !important; + .small-w75 { + width: 75% !important; } .small-w100, - .small-wauto { + .small-wauto { display: block !important; float: none !important; clear: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; - border: 0; + border: 0; } /* margins for small screens */ - .small-man { - margin: 0 !important; + .small-man, + .small-ma0 { + margin: 0 !important; } - .small-pan { - padding: 0 !important; + .small-pan, + .small-pa0 { + padding: 0 !important; } /* grid rwd for small screens */ @@ -304,18 +295,18 @@ float: none; } - .row { + .row { display: block !important; width: 100% !important; } /* layouts for tiny screens */ - .tiny-hidden { - display: none !important; + .tiny-hidden { + display: none !important; } - .tiny-visible { - display: block !important; + .tiny-visible { + display: block !important; } .tiny-no-float { @@ -346,33 +337,33 @@ text-align: left !important; } - thead { - display: none; + thead { + display: none; } /* widths for tiny screens */ - .tiny-w25 { - width: 25% !important; + .tiny-w25 { + width: 25% !important; } - .tiny-w33 { - width: 33.3333% !important; + .tiny-w33 { + width: 33.3333% !important; } - .tiny-w50 { - width: 50% !important; + .tiny-w50 { + width: 50% !important; } - .tiny-w66 { - width: 66.6666% !important; + .tiny-w66 { + width: 66.6666% !important; } - .tiny-w75 { - width: 75% !important; + .tiny-w75 { + width: 75% !important; } .tiny-w100, - .tiny-wauto { + .tiny-wauto { display: block !important; float: none !important; clear: none !important; @@ -383,12 +374,14 @@ } /* margins for tiny screens */ - .tiny-man { - margin: 0 !important; + .tiny-man, + .tiny-ma0 { + margin: 0 !important; } - .tiny-pan { - padding: 0 !important; + .tiny-pan, + .tiny-pa0 { + padding: 0 !important; } /* grid rwd for tiny screens */ @@ -401,4 +394,3 @@ width: 100% !important; } } - diff --git a/less/_09-print.less b/less/_09-print.less index 83f504e..31a3358 100644 --- a/less/_09-print.less +++ b/less/_09-print.less @@ -38,14 +38,14 @@ display: none; } - img { + img { filter: grayscale(100%); } /* no orphans, no widows */ p, blockquote { - orphans: 3; + orphans: 3; widows: 3; } @@ -53,12 +53,12 @@ blockquote, ul, ol { - page-break-inside: avoid; + page-break-inside: avoid; } /* page break before main headers */ h1 { - page-break-before: always; + page-break-before: always; } /* no breaks after these elements */ @@ -66,7 +66,7 @@ h2, h3, caption { - page-break-after: avoid; + page-break-after: avoid; } a { @@ -76,7 +76,7 @@ /* displaying URLs */ a[href]:after { - content: " (" attr(href) ")"; + content: " (" attr(href) ")"; } a[href^="javascript:"]:after, diff --git a/less/knacss.less b/less/knacss.less index d52f5b1..2b8b884 100644 --- a/less/knacss.less +++ b/less/knacss.less @@ -8,7 +8,7 @@ // 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 "_04-tables"; @import "_05-forms"; @import "_06-icons"; // UTF-8 icons @import "_07-flexbox"; diff --git a/sass/_00-config.scss b/sass/_00-config.scss index a559d02..a8e4c50 100644 --- a/sass/_00-config.scss +++ b/sass/_00-config.scss @@ -1,57 +1,57 @@ -// Config file : variables, mixins, ... +// 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 +$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 +// px to em/rem -@mixin rem($size) { +@mixin rem($size) { @if unitless($size) { font-size: ($size * 1rem) / 1rem * $base-font-size; font-size: $size * 1rem; @@ -60,7 +60,7 @@ $gutter : 20px; // gutter value for grid layouts. Unit can be: %, px, em, rem @warn "Please make sure `$size` is unitless." } } -@mixin em($size) { +@mixin em($size) { @if unitless($size) { $bf: $base-font-size / 1px; font-size: $size / $bf * 1em; @@ -69,7 +69,7 @@ $gutter : 20px; // gutter value for grid layouts. Unit can be: %, px, em, rem @warn "Please make sure `$size` is unitless." } } -@mixin px($size) { +@mixin px($size) { @if unitless($size) { $bf: $base-font-size / 1px; font-size: $size * $bf * 1px; diff --git a/sass/_01-base.scss b/sass/_01-base.scss index d60e189..9da0ae9 100644 --- a/sass/_01-base.scss +++ b/sass/_01-base.scss @@ -61,7 +61,7 @@ html { /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */ /* thanks to @guardian, @victorbritopro and @eQRoeil */ - font-size: calc(1em * 0.625); + font-size: calc(1em * 0.625); /* disallow text zooming on orientation change (non standard property) */ -webkit-text-size-adjust: 100%; @@ -99,7 +99,7 @@ th, label, textarea, caption, -details, +details, figure { margin-top: 0.75em; margin-bottom: 0; @@ -153,7 +153,7 @@ h6, .h6-like { @include em($base-font-size / 1px + 6); } -code, +code, pre, samp, kbd { @@ -190,14 +190,14 @@ sup { /* ----------------------------- */ /* hidden but not for assistance tools, Yahoo! method */ -.visually-hidden { +.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; + border: 0 !important; + height: 1px !important; + width: 1px !important; + padding: 0 !important; + overflow: hidden !important; + clip: rect(1px, 1px, 1px, 1px) !important; } body > script { @@ -221,18 +221,18 @@ body > script { /* ----------------------------- */ /* avoid top margins on first content element */ -p, -.p-like, -ul, -ol, +p, +.p-like, +ul, +ol, dl, -blockquote, +blockquote, pre, -h1, -h2, -h3, -h4, -h5, +h1, +h2, +h3, +h4, +h5, h6 { &:first-child { margin-top: 0; @@ -249,14 +249,14 @@ li ol { } /* max values */ -img, -table, -td, -blockquote, -code, -pre, -textarea, -input, +img, +table, +td, +blockquote, +code, +pre, +textarea, +input, video { max-width: 100%; } @@ -273,7 +273,7 @@ table { /* float layout */ /* module, gains superpower "BFC" Block Formating Context */ -.mod { +.mod { overflow: hidden; } @@ -314,7 +314,6 @@ table { vertical-align: top; } - /* alignments (blocks and inline) */ /* ------------------------------ */ @@ -340,26 +339,26 @@ img.end { margin-left: $small-value; } -img.left, +img.left, img.right, -img.start, +img.start, img.end { margin-bottom: $tiny-value; } -.center { - margin-left: auto; - margin-right: auto; +.center { + margin-left: auto; + margin-right: auto; } -.txtleft { - text-align: left; +.txtleft { + text-align: left; } -.txtright { - text-align: right; +.txtright { + text-align: right; } -.txtcenter { - text-align: center; +.txtcenter { + text-align: center; } diff --git a/sass/_02-helpers.scss b/sass/_02-helpers.scss index d9604c0..8dbd817 100644 --- a/sass/_02-helpers.scss +++ b/sass/_02-helpers.scss @@ -4,120 +4,120 @@ /* ---------------------------------- */ /* blocks widths (percentage and pixels) */ -.w10 { - width: 10%; +.w10 { + width: 10%; } -.w20 { - width: 20%; +.w20 { + width: 20%; } -.w25 { - width: 25%; +.w25 { + width: 25%; } -.w30 { - width: 30%; +.w30 { + width: 30%; } -.w33 { - width: 33.3333%; +.w33 { + width: 33.3333%; } -.w40 { - width: 40%; +.w40 { + width: 40%; } -.w50 { - width: 50%; +.w50 { + width: 50%; } -.w60 { - width: 60%; +.w60 { + width: 60%; } -.w66 { - width: 66.6666%; +.w66 { + width: 66.6666%; } -.w70 { - width: 70%; +.w70 { + width: 70%; } -.w75 { - width: 75%; +.w75 { + width: 75%; } -.w80 { - width: 80%; +.w80 { + width: 80%; } -.w90 { - width: 90%; +.w90 { + width: 90%; } -.w100 { - width: 100%; +.w100 { + width: 100%; } -.w50p { - width: 50px; +.w50p { + width: 50px; } -.w100p { - width: 100px; +.w100p { + width: 100px; } -.w150p { - width: 150px; +.w150p { + width: 150px; } -.w200p { - width: 200px; +.w200p { + width: 200px; } -.w300p { - width: 300px; +.w300p { + width: 300px; } -.w400p { - width: 400px; +.w400p { + width: 400px; } -.w500p { - width: 500px; +.w500p { + width: 500px; } -.w600p { - width: 600px; +.w600p { + width: 600px; } -.w700p { - width: 700px; +.w700p { + width: 700px; } -.w800p { - width: 800px; +.w800p { + width: 800px; } -.w960p { - width: 960px; +.w960p { + width: 960px; } -.mw960p { - max-width: 960px; +.mw960p { + max-width: 960px; } -.w1140p { - width: 1140px; +.w1140p { + width: 1140px; } -.mw1140p { - max-width: 1140px; +.mw1140p { + max-width: 1140px; } -.wauto { - width: auto; +.wauto { + width: auto; } /* spacing helpers @@ -125,162 +125,172 @@ 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; +.man, +.ma0 { + margin: 0; } -.pan { - padding: 0; +.pan, +.pa0 { + padding: 0; } -.mas { - margin: $small-value; +.mas { + margin: $small-value; } .mam { - margin: $medium-value; + margin: $medium-value; } -.mal { - margin: $large-value; +.mal { + margin: $large-value; } -.pas { - padding: $small-value; +.pas { + padding: $small-value; } -.pam { - padding: $medium-value; +.pam { + padding: $medium-value; } -.pal { - padding: $large-value; +.pal { + padding: $large-value; } -.mtn { - margin-top: 0; +.mtn, +.mt0 { + margin-top: 0; } -.mts { - margin-top: $small-value; +.mts { + margin-top: $small-value; } -.mtm { - margin-top: $medium-value; +.mtm { + margin-top: $medium-value; } -.mtl { - margin-top: $large-value; +.mtl { + margin-top: $large-value; } -.mrn { - margin-right: 0; +.mrn, +.mr0 { + margin-right: 0; } .mrs { - margin-right: $small-value; + margin-right: $small-value; } -.mrm { - margin-right: $medium-value; +.mrm { + margin-right: $medium-value; } -.mrl { - margin-right: $large-value; +.mrl { + margin-right: $large-value; } -.mbn { - margin-bottom: 0; +.mbn, +.mb0 { + margin-bottom: 0; } -.mbs { - margin-bottom: $small-value; +.mbs { + margin-bottom: $small-value; } -.mbm { - margin-bottom: $medium-value; +.mbm { + margin-bottom: $medium-value; } -.mbl { - margin-bottom: $large-value; +.mbl { + margin-bottom: $large-value; } -.mln { - margin-left: 0; +.mln, +.ml0 { + margin-left: 0; } -.mls { - margin-left: $small-value; +.mls { + margin-left: $small-value; } -.mlm { - margin-left: $medium-value; +.mlm { + margin-left: $medium-value; } -.mll { - margin-left: $large-value; +.mll { + margin-left: $large-value; } -.ptn { - padding-top: 0; +.ptn, +.pt0 { + padding-top: 0; } -.pts { - padding-top: $small-value; +.pts { + padding-top: $small-value; } -.ptm { - padding-top: $medium-value; +.ptm { + padding-top: $medium-value; } -.ptl { - padding-top: $large-value; +.ptl { + padding-top: $large-value; } -.prn { - padding-right: 0; +.prn, +.pr0 { + padding-right: 0; } -.prs { - padding-right: $small-value; +.prs { + padding-right: $small-value; } -.prm { - padding-right: $medium-value; +.prm { + padding-right: $medium-value; } -.prl { - padding-right: $large-value; +.prl { + padding-right: $large-value; } -.pbn { - padding-bottom: 0; +.pbn, +.pb0 { + padding-bottom: 0; } -.pbs { - padding-bottom: $small-value; +.pbs { + padding-bottom: $small-value; } -.pbm { - padding-bottom: $medium-value; +.pbm { + padding-bottom: $medium-value; } -.pbl { - padding-bottom: $large-value; +.pbl { + padding-bottom: $large-value; } -.pln { - padding-left: 0; +.pln, +.pl0 { + padding-left: 0; } -.pls { - padding-left: $small-value; +.pls { + padding-left: $small-value; } -.plm { - padding-left: $medium-value; +.plm { + padding-left: $medium-value; } -.pll { - padding-left: $large-value; +.pll { + padding-left: $large-value; } \ No newline at end of file diff --git a/sass/_03-grids.scss b/sass/_03-grids.scss index 7bb97b5..173da9e 100644 --- a/sass/_03-grids.scss +++ b/sass/_03-grids.scss @@ -6,12 +6,12 @@ /* grids inspired from SUIT https://github.com/suitcss/suit */ /* overall container of grids */ -.grid { +.grid { overflow: hidden; } /* global styles for direct child ex. .grid3 */ -.grid > * { +.grid > * { display: block; padding: 0; /* gutter value */ @@ -20,7 +20,7 @@ } /* global styles for each "cell" */ -.grid > * > * { +.grid > * > * { display: inline-block; /* gutter value */ padding-left: $gutter; 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..5db41f8 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; diff --git a/sass/_06-icons.scss b/sass/_06-icons.scss index 01ec839..4d2cc41 100644 --- a/sass/_06-icons.scss +++ b/sass/_06-icons.scss @@ -69,10 +69,10 @@ font-weight: bold; } -.icon-arrow1:before, +.icon-arrow1:before, .icon-arrow1.after:after { content: "\2192"; - position: relative; + position: relative; top: -0.15em; } @@ -91,7 +91,7 @@ content: "\2039"; font-weight: bold; font-size: 1.6em; - position: relative; + position: relative; top: -0.15em; } @@ -100,7 +100,7 @@ content: "\203A"; font-weight: bold; font-size: 1.6em; - position: relative; + position: relative; top: -0.15em; } diff --git a/sass/_08-rwd.scss b/sass/_08-rwd.scss index dd16f27..c0f2c3b 100644 --- a/sass/_08-rwd.scss +++ b/sass/_08-rwd.scss @@ -17,16 +17,16 @@ @media (min-width: ($medium-screen + 1)) { /* layouts for large screens */ - .large-hidden { - display: none !important; + .large-hidden { + display: none !important; } - .large-visible { - display: block !important; + .large-visible { + display: block !important; } .large-no-float { - float: none; + float: none; } .large-inbl { @@ -45,24 +45,24 @@ } /* widths for large screens */ - .large-w25 { - width: 25% !important; + .large-w25 { + width: 25% !important; } - .large-w33 { - width: 33.3333% !important; + .large-w33 { + width: 33.3333% !important; } - .large-w50 { - width: 50% !important; + .large-w50 { + width: 50% !important; } - .large-w66 { - width: 66.6666% !important; + .large-w66 { + width: 66.6666% !important; } - .large-w75 { - width: 75% !important; + .large-w75 { + width: 75% !important; } .large-w100, @@ -73,30 +73,13 @@ width: auto !important; margin-left: 0 !important; margin-right: 0 !important; - border: 0; + border: 0; } /* margins for large screens */ - .large-man { - margin: 0 !important; - } - - /* grid rwd for large screens */ - .grid5 > *, - .grid6 > *, - .grid8 > *, - .grid10 > *, - .grid12 > * { - width: 33.333%; - } - - /* autogrid rwd for large screens */ - .autogrid5 > *, - .autogrid6 > *, - .autogrid8 > *, - .autogrid10 > *, - .autogrid12 > * { - width: 32%; + .large-man, + .large-ma0 { + margin: 0 !important; } } @@ -107,16 +90,16 @@ @media (min-width: ($small-screen + 1)) and (max-width: $medium-screen) { /* layouts for medium screens */ - .medium-hidden { - display: none !important; + .medium-hidden { + display: none !important; } - .medium-visible { - display: block !important; + .medium-visible { + display: block !important; } .medium-no-float { - float: none; + float: none; } .medium-inbl { @@ -124,35 +107,37 @@ 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-w25 { + width: 25% !important; } - .medium-w33 { - width: 33.3333% !important; + .medium-w33 { + width: 33.3333% !important; } - .medium-w50 { - width: 50% !important; + .medium-w50 { + width: 50% !important; } - .medium-w66 { - width: 66.6666% !important; + .medium-w66 { + width: 66.6666% !important; } - .medium-w75 { - width: 75% !important; + .medium-w75 { + width: 75% !important; } .medium-w100, @@ -163,12 +148,13 @@ width: auto !important; margin-left: 0 !important; margin-right: 0 !important; - border: 0; + border: 0; } /* margins for medium screens */ - .medium-man { - margin: 0 !important; + .medium-man, + .medium-ma0 { + margin: 0 !important; } } @@ -199,19 +185,19 @@ .mw960p { width: auto; float: none; - } + } /* layouts for small screens */ - .small-hidden { - display: none !important; + .small-hidden { + display: none !important; } - .small-visible { - display: block !important; + .small-visible { + display: block !important; } .small-no-float { - float: none; + float: none; } .small-inbl { @@ -219,55 +205,59 @@ 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-w25 { + width: 25% !important; } - .small-w33 { - width: 33.3333% !important; + .small-w33 { + width: 33.3333% !important; } - .small-w50 { - width: 50% !important; + .small-w50 { + width: 50% !important; } - .small-w66 { - width: 66.6666% !important; + .small-w66 { + width: 66.6666% !important; } - .small-w75 { - width: 75% !important; + .small-w75 { + width: 75% !important; } .small-w100, - .small-wauto { + .small-wauto { display: block !important; float: none !important; clear: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; - border: 0; + border: 0; } /* margins for small screens */ - .small-man { - margin: 0 !important; + .small-man, + .small-ma0 { + margin: 0 !important; } - .small-pan { - padding: 0 !important; + .small-pan, + .small-pa0 { + padding: 0 !important; } /* grid rwd for small screens */ @@ -304,18 +294,18 @@ float: none; } - .row { + .row { display: block !important; width: 100% !important; } /* layouts for tiny screens */ - .tiny-hidden { - display: none !important; + .tiny-hidden { + display: none !important; } - .tiny-visible { - display: block !important; + .tiny-visible { + display: block !important; } .tiny-no-float { @@ -346,31 +336,33 @@ text-align: left !important; } - thead { display: none; } + thead { + display: none; + } /* widths for tiny screens */ - .tiny-w25 { - width: 25% !important; + .tiny-w25 { + width: 25% !important; } - .tiny-w33 { - width: 33.3333% !important; + .tiny-w33 { + width: 33.3333% !important; } - .tiny-w50 { - width: 50% !important; + .tiny-w50 { + width: 50% !important; } - .tiny-w66 { - width: 66.6666% !important; + .tiny-w66 { + width: 66.6666% !important; } - .tiny-w75 { - width: 75% !important; + .tiny-w75 { + width: 75% !important; } .tiny-w100, - .tiny-wauto { + .tiny-wauto { display: block !important; float: none !important; clear: none !important; @@ -381,12 +373,14 @@ } /* margins for tiny screens */ - .tiny-man { - margin: 0 !important; + .tiny-man, + .tiny-ma0 { + margin: 0 !important; } - .tiny-pan { - padding: 0 !important; + .tiny-pan, + .tiny-pa0 { + padding: 0 !important; } /* grid rwd for tiny screens */ diff --git a/sass/_09-print.scss b/sass/_09-print.scss index a567590..af3b0fd 100644 --- a/sass/_09-print.scss +++ b/sass/_09-print.scss @@ -37,14 +37,14 @@ display: none; } - img { + img { filter: grayscale(100%); } /* no orphans, no widows */ p, blockquote { - orphans: 3; + orphans: 3; widows: 3; } @@ -52,12 +52,12 @@ blockquote, ul, ol { - page-break-inside: avoid; + page-break-inside: avoid; } /* page break before main headers */ h1 { - page-break-before: always; + page-break-before: always; } /* no breaks after these elements */ @@ -75,7 +75,7 @@ /* displaying URLs */ a[href]:after { - content: " (" attr(href) ")"; + content: " (" attr(href) ")"; } a[href^="javascript:"]:after, diff --git a/sass/knacss.scss b/sass/knacss.scss index 53901c5..18c9e5f 100644 --- a/sass/knacss.scss +++ b/sass/knacss.scss @@ -8,7 +8,7 @@ // 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 "_04-tables"; @import "_05-forms"; @import "_06-icons"; // UTF-8 icons @import "_07-flexbox";