From 8b3da7d4cc0f0f52d235df1cf170c5c1e9f641b8 Mon Sep 17 00:00:00 2001 From: Hugo Giraudel Date: Wed, 7 May 2014 11:33:47 +0200 Subject: [PATCH] Working on #66 --- sass/00-config.scss | 63 ++--- sass/01-base.scss | 542 +++++++++++++++++++++++++++++++++--------- sass/02-grids.scss | 119 +++++++--- sass/03-tables.scss | 9 +- sass/04-forms.scss | 38 ++- sass/05-icons.scss | 35 ++- sass/06-rwd.scss | 213 +++++++++++++---- sass/07-flexbox.scss | 25 +- sass/08-print.scss | 21 +- sass/09-booleans.scss | 20 +- sass/10-gmaps.scss | 11 +- sass/11-ie.scss | 91 ++++--- sass/12-styling.scss | 55 ++++- sass/knacss.scss | 11 +- 14 files changed, 951 insertions(+), 302 deletions(-) diff --git a/sass/00-config.scss b/sass/00-config.scss index 6032595..c25e5a6 100644 --- a/sass/00-config.scss +++ b/sass/00-config.scss @@ -1,7 +1,8 @@ -// Config file : variables, mixins, ... +/* ----------------------------- */ +/* ==configuration */ +/* ----------------------------- */ - -// booleans +// Output conf booleans $enable-ie678 : true; // "true" to activate IE6/IE7/IE8 support $enable-styling : true; // "true" to design basic elements like code, mark, blockquotes, etc. $enable-gmaps : true; // if google maps is used @@ -10,9 +11,9 @@ $enable-hyphens : true; // activate automatic hyphens on small screens $enable-helpers-width : true; // decide whether or not you need width helpers $enable-helpers-spacing : true; // decide whether or not you need spacing helpers -// font sizes -$base-font-size : 14px; // if "14px" then 1em = 14px -$line-height : 1.5; // equiv line-height 1.5 +// 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" @@ -20,57 +21,59 @@ $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-monospace : Consolas, 'DejaVu Sans Mono', Courier, monospace; // monospace font -$font-stack-universal : FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; // universal stack +// Font stacks +$font-stack-common : "Helvetica", "Arial", sans-serif; // common 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 +// Font colors $base-color : #000; // text color on body $base-color-link : #333; // primary links color; $base-color-link-hover : #000; // primary hovered/focused links color; -// backgrounds +// Backgrounds $base-background : #fff; // body background color -// spacings +// Spacings $tiny-value : 0.5em; // tiny value for margins / paddings -$small-value : 1em; // small value for margins / paddings -$medium-value : 2em; // medium value for margins / paddings -$large-value : 4em; // large value for margins / paddings -$extra-large-value : 6em; // extra large value for margins / paddings -$ultra-large-value : 10em; // ultra large value for margins / paddings +$small-value : 1em; // small value for margins / paddings +$medium-value : 2em; // medium value for margins / paddings +$large-value : 4em; // large value for margins / paddings +$extra-large-value : 6em; // extra large value for margins / paddings +$ultra-large-value : 10em; // ultra large value for margins / paddings -// breakpoints -$tiny-screen : 320px; // tiny screens media query -$small-screen : 480px; // small screens media query -$medium-screen : 768px; // small screens media query +// Breakpoints +$tiny-screen : 320px; // tiny screens media query +$small-screen : 480px; // small screens media query +$medium-screen : 768px; // small screens media query $large-screen : 1024px; // large screens media query $extra-large-screen : 1280px; // extra large screens media query $ultra-large-screen : 1600px; // ultra large screens media query -// misc +// Miscellaneous $gutter : 20px; // gutter value (%, px, em, rem) for grid layouts -// Sass mixins : don't touch or you'll be banned ;) -// px to em/rem +// Sass mixins -@mixin rem($size) { +// Rem with px fallback +@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." + @warn "Please make sure `$size` is unitless."; } } -@mixin em($size) { + +// Em from px +@mixin em($size) { @if unitless($size) { $bf: $base-font-size / 1px; font-size: $size / $bf * 1em; } @else { - @warn "Please make sure `$size` is unitless." + @warn "Please make sure `$size` is unitless."; } -} \ No newline at end of file +} diff --git a/sass/01-base.scss b/sass/01-base.scss index 9cff210..bd0d149 100644 --- a/sass/01-base.scss +++ b/sass/01-base.scss @@ -1,61 +1,66 @@ @import "00-config"; -/*! -* www.KNACSS.com V3.0.0 (2014-05) @author: Raphael Goetter, Alsacreations (with help from Hugo Giraudel) -* Licence WTFPL http://www.wtfpl.net/ -*/ /* ----------------------------- */ /* == soft reset */ /* ----------------------------- */ -/* switching box model for all elements */ +/** + * Switching box model for all elements + */ * { box-sizing: border-box; } -/* soft reset */ html, body { margin: 0; padding: 0; } + ul, ol { padding-left: 2em; } + ul.unstyled { list-style: none; } + img { height: auto; vertical-align: middle; border: 0; } + audio, canvas, video { display: inline-block; } + svg:not(:root) { overflow: hidden; } /* ----------------------------- */ -/* == typography */ +/* ==typography */ /* ----------------------------- */ -/* base font-size corresponds to "10px" and is adapted to rem unit */ +/** + * 1. Base font-size corresponds to "10px" and is adapted to rem unit + */ html { - font-size: 62.5%; + font-size: 62.5%; /* 1 */ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } + body { background-color: $base-background; color: $base-color; font-family: $font-stack-common; - font-size: ($base-font-size / 10px) + em; + font-size: ($base-font-size / 10px) * 1em; line-height: $line-height; } @@ -72,58 +77,74 @@ th, label, textarea, caption, -details, -figure, +details, +figure, hgroup { margin-top: 0.75em; margin-bottom: 0; line-height: $line-height; } + h1, .h1-like { font-size: $h1-size; } + h2, .h2-like { font-size: $h2-size; } + 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 */ +/** + * Alternate font-sizing + */ .smaller { @include em($base-font-size / 1px - 4); } + .small { @include em($base-font-size / 1px - 2); } + .big { @include em($base-font-size / 1px + 2); } + .bigger { @include em($base-font-size / 1px + 4); } + .biggest { @include em($base-font-size / 1px + 6); } -code, +/** + * 1. IE Fix + */ +code, pre, samp, kbd { - white-space: pre-line; /* IE fix */ + white-space: pre-line; /* 1 */ white-space: pre-wrap; font-family: $font-stack-monospace; line-height: normal; } + em, .em, address, @@ -133,16 +154,20 @@ i, var { font-style: italic; } + .no-em { font-style: normal; } + strong, .strong { font-weight: bold; } + .no-strong { font-weight: normal; } + small, sub, sup { @@ -153,25 +178,33 @@ sup { /* == hiding content */ /* ----------------------------- */ -.visually-hidden { - position: absolute !important; - clip: rect(1px, 1px, 1px, 1px); +.visually-hidden { + position: absolute !important; + clip: rect(1px, 1px, 1px, 1px); overflow: hidden; height: 1px; width: 1px; } + +/** + * Make sure script tags are not displayed + * When body has `display: table` + */ body > script { display: none !important; } + @media print { .no-print { display: none; } } + @media (max-width: $small-screen) { .no-small-screen { display: none; } } + @media (min-width: $large-screen) { .no-large-screen { display: none; @@ -181,16 +214,30 @@ body > script { /* == browsers consistency */ /* ----------------------------- */ -/* avoid top margins on first content element */ -p, .p-like, ul, ol, dl, -blockquote, pre, -h1, h2, h3, h4, h5, h6 { +/** + * Avoid top margins on first content element + */ +p, +.p-like, +ul, +ol, +dl, +blockquote, +pre, +h1, +h2, +h3, +h4, +h5, +h6 { &:first-child { margin-top: 0; } } -/* avoid margins on nested elements */ +/** + * Avoid margins on nested elements + */ li p, li .p-like, li ul, @@ -199,33 +246,53 @@ li ol { margin-bottom: 0; } -/* max values */ -img, table, td, blockquote, code, pre, textarea, input, video { +/** + * Max values + */ +img, +table, +td, +blockquote, +code, +pre, +textarea, +input, +video { max-width: 100%; } -/* margin-bottom on tables */ -table { margin-bottom: $medium-value; } +/** + * Margin-bottom on tables + */ +table { + margin-bottom: $medium-value; +} /* ----------------------------- */ /* ==layout and modules */ /* ----------------------------- */ -/* float layout */ -/* module, gains superpower "BFC" Block Formating Context */ -.mod { +/** + * Float layout + * Module, gains superpower "BFC" Block Formating Context + */ +.mod { overflow: hidden; } -/* blocks that needs to be placed under floats */ +/** + * Blocks that needs to be placed under floats + */ .clear, .line, .row { clear: both; } -/* blocks that must contain floats */ +/** + * Blocks that must contain floats + */ .clearfix, .line { &:after { @@ -235,139 +302,378 @@ table { margin-bottom: $medium-value; } } } -/* table layout */ +/** + * Table layout + */ .row { display: table; table-layout: fixed; width: 100%; } + .row > *, .col { display: table-cell; vertical-align: top; } -/* inline-block */ +/** + * Inline-block + */ .inbl { display: inline-block; vertical-align: top; } +/* ------------------------------ */ /* alignments (blocks and inline) */ /* ------------------------------ */ -/* left (or starting) elements */ +/** + * Left or starting elements + */ .left, .start { float: left; } + img.left, img.start { margin-right: $small-value; } -/* right (or ending) elements */ + +/** + * Right or ending elements + */ .right, .end { float: right; } + img.right, img.end { margin-left: $small-value; } + img.left, img.right, img.start, img.end { margin-bottom: $tiny-value; } -.center { margin-left: auto; margin-right: auto; } -.txtleft { text-align: left; } -.txtright { text-align: right; } -.txtcenter { text-align: center; } +.center { + margin-left: auto; + margin-right: auto; +} -// width helpers boolean +.txtleft { + text-align: left; +} + +.txtright { + text-align: right; +} + +.txtcenter { + text-align: center; +} + +/** + * Width helpers + * Only output when `$enable-helpers-width` is enabled + */ @if $enable-helpers-width == true { - /* 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%; } + /** + * Blocks widths (percentage and pixels) + */ + .w10 { + width: 10%; + } - .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; } + .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 boolean +/** + * Spacing helpers + * Only output when `$enable-helpers-spacing` is enabled + */ @if $enable-helpers-spacing == true { - /* spacing helpers - p,m = padding,margin - a,t,r,b,l = all,top,right,bottom,left - s,m,l,n = small, medium, large, none - */ - .man { margin: 0; } - .pan { padding: 0; } - .mas { margin: $small-value; } - .mam { margin: $medium-value; } - .mal { margin: $large-value; } - .pas { padding: $small-value; } - .pam { padding: $medium-value; } - .pal { padding: $large-value; } + /** + * Spacing helpers + * p, m = padding, margin + * s, m, l, n = small, medium, large, none + * a, t, r, b, l = all, top, right, bottom, left + */ + .man { + margin: 0; + } - .mtn { margin-top: 0; } - .mts { margin-top: $small-value; } - .mtm { margin-top: $medium-value; } - .mtl { margin-top: $large-value; } - .mrn { margin-right: 0; } - .mrs { margin-right: $small-value; } - .mrm { margin-right: $medium-value; } - .mrl { margin-right: $large-value; } - .mbn { margin-bottom: 0; } - .mbs { margin-bottom: $small-value; } - .mbm { margin-bottom: $medium-value; } - .mbl { margin-bottom: $large-value; } - .mln { margin-left: 0; } - .mls { margin-left: $small-value; } - .mlm { margin-left: $medium-value; } - .mll { margin-left: $large-value; } + .pan { + padding: 0; + } - .ptn { padding-top: 0; } - .pts { padding-top: $small-value; } - .ptm { padding-top: $medium-value; } - .ptl { padding-top: $large-value; } - .prn { padding-right: 0; } - .prs { padding-right: $small-value; } - .prm { padding-right: $medium-value; } - .prl { padding-right: $large-value; } - .pbn { padding-bottom: 0; } - .pbs { padding-bottom: $small-value; } - .pbm { padding-bottom: $medium-value; } - .pbl { padding-bottom: $large-value; } - .pln { padding-left: 0; } - .pls { padding-left: $small-value; } - .plm { padding-left: $medium-value; } - .pll { padding-left: $large-value; } + .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 { + margin-top: 0; + } + + .mts { + margin-top: $small-value; + } + + .mtm { + margin-top: $medium-value; + } + + .mtl { + margin-top: $large-value; + } + + .mrn { + margin-right: 0; + } + + .mrs { + margin-right: $small-value; + } + + .mrm { + margin-right: $medium-value; + } + + .mrl { + margin-right: $large-value; + } + + .mbn { + margin-bottom: 0; + } + + .mbs { + margin-bottom: $small-value; + } + + .mbm { + margin-bottom: $medium-value; + } + + .mbl { + margin-bottom: $large-value; + } + + .mln { + margin-left: 0; + } + + .mls { + margin-left: $small-value; + } + + .mlm { + margin-left: $medium-value; + } + + .mll { + margin-left: $large-value; + } + + + .ptn { + padding-top: 0; + } + + .pts { + padding-top: $small-value; + } + + .ptm { + padding-top: $medium-value; + } + + .ptl { + padding-top: $large-value; + } + + .prn { + padding-right: 0; + } + + .prs { + padding-right: $small-value; + } + + .prm { + padding-right: $medium-value; + } + + .prl { + padding-right: $large-value; + } + + .pbn { + padding-bottom: 0; + } + + .pbs { + padding-bottom: $small-value; + } + + .pbm { + padding-bottom: $medium-value; + } + + .pbl { + padding-bottom: $large-value; + } + + .pln { + padding-left: 0; + } + + .pls { + padding-left: $small-value; + } + + .plm { + padding-left: $medium-value; + } + + .pll { + padding-left: $large-value; + } } diff --git a/sass/02-grids.scss b/sass/02-grids.scss index cc024ee..387f539 100644 --- a/sass/02-grids.scss +++ b/sass/02-grids.scss @@ -5,36 +5,48 @@ /* .. use it when gutter size matters */ /* ---------------------------------- */ -/* grids inspired from SUIT https://github.com/suitcss/suit */ +/** + * Grids inspired from SUIT + * Source: https://github.com/suitcss/suit + */ -.grid { /* overall container of grids */ +/** + * Overall container of grids + */ +.grid { overflow: hidden; } + .grid > * { /* global styles for direct child ex. .grid3 */ display: block; padding: 0; margin-left: -$gutter; /* gutter value */ text-align: left; } + .grid > * > * { /* global styles for each "cell" */ display: inline-block; - padding-left: $gutter; /* gutter value */ + padding-left: $gutter; /* gutter value */ margin-left: 0; vertical-align: top; } + /* whitespace fixing for modern browsers including IE9+ */ :root .grid { font-size: 0; } + :root .grid > * > * { font-size: $base-font-size; /* fallback for Opera Mini */ font-size: ($base-font-size / 10px) + rem; } + /* Opera hack */ .opera:-o-prefocus, .grid > * { word-spacing: -0.43em; } + .grid2 > * {width: 50%;} .grid3 > * {width: 33.333%;} .grid4 > * {width: 25%;} @@ -62,6 +74,7 @@ .grid10 > *, .grid12 > * {width: 33.333%} } + @media (max-width: $small-screen) { .grid3 > *, .grid4 > *, @@ -71,6 +84,7 @@ .grid10 > *, .grid12 > * {width: 50%} } + @media (max-width: $tiny-screen) { .grid > * > * {width: 100% !important} } @@ -82,46 +96,87 @@ /* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */ -[class*="autogrid"] { /* container of autogrids */ +/** + * Container of autogrids + */ +[class*="autogrid"] { text-align: justify; + + &:after { + content: ""; + display: inline-block; + width: 100%; + } + + > * { + display: inline-block; + vertical-align: top; + text-align: left; + } } -[class*="autogrid"]:after { - content: ""; - display: inline-block; - width: 100%; -} -[class*="autogrid"] > * { - display: inline-block; - vertical-align: top; - text-align: left; -} -/* whitespace fixing for modern browsers including IE9+ */ + +/** + * Whitespace fixing for modern browsers including IE9+ + */ :root [class*="autogrid"] { font-size: 0; } + +/** + * Rem fallback for Opera Mini + */ :root [class*="autogrid"] > * { - font-size: $base-font-size; /* fallback for Opera Mini */ - font-size: ($base-font-size / 10px) + rem; + font-size: $base-font-size; /* 1 */ + font-size: ($base-font-size / 10px) * 1rem; } -/* Opera hack */ + +/** + * 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%} + +.autogrid2 > * { + width: 49%; +} + +.autogrid3 > * { + width: 32%; +} + +.autogrid4 > * { + width: 23.6%; +} + +.autogrid5 > * { + width: 19%; +} + +.autogrid6 > * { + width: 15%; +} + +.autogrid8 > * { + width: 10.8%; +} + +.autogrid10 > * { + width: 9%; +} + +.autogrid12 > * { + width: 6.4%; +} @media (max-width: $large-screen) { .autogrid5 > *, .autogrid6 > *, .autogrid8 > *, .autogrid10 > *, - .autogrid12 > * {width: 32%} + .autogrid12 > * { + width: 32%; + } } @media (max-width: $small-screen) { @@ -129,9 +184,13 @@ .autogrid6 > *, .autogrid8 > *, .autogrid10 > *, - .autogrid12 > * {width: 49%} + .autogrid12 > * { + width: 49%; + } } @media (max-width: $tiny-screen) { - [class*="autogrid"] > * {width: 100%} -} \ No newline at end of file + [class*="autogrid"] > * { + width: 100% + } +} diff --git a/sass/03-tables.scss b/sass/03-tables.scss index 56f27c0..3762509 100644 --- a/sass/03-tables.scss +++ b/sass/03-tables.scss @@ -1,4 +1,5 @@ @import "00-config"; + /* ----------------------------- */ /* ==tables */ /* ----------------------------- */ @@ -12,18 +13,22 @@ table, vertical-align: top; border: 1px solid #ccc; } + .table { display: table; } + table#recaptcha_table, table.table-auto { table-layout:auto; } + caption { padding: $small-value; color: #555; - font-style: italic; + font-style: italic; } + td, th { padding: 0.3em 0.8em; @@ -32,4 +37,4 @@ th { min-width: $medium-value; cursor: default; text-align: left; -} \ No newline at end of file +} diff --git a/sass/04-forms.scss b/sass/04-forms.scss index 0728b0c..c5ee141 100644 --- a/sass/04-forms.scss +++ b/sass/04-forms.scss @@ -1,23 +1,29 @@ @import "00-config"; + /* ----------------------------- */ /* ==forms */ /* ----------------------------- */ /* thanks to HTML5boilerplate, -* github.com/nathansmith/formalize +* github.com/nathansmith/formalize * and www.sitepen.com */ -/* buttons */ +/** + * Buttons + */ .btn { display: inline-block; } -/* forms items */ +/** + * Forms items + */ form, fieldset { border: none; } + input, button, select, @@ -27,15 +33,18 @@ label, font-family: inherit; font-size: inherit; } -label { + +label { display: inline-block; vertical-align: middle; cursor: pointer; } + legend { border: 0; white-space: normal; } + textarea { min-height: 5em; vertical-align: top; @@ -43,6 +52,7 @@ textarea { font-size: inherit; resize: vertical; } + button, input[type="button"], input[type="reset"], @@ -50,33 +60,43 @@ input[type="submit"] { cursor: pointer; -webkit-appearance: button; /* clickable input types in iOS */ } + input[type="search"] { -webkit-appearance: textfield; } -/* if select styling bugs on WebKit */ -/* select { -webkit-appearance: none; } */ +/** + * If select styling bugs on WebKit + * +select { -webkit-appearance: none; } + */ -/* 'x' appears on right of search input when text is entered. This removes it */ +/** + * Removes 'x' from search input when text is entered + */ input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; } + ::-webkit-input-placeholder { color: #777; } + input:-moz-placeholder, textarea:-moz-placeholder { color: #777; } -/* Removes inner padding and border in FF3+ */ +/** + * Removes inner padding and border in FF3+ + */ button::-moz-focus-inner, input[type='button']::-moz-focus-inner, input[type='reset']::-moz-focus-inner, input[type='submit']::-moz-focus-inner { border: 0; padding: 0; -} \ No newline at end of file +} diff --git a/sass/05-icons.scss b/sass/05-icons.scss index bdd4126..1fa82e8 100644 --- a/sass/05-icons.scss +++ b/sass/05-icons.scss @@ -1,9 +1,12 @@ @import "00-config"; + /* ----------------------------- */ /* ==icons and bullets */ /* ----------------------------- */ -.icon {display: inline-block;} +.icon { + display: inline-block; +} .icon:before, .icon.after:after { @@ -29,108 +32,130 @@ .icon.after:after { margin: 0 0 0 8px; } + .icon.after:before { content: "" !important } + .icon-rate:before, .icon-rate.after:after { content: "\2605"; } + .icon-unrate:before, .icon-unrate.after:after{ content: "\2606"; } + .icon-check:before, .icon-check.after:after{ content: "\2713"; } + .icon-uncheck:before, .icon-uncheck.after:after{ content: "\2717"; } + .icon-cloud:before, .icon-cloud.after:after { content: "\2601"; } + .icon-dl:before, .icon-dl.after:after { content: "\21E3"; font-weight: bold; } + .icon-cross:before, .icon-cross.after:after { content: "\2716"; font-weight: bold; } -.icon-arrow1:before, + +.icon-arrow1:before, .icon-arrow1.after:after { content: "\2192"; - position: relative; + position: relative; top: -0.15em; } + .icon-arrow2:before, .icon-arrow2.after:after { content: "\279E"; } + .icon-arrow3:before, .icon-arrow3.after:after { content: "\279A"; } + .icon-bracket1:before, .icon-bracket1.after:after { content: "\2039"; font-weight: bold; font-size: 1.6em; - position: relative; + position: relative; top: -0.15em; } + .icon-bracket2:before, .icon-bracket2.after:after { content: "\203A"; font-weight: bold; font-size: 1.6em; - position: relative; + position: relative; top: -0.15em; } + .icon-up:before, .icon-up.after:after { content: "\25B2"; } + .icon-down:before, .icon-down.after:after { content: "\25BC"; } + .icon-bull:before, .icon-bull.after:after { content: "\2022"; font-size: 1.2em; top: -0.05em; } + .icon-bull2:before, .icon-bull2.after:after { content: "\25E6"; top: -0.05em; } + .icon-bull3:before, .icon-bull3.after:after{ content: "\2023"; font-size: 1.6em; top: -0.05em; } + .icon-nav:before, .icon-nav.after:after { content: "\2261"; font-weight: bold; } + .icon-losange:before, .icon-losange.after:after { content: "\25C6"; } + .icon-asteri:before, .icon-asteri.after:after { content: "\2731"; font-weight: bold; } + .icon-mail:before, .icon-mail.after:after { content: "\2709"; diff --git a/sass/06-rwd.scss b/sass/06-rwd.scss index 90c4a19..0dec6b8 100644 --- a/sass/06-rwd.scss +++ b/sass/06-rwd.scss @@ -1,13 +1,22 @@ @import "00-config"; + /* ----------------------------- */ /* ==desktop and HD devices */ /* ----------------------------- */ +/** + * Rules for big resources and big screens + * e.g. background-images, font-faces, etc. + */ @media (min-width: $small-screen) { -/* here go rules for big resources and big screens like: background-images, font-faces, etc. */ + } + +/** + * Style adjustments for retina devices + */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { -/* Style adjustments for retina devices */ + } /* ---------------------------------- */ @@ -15,32 +24,61 @@ /* ---------------------------------- */ @media (min-width: $large-screen) { + /** + * Layouts for large screens + */ + .large-hidden { + display: none !important; + } + + .large-visible { + display: block !important; + } + + .large-no-float { + float: none; + } - /* layouts for large screens */ - .large-hidden { display: none !important; } - .large-visible { display: block !important; } - .large-no-float {float: none; } .large-inbl { display: inline-block; float: none; vertical-align: top; } + .large-row { display: table; table-layout: fixed; width: 100% !important; } + .large-col { display: table-cell; vertical-align: top; } - /* widths for large screens */ - .large-w25 { width: 25% !important; } - .large-w33 { width: 33.3333% !important; } - .large-w50 { width: 50% !important; } - .large-w66 { width: 66.6666% !important; } - .large-w75 { width: 75% !important; } + /** + * 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; @@ -49,16 +87,21 @@ width: auto !important; margin-left: 0 !important; margin-right: 0 !important; - border: 0; + border: 0; } - /* margins for large screens */ - .large-man { margin: 0 !important; } + /** + * Margins for large screens + */ + .large-man { + margin: 0 !important; + } } @media (max-width: $small-screen) { - - /* quick reset in small resolution and less */ + /** + * Quick reset in small resolution and less + */ .w600p, .w700p, .w800p, @@ -66,33 +109,63 @@ .mw960p { width: auto; float: none; - } + } + + /** + * Layouts for small screens + */ + .small-hidden { + display: none !important; + } + + .small-visible { + display: block !important; + } + + .small-no-float { + 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; } + /** + * 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; @@ -101,16 +174,20 @@ width: auto !important; margin-left: 0 !important; margin-right: 0 !important; - border: 0; + border: 0; } - /* margins for small screens */ + + /** + * Margins for small screens + */ .small-man { margin: 0 !important; } .small-pan { padding: 0 !important; } } @media (max-width: $tiny-screen) { - - /* quick tiny resolution reset */ + /** + * Quick tiny resolution reset + */ .mod, .col, fieldset { @@ -122,51 +199,85 @@ margin-right: 0 !important; border: 0; } + .w300p, .w400p, .w500p { width: auto; float: none; } - .row { + + .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-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; } + 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 { + .tiny-wauto { display: block !important; float: none !important; clear: none !important; @@ -175,7 +286,15 @@ margin-right: 0 !important; border: 0; } - /* margins for tiny screens */ - .tiny-man { margin: 0 !important; } - .tiny-pan { padding: 0 !important; } + + /** + * Margins for tiny screens + */ + .tiny-man { + margin: 0 !important; + } + + .tiny-pan { + padding: 0 !important; + } } diff --git a/sass/07-flexbox.scss b/sass/07-flexbox.scss index cd69d72..1be1346 100644 --- a/sass/07-flexbox.scss +++ b/sass/07-flexbox.scss @@ -1,24 +1,37 @@ @import "00-config"; -/* flexbox layout -Tutorial: http://knacss.com/demos/tutoriel.html#flex */ + +/* ----------------------------- */ +/* ==flexbox layout */ +/* ----------------------------- */ + +/** + * Tutorial: http://knacss.com/demos/tutoriel.html#flex + */ + .flex { display : flex; } + .flex-h { flex-direction: row; } + .flex-v { flex-direction: column; } + .flex-fluid { flex: 1; } + .flex-start { - order : -1; + order: -1; } + .flex-mid { - order : 1; + order: 1; } + .flex-end { - order : 42; -} \ No newline at end of file + order: 42; +} diff --git a/sass/08-print.scss b/sass/08-print.scss index c954185..e13cb96 100644 --- a/sass/08-print.scss +++ b/sass/08-print.scss @@ -1,11 +1,16 @@ @import "00-config"; -/* quick print reset */ + +/* ----------------------------- */ +/* ==print */ +/* ----------------------------- */ + @media print { * { background: transparent !important; box-shadow: none !important; text-shadow: none !important; } + body { width: auto !important; margin: auto !important; @@ -14,6 +19,7 @@ background-color: #fff !important; color: #333 !important; } + p, h1, h2, @@ -27,44 +33,53 @@ color: #000 !important; margin: auto !important; } + .print { display: block; /* displaying .print elements */ } - img { + + img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); } + p, blockquote { orphans: 3; /* no orphans */ widows: 3; /* no widows */ } + blockquote, ul, ol { page-break-inside: avoid; /* no breaks inside these elements */ } + h1 { page-break-before: always; /* page break before main headers */ } + h1, h2, h3, caption { page-break-after: avoid; /* no breaks after these elements */ } + a { color: #000 !important; text-decoration: underline !important; } + a[href]:after { content: " (" attr(href) ")"; /* displaying URLs */ } + a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } -} \ No newline at end of file +} diff --git a/sass/09-booleans.scss b/sass/09-booleans.scss index cfd96bf..c7cdf60 100644 --- a/sass/09-booleans.scss +++ b/sass/09-booleans.scss @@ -1,10 +1,14 @@ @import "00-config"; + /* ----------------------------- */ -/* ==booleans */ +/* ==output booleans */ /* ----------------------------- */ -// skip-links boolean + +/** + * Skip links + * Only output when `$enable-skip-links` is true + */ @if $enable-skip-links == true { - /* styling skip links */ .skip-links { position: absolute; @@ -15,7 +19,7 @@ background: black; color: white; text-decoration: none; - + &:focus { position: static; } @@ -23,13 +27,15 @@ } } -// hyphens boolean +/** + * Hyphens + * Only output when `$enable-hyphens` is true + */ @if $enable-hyphens == true { @media (max-width: $small-screen) { - /* you shall not pass */ div, textarea, table, td, th, code, pre, samp { word-wrap: break-word; hyphens: auto; } } -} \ No newline at end of file +} diff --git a/sass/10-gmaps.scss b/sass/10-gmaps.scss index 9b4d4bb..67e2736 100644 --- a/sass/10-gmaps.scss +++ b/sass/10-gmaps.scss @@ -2,18 +2,23 @@ /* ----------------------------- */ /* ==gmaps support */ /* ----------------------------- */ -// google maps boolean + +/** + * Google Maps fixes + * Only output when `$enable-gmaps` is true + */ @if $enable-gmaps == true { - /* 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; } -} \ No newline at end of file +} diff --git a/sass/11-ie.scss b/sass/11-ie.scss index bd95367..e0c0458 100644 --- a/sass/11-ie.scss +++ b/sass/11-ie.scss @@ -1,44 +1,65 @@ @import "00-config"; + /* ----------------------------- */ /* ==IE6, IE7, IE8 support */ /* ----------------------------- */ -// IE6, 7, 8 support boolean + +/** + * Internet Explorer 6, 7 and 8 + * Only output when `$enable-ie678` is true + */ @if $enable-ie678 == true { $bf: $base-font-size / 1px; - /* IE678 support */ - .ie678 h1, .ie678 .h1-like { - $val: $h1-size / 1rem; + + .ie678 h1, + .ie678 .h1-like { + $val: $h1-size / 1rem; $em : $val * 10 / $bf; - font-size: $em +0em; + font-size: $em +0em; } - .ie678 h2, .ie678 .h2-like { + + .ie678 h2, + .ie678 .h2-like { $val: $h2-size / 1rem; $em : $val * 10 / $bf; font-size: $em +0em; } - .ie678 h3, .ie678 .h3-like { + + .ie678 h3, + .ie678 .h3-like { $val: $h3-size / 1rem; $em : $val * 10 / $bf; font-size: $em +0em; } - .ie678 h4, .ie678 .h4-like { + + .ie678 h4, + .ie678 .h4-like { $val: $h4-size / 1rem; $em : $val * 10 / $bf; font-size: $em +0em; } - .ie678 h5, .ie678 .h5-like { + + .ie678 h5, + .ie678 .h5-like { $val: $h5-size / 1rem; $em : $val * 10 / $bf; font-size: $em +0em; } - .ie678 h6, .ie678 .h6-like { + + .ie678 h6, + .ie678 .h6-like { $val: $h6-size / 1rem; $em : $val * 10 / $bf; font-size: $em +0em; } + + /** + * Bugfix for IE8 + */ .ie678 img { - width: auto; /* @bugfix for IE8 */ + width: auto; } + .ie678 .gm-style img { height: 100%; } @@ -51,24 +72,31 @@ .col { *zoom: 1; } - /* inline-block and table-cell for IE6/IE7 */ - /* warning: .col needs width on IE6/IE7 */ + + /** + * Inline-block and table-cell for IE6/IE7 + * Warning: .col needs width on IE6/IE7 + */ .btn, .col, .inbl { *display: inline; *zoom: 1; } - .visually-hidden { - *clip: rect(1px 1px 1px 1px); + + .visually-hidden { + *clip: rect(1px 1px 1px 1px); } - - /* IE8 grid hack */ + + /** + * IE8 grid hack + */ .ie8 .grid > *, .ie8 [class*="autogrid"] > * { letter-spacing: -0.31em; text-rendering: optimizespeed; } + .ie8 .grid > * > *, .ie8 [class*="autogrid"] > * > *{ letter-spacing: normal; @@ -76,27 +104,36 @@ text-rendering: auto; } - /* IE7 grid hack */ + /** + * IE7 grid hack + */ .grid > * > *, [class*="autogrid"] > * > *{ *display: inline; *zoom: 1; } - - /* forms */ + + /** + * Forms + * 1. Corrects excess space around these inputs in IE8/9 + * 2. Removes default vertical scrollbar on empty textarea in IE6/7/8/9 + */ input[type="checkbox"], input[type="radio"] { - padding: 0; /* Corrects excess space around these inputs in IE8/9 */ - } - textarea { - overflow: auto; /* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */ + padding: 0; } - /* Active box-sizing for IE6/IE7 */ - /* @source https://github.com/Schepp/box-sizing-polyfill */ + textarea { + overflow: auto; + } + + /** + * Active box-sizing for IE6/IE7 + * Source: https://github.com/Schepp/box-sizing-polyfill + */ /* .ie67 * { behavior: url(/lib/box-sizing-polyfill/boxsizing.htc); } */ -} \ No newline at end of file +} diff --git a/sass/12-styling.scss b/sass/12-styling.scss index 76d7066..3c3851f 100644 --- a/sass/12-styling.scss +++ b/sass/12-styling.scss @@ -1,61 +1,76 @@ @import "00-config"; + /* ----------------------------- */ /* ==minor stylings */ /* ----------------------------- */ -// Styling boolean +/** + * Component styling + * Only output when `$enable-styling` is true + */ @if $enable-styling == true { - /* 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; + color: #b11; } + pre code { padding: none; background: none; color: inherit; border-radius: 0; } + mark { padding:2px 4px; background: #ff0; } + sup, sub { vertical-align: 0; position: relative; } + sup { bottom: 1ex; } + sub { top: 0.5ex; } + blockquote { margin-left: 0; padding-left: 1em; border-left: 4px solid rgba(0,0,0,0.15); font-style: italic; } + q { font-style: normal; } + q, .q { quotes: "“\00a0" "\00a0”"; } + q:lang(fr), .q:lang(fr) { quotes: "«\00a0" "\00a0»"; } + hr { display: block; clear: both; @@ -66,39 +81,55 @@ color: #ccc; background-color: #ccc; } - /* alternate tables */ - .alternate { border: 0; } - .alternate tbody { - border: 1px solid #ccc; + + /** + * Alternate tables + */ + .alternate { + border: 0; } + + .alternate tbody { + border: 1px solid #ccc; + } + .alternate thead tr > * + * { border-left: 0; } + .alternate tbody tr > * + * { border-left: 1px solid #ccc; } - /* alternate-vert tables */ - .alternate-vert { + /** + * Alternate-vert tables + */ + .alternate-vert { border: 0; border-right: 1px solid #ccc; } + .alternate-vert tr > :first-child { border-bottom: 0; } + .alternate-vert tr > * + * { border-top: 1px solid #ccc; } - /* striped tables */ + /** + * Striped tables + */ .striped tbody tr:nth-child(odd) { background: #eee; background: rgba(0, 0, 0, .05); } - /* striped-vert tables */ + /** + * Striped-vert tables + */ .striped-vert tr > :first-child { background: #eee; background: rgba(0, 0, 0, .05); } -} \ No newline at end of file +} diff --git a/sass/knacss.scss b/sass/knacss.scss index 52f62c7..56efd87 100644 --- a/sass/knacss.scss +++ b/sass/knacss.scss @@ -1,3 +1,8 @@ +/*! +* www.KNACSS.com V3.0.0 (2014-05) @author: Raphael Goetter, Alsacreations (with help from Hugo Giraudel) +* Licence WTFPL http://www.wtfpl.net/ +*/ + // Sass config file @import "00-config"; @@ -6,11 +11,11 @@ // Sass files : chose the ones you need @import "02-grids"; -@import "03-tables"; +@import "03-tables"; @import "04-forms"; @import "05-icons"; @import "06-rwd"; -@import "07-flexbox"; +@import "07-flexbox"; @import "08-print"; @import "09-booleans"; @import "10-gmaps"; @@ -23,4 +28,4 @@ /* Here should go your own CSS styles */ /* You can also link them with a Sass @import */ -/* @import "my-styles"; */ \ No newline at end of file +/* @import "my-styles"; */