From 0468166a34891f7b253e7bfeba862c990233d0e0 Mon Sep 17 00:00:00 2001 From: raphaelgoetter Date: Sun, 31 Mar 2013 10:19:51 +0200 Subject: [PATCH] first commit --- forms.css | 82 ++++++ grids.css | 24 ++ icons.css | 211 ++++++++++++++ knacss.css | 535 +++++++++++++++++++++++++++++++++++ knacss.less | 782 ++++++++++++++++++++++++++++++++++++++++++++++++++++ knacss.scss | 702 ++++++++++++++++++++++++++++++++++++++++++++++ print.css | 53 ++++ rwd.css | 197 +++++++++++++ tables.css | 74 +++++ 9 files changed, 2660 insertions(+) create mode 100644 forms.css create mode 100644 grids.css create mode 100644 icons.css create mode 100644 knacss.css create mode 100644 knacss.less create mode 100644 knacss.scss create mode 100644 print.css create mode 100644 rwd.css create mode 100644 tables.css diff --git a/forms.css b/forms.css new file mode 100644 index 0000000..e12c041 --- /dev/null +++ b/forms.css @@ -0,0 +1,82 @@ + +/* ----------------------------- */ +/* ==forms */ +/* ----------------------------- */ + +/* thanks to HTML5boilerplate, github.com/nathansmith/formalize and www.sitepen.com */ + + +/* buttons */ +.btn { display: inline-block; } + +.btn.alternate {} +.btn.highlight {} +.login {} +.logout {} +.primary {} +.warning {} +.error {} +.success {} + +/* forms items */ +label { + display: inline-block; + vertical-align: middle; + cursor: pointer; +} +legend { + border: 0; + white-space: normal; +} +button, +input, +select { + font-family: "Century Gothic", helvetica, arial, sans-serif; + font-size: 100%; + margin: 0; + vertical-align: middle; +} +textarea { + overflow: auto; /* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */ + min-height: 5em; + font-size: 1.75em; + vertical-align: top; + resize: vertical; +} +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; + -webkit-appearance: button; /* clickable input types in iOS */ + *overflow: visible; /* Corrects inner spacing displayed oddly in IE7 */ +} +input[type="checkbox"], +input[type="radio"] { + padding: 0; /* Corrects excess space around these inputs in IE8/9 */ + *width: 13px; *height: 13px; /* Corrects excess space around these inputs in IE7 */ +} +input[type="search"] { -webkit-appearance: textfield; } + +/* if select styling bugs on WebKit */ +/* select { -webkit-appearance: none; } */ + +/* 'x' appears on right of search input when text is entered. This removes it */ +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-results-button, +input[type="search"]::-webkit-search-results-decoration { + display: none; +} +::-webkit-input-placeholder { color: #777; } +input:-moz-placeholder, +textarea:-moz-placeholder { color: #777; } + +/* Removes inner padding and border in FF3+ */ +button::-moz-focus-inner, +input[type='button']::-moz-focus-inner, +input[type='reset']::-moz-focus-inner, +input[type='submit']::-moz-focus-inner { + border: 0; + padding: 0; +} diff --git a/grids.css b/grids.css new file mode 100644 index 0000000..9e60f24 --- /dev/null +++ b/grids.css @@ -0,0 +1,24 @@ + +/* ----------------------------- */ +/* ==grids */ +/* ----------------------------- */ + +/* equal grids with 2% gutter */ +[class*=grid] > * {float: left; } /* direct childrens are floating */ +[class*=grid] > * + * { margin-left: 2%; } /* here's the gutter */ +.grid2 > * { width: 49%; } +.grid3 > * { width: 32%; } +.grid4 > * { width: 23.5%; } +.grid5 > * { width: 18.4%; } +.grid6 > * { width: 15%; } + +/* unequal grids (1-2, 2-1, 1-3 and 3-1) */ +.grid2-1 > *:first-child, +.grid1-2 > * + * { width: 66%; } +.grid1-2 > *:first-child, +.grid2-1 > * + * { width: 32%; } +.grid1-3 > *:first-child, +.grid3-1 > * + * { width: 23.5%; } +.grid3-1 > *:first-child, +.grid1-3 > * + * { width: 74.5%; } + diff --git a/icons.css b/icons.css new file mode 100644 index 0000000..f040e91 --- /dev/null +++ b/icons.css @@ -0,0 +1,211 @@ + +/* ----------------------------- */ +/* ==icons and bullets */ +/* ----------------------------- */ + +.icon {display: inline-block;} + +.icon:before, +.icon > li:before, +.icon.after:after, +.icon.after > li:after { + content: ""; + display: inline-block; + vertical-align: middle; + position: relative; top: -.1em; + margin: 0 0.3em 0 0; + font: 1.4em/1 sans-serif; + color: #000; + text-shadow: 1px 1px 0 rgba(0,0,0,.1); + speak: none; +} + +@media (min-device-width: 768px) { + .icon:before, + .icon > li:before, + .icon.after:after, + .icon.after > li:after { + font: 1em/0.6 sans-serif; + -webkit-transform: rotateZ(0.05deg); + } +} + +.icon.after:after, +.icon.after > li:after { + margin: 0 0 0 8px; +} + +ul.icon {display: block;} +ul.icon > li {list-style: none;} +ul.icon:before, +ul.icon.after:after {content:""} +.icon.after:before, +.icon.after > li:before {content: "" !important} + +.icon-rate:before, +.icon-rate > li:before, +.icon-rate.after:after, +.icon-rate.after > li:after { + content: "\2605"; +} +.icon-unrate:before, +.icon-unrate > li:before, +.icon-unrate.after:after, +.icon-unrate.after > li:after { + content: "\2606"; +} +.icon-check:before, +.icon-check > li:before, +.icon-check.after:after, +.icon-check.after > li:after { + content: "\2713"; +} +.icon-uncheck:before, +.icon-uncheck > li:before, +.icon-uncheck.after:after, +.icon-uncheck.after > li:after { + content: "\2717"; +} +.icon-cloud:before, +.icon-cloud > li:before, +.icon-cloud.after:after, +.icon-cloud.after > li:after { + content: "\2601"; +} +.icon-dl:before, +.icon-dl > li:before, +.icon-dl.after:after, +.icon-dl.after > li:after { + content: "\21E3"; + font-weight: bold; +} +.icon-cross:before, +.icon-cross > li:before, +.icon-cross.after:after, +.icon-cross.after > li:after { + content: "\2716"; + font-weight: bold; +} +.icon-arrow1:before, +.icon-arrow1 > li:before, +.icon-arrow1.after:after, +.icon-arrow1.after > li:after { + content: "\2192"; + position: relative; top: -0.15em; +} +.icon-arrow2:before, +.icon-arrow2 > li:before, +.icon-arrow2.after:after, +.icon-arrow2.after > li:after { + content: "\279E"; +} +.icon-arrow3:before, +.icon-arrow3 > li:before, +.icon-arrow3.after:after, +.icon-arrow3.after > li:after { + content: "\279A"; +} +.icon-bracket1:before, +.icon-bracket1 > li:before, +.icon-bracket1.after:after, +.icon-bracket1.after > li:after { + content: "\2039"; + font-weight: bold; + font-size: 1.6em; + position: relative; top: -0.15em; +} +.icon-bracket2:before, +.icon-bracket2 > li:before, +.icon-bracket2.after:after, +.icon-bracket2.after > li:after { + content: "\203A"; + font-weight: bold; + font-size: 1.6em; + position: relative; top: -0.15em; +} +.icon-up:before, +.icon-up > li:before, +.icon-up.after:after, +.icon-up.after > li:after { + content: "\25B2"; +} +.icon-down:before, +.icon-down > li:before, +.icon-down.after:after, +.icon-down.after > li:after { + content: "\25BC"; +} +.icon-bull:before, +.icon-bull > li:before, +.icon-bull.after:after, +.icon-bull.after > li:after { + content: "\2022"; + font-size: 1.2em; + top: -0.05em; +} +.icon-bull2:before, +.icon-bull2 > li:before, +.icon-bull2.after:after, +.icon-bull2.after > li:after { + content: "\25E6"; + top: -0.05em; +} +.icon-bull3:before, +.icon-bull3 > li:before, +.icon-bull3.after:after, +.icon-bull3.after > li:after { + content: "\2023"; + font-size: 1.6em; + top: -0.05em; +} +.icon-nav:before, +.icon-nav > li:before, +.icon-nav.after:after, +.icon-nav.after > li:after { + content: "\2261"; + font-weight: bold; + font-size: 1.6em; +} +.icon-losange:before, +.icon-losange > li:before, +.icon-losange.after:after, +.icon-losange.after > li:after { + content: "\25C6"; +} +.icon-asteri:before, +.icon-asteri > li:before, +.icon-asteri.after:after, +.icon-asteri.after > li:after { + content: "\2731"; + font-weight: bold; +} +.icon-mail:before, +.icon-mail > li:before, +.icon-mail.after:after, +.icon-mail.after > li:after { + content: "\2709"; + font-size: 1.6em; + top: -.05em; +} + +ol.styled {counter-reset: styled;} +ol.styled > li { + list-style-type: none; + counter-increment: styled; + margin-bottom: .3em; +} +ol.styled > li:before { + content: counter(styled); + display: inline-block; + width: 1em; height: 1em; + line-height: 1; + padding: 2px; + margin-right: .4em; + vertical-align: middle; + background: rgba(0,0,0,.5); + border-radius: 50%; + font-size: .9em; + text-align: center; + text-indent: -0.1em; + color: white; +} \ No newline at end of file diff --git a/knacss.css b/knacss.css new file mode 100644 index 0000000..8620186 --- /dev/null +++ b/knacss.css @@ -0,0 +1,535 @@ +/* +* www.KNACSS.com V2.6d @author: Raphael Goetter, Alsacreations +* Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/ +*/ + +/* ----------------------------- */ +/* ==reset */ +/* ----------------------------- */ + +/* base font-size corresponds to 10px and is adapted to rem unit */ +html { + font-size: 62.5%; +} +body { + background-color: #fff; + color: #000; + font-family: "Century Gothic", helvetica, arial, sans-serif; + font-size: 1.4em; /* equiv 14px */ + line-height: 1.5; /* adapt to your design */ +} + +/* font-sizing for content */ +/* preserve vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */ +p, +ul, +ol, +dl, +blockquote, +pre, +td, +th, +label, +textarea, +caption, +details, +figure, +hgroup { + font-size: 1em; /* equiv 14px */ + line-height: 1.5; + margin: .75em 0 0; +} +h1, .h1-like { + font-size: 1.8571em; /* equiv 26px */ + font-weight: normal; + line-height: 1.6154em; + margin: .8077em 0 0 0; +} +h2, .h2-like { + font-size: 1.7143em; /* equiv 24px */ + font-weight: normal; + line-height: 1.75em; + margin: .875em 0 0 0; +} +h3, .h3-like { + font-size: 1.5714em; /* equiv 22px */ + font-weight: normal; + line-height: 1.909em; + margin: .9545em 0 0 0; +} +h4, .h4-like { + font-size: 1.4286em; /* equiv 20px */ + font-weight: normal; + line-height: 1.05em; + margin: 1.05em 0 0 0; +} +h5, .h5-like { + font-size: 1.2857em; /* equiv 18px */ + font-weight: normal; + line-height: 1.1667em; + margin: 1.1667em 0 0 0; +} +h6, .h6-like { + font-size: 1.1429em; /* equiv 16px */ + font-weight: normal; + line-height: 1.3125em; + margin: 1.3125em 0 0 0; +} + +/* alternate font-sizing */ +.smaller { + font-size: .7143em; /* equiv 10px */ +} +.small { + font-size: .8571em; /* equiv 12px */ +} +.big { + font-size: 1.1429em; /* equiv 16px */ +} +.bigger { + font-size: 1.2857em; /* equiv 18px */ +} +.biggest { + font-size: 1.4286em; /* equiv 20px */ +} + +/* soft reset */ +html, +body, +textarea, +figure, +label { + margin: 0; + padding: 0; +} +ul, +ol { + padding-left: 2em; +} +code, +pre, +samp, +kbd { + white-space: pre-wrap; + font-family: consolas, 'DejaVu Sans Mono', courier, monospace; + line-height: 1em; +} +code, kbd, mark { + border-radius: 2px; +} +em { + font-style: italic; +} +strong { + font-weight: bold; +} +kbd { + padding: 0 2px; + border: 1px solid #999; +} +code { + padding: 2px 4px; + background: rgba(0,0,0,.04); + color: #b11; +} +mark { + padding:2px 4px; + background: #ff0; +} + +table { margin-bottom: 1.5em; } + +/* avoid top margins on first content element */ +p:first-child, +ul:first-child, +ol:first-child, +dl:first-child, +blockquote:first-child, +pre:first-child, +h1:first-child, +h2:first-child, +h3:first-child, +h4:first-child, +h5:first-child, +h6:first-child { + margin-top: 0; +} + +/* avoid margins on nested elements */ +li p, +li ul, +li ol { + margin-top: 0; + margin-bottom: 0; +} + +/* max values */ +img, table, td, blockquote, code, pre, textarea, input, video { + max-width: 100%; +} + +/* you shall not pass */ +div, textarea, table, td, th, code, pre, samp { + word-wrap: break-word; + -webkit-hyphens: auto; + -moz-hyphens: auto; + -ms-hyphens: auto; + -o-hyphens: auto; + hyphens: auto; +} + +/* pictures */ +img { + height: auto; + vertical-align: middle; +} +/* Gmap3 max-width bug fix on images */ +#map_canvas img, +.gmnoprint img {max-width: none;} + +a img { border: 0; } + +/* scripts */ +body > script {display: none !important;} + +/* skip-links */ +.skip-links { + position: absolute; +} +.skip-links a { + position: absolute; + left: -7000px; + padding: 0.5em; + background: #000; + color:#fff; + text-decoration: none; +} +.skip-links a:focus { + position: static; +} + +/* ----------------------------- */ +/* ==layout and modules */ +/* ----------------------------- */ + +/* switching box model for all elements */ +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +/* float layout */ +/* module, contains floats (.item is the same) */ +.mod, .item { + overflow: hidden; +} + +/* blocks that needs to be placed under floats */ +.clear, +.line, +.row { + clear: both; +} + +/* blocks that must contain floats */ +.clearfix:after, +.line:after, +.mod:after { + content: ""; + display: table; + clear: both; +} + +/* table layout */ +.row { + display: table; + table-layout: fixed; + width: 100%; +} +.row > *, +.col { + display: table-cell; + vertical-align: top; +} + +/* inline-block */ +.inbl { + display: inline-block; + vertical-align: top; + margin-right: -.25em; +} + +/* flexbox layout */ +.flex { + display : -webkit-box; + display : -moz-box; + display: -ms-flexbox; + display : -webkit-flex; + display : flex; +} +.flex-h { + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} +.flex-v { + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} +.flex-fluid { + -moz-box-flex: 1; + -webkit-flex: 1; + -moz-flex: 1; + -ms-flex: 1; + flex: 1; +} +.flex-start { + -webkit-box-ordinal-group: -1; + -moz-box-ordinal-group: 0; + -ms-flex-order : -1; + -webkit-order : -1; + -moz-order : -1; + order : -1; +} +.flex-mid { + -webkit-box-ordinal-group: 1; + -moz-box-ordinal-group: 1; + -ms-flex-order : 1; + -webkit-order : 1; + -moz-order : 1; + order : 1; +} +.flex-end { + -webkit-box-ordinal-group: 42; + -moz-box-ordinal-group: 42; + -ms-flex-order : 42; + -webkit-order : 42; + -moz-order : 42; + order : 42; +} + +/* alignments (blocks and inline) */ +/* ------------------------------ */ + +/* left elements */ +.left { + float: left; +} +img.left { + margin-right: 1em; +} + +/* right elements */ +.right { + float: right; +} +img.right { + margin-left: 1em; +} + +img.left, img.right { + margin-bottom: 5px; +} + +.center { margin-left: auto; margin-right: auto; } +.txtleft { text-align: left; } +.txtright { text-align: right; } +.txtcenter { text-align: center; } + +/* blocks widths (percentage and pixels) */ +.w10 { width: 10%; } +.w20 { width: 20%; } +.w25 { width: 25%; } +.w30 { width: 30%; } +.w33 { width: 33.333%; } +.w40 { width: 40%; } +.w50 { width: 50%; } +.w60 { width: 60%; } +.w66 { width: 66.666%; } +.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; } + +/* spacing helpers +p,m = padding,margin +a,t,r,b,l = all,top,right,bottom,left +s,m,l,n = small(10px),medium(20px),large(30px),none(0) +source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css +*/ +.m-reset, .ma0 { margin: 0 !important; } +.p-reset, .pa0 { padding: 0 !important; } +.ma1, .mas { margin: 10px !important; } +.ma2, .mam { margin: 20px !important; } +.ma3, .mal { margin: 30px !important; } +.pa1, .pas { padding: 10px; } +.pa2, .pam { padding: 20px; } +.pa3, .pal { padding: 30px; } + +.mt0, .mtn { margin-top: 0 !important; } +.mt1, .mts { margin-top: 10px !important; } +.mt2, .mtm { margin-top: 20px !important; } +.mt3, .mtl { margin-top: 30px !important; } +.mr0, .mrn { margin-right: 0; } +.mr1, .mrs { margin-right: 10px; } +.mr2, .mrm { margin-right: 20px; } +.mr3, .mrl { margin-right: 30px; } +.mb0, .mbn { margin-bottom: 0 !important; } +.mb1, .mbs { margin-bottom: 10px !important; } +.mb2, .mbm { margin-bottom: 20px !important; } +.mb3, .mbl { margin-bottom: 30px !important; } +.ml0, .mln { margin-left: 0; } +.ml1, .mls { margin-left: 10px; } +.ml2, .mlm { margin-left: 20px; } +.ml3, .mll { margin-left: 30px; } + +.pt0, .ptn { padding-top: 0; } +.pt1, .pts { padding-top: 10px; } +.pt2, .ptm { padding-top: 20px; } +.pt3, .ptl { padding-top: 30px; } +.pr0, .prn { padding-right: 0; } +.pr1, .prs { padding-right: 10px; } +.pr2, .prm { padding-right: 20px; } +.pr3, .prl { padding-right: 30px; } +.pb0, .pbn { padding-bottom: 0; } +.pb1, .pbs { padding-bottom: 10px; } +.pb2, .pbm { padding-bottom: 20px; } +.pb3, .pbl { padding-bottom: 30px; } +.pl0, .pln { padding-left: 0; } +.pl1, .pls { padding-left: 10px; } +.pl2, .plm { padding-left: 20px; } +.pl3, .pll { padding-left: 30px; } + +/* hiding content */ +.visually-hidden { + position: absolute; + left: -7000px; + overflow: hidden; +} +[dir=rtl] .visually-hidden { + left: auto; + right: -7000px; +} + +.desktop-hidden { display: none; } /* hidden on desktop */ + +/* ----------------------------- */ +/* ==header */ +/* ----------------------------- */ + +/* ----------------------------- */ +/* ==sidebar */ +/* ----------------------------- */ + +/* ----------------------------- */ +/* ==footer */ +/* ----------------------------- */ + +/* ----------------------------- */ +/* ==forms */ +/* ----------------------------- */ +form, +fieldset { + border: none; +} +input, +button, +select, +label, +.btn { + vertical-align: middle; /* @bugfix alignment */ + font-family: inherit; +} +textarea { + resize: vertical; + font-family: inherit; +} + +/* ----------------------------- */ +/* ==main */ +/* ----------------------------- */ + +/* ----------------------------- */ +/* ==iefix */ +/* ----------------------------- */ + +/* haslayout for IE6/IE7 */ +.ie67 .clearfix, +.ie67 .line, +.ie67 .mod, +.ie67 .row, +.ie67 .col { + zoom: 1; +} + +/* inline-block and table-cell for IE6/IE7 */ +/* warning: .col needs width on IE6/IE7 */ +.ie67 .btn, +.ie67 .col, +.ie67 .inbl { + display: inline; + zoom: 1; +} +.ie8 img { + width: auto; /* @bugfix for IE8 */ +} + +/* Active box-sizing for IE6/IE7 */ +/* @source https://github.com/Schepp/box-sizing-polyfill */ +/* +.ie67 * { + behavior: url(/js/boxsizing.htc); +} +*/ + +/* ----------------------------- */ +/* ==print */ +/* ----------------------------- */ + +/* quick print reset */ +@media print { + p, + blockquote { + orphans: 2; + widows: 2; + } + blockquote, + ul, + ol { + page-break-inside: avoid; + } + h1, + h2, + h3, + caption { + page-break-after: avoid; + } +} + +/* orientation iOS font-size fix */ +@media (orientation: landscape) and (max-device-width: 768px) { + html, + body { + -webkit-text-size-adjust: 100%; + } +} \ No newline at end of file diff --git a/knacss.less b/knacss.less new file mode 100644 index 0000000..c186982 --- /dev/null +++ b/knacss.less @@ -0,0 +1,782 @@ +/* +* www.KNACSS.com V2.6d @author: Raphael Goetter, Alsacreations +* Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/ +*/ + +// LESS values : adapt them to your design +@basefont : 14; // if "14" then 1em = 14px +@l-h : 1.5; // equiv line-height 1.5em +@smallvalue : 10px; // small value for margins / paddings +@mediumvalue : 20px; // medium value for margins / paddings +@largevalue : 30px; // large value for margins / paddings +@tinyscreen : 480px; // small screens media query +@mediumscreen : 768px; // medium screens media query +@largescreen : 1280px; // large screens media query +@gutter : 1.5%; // gutter value (%) for grid layouts + +// LESS functions : don't touch ;) +.pxtoem (@fontsize) {font-size: (@fontsize / @basefont) + 0em;} +.line (@fontsize) {line-height: @l-h *2 / (@fontsize / @basefont) + 0em} +.mtop (@fontsize) {margin: @l-h / (@fontsize / @basefont) + 0em 0 0} +.grid (@number) {width: (100%-(@gutter*(@number - 1))) / @number;} +.flow(@font-size, @base-font: @basefont, @base-height: @l-h) { + @coef: ceil(1 / (@base-height * @base-font / @font-size)); + @size: (@font-size / @base-font) + 0em; + @height: (@base-font * @base-height / @font-size) + 0em; + font-size: @size; + line-height: @height * @coef; + margin-top: @height; + margin-bottom: 0; +} + + +/* ----------------------------- */ +/* ==reset */ +/* ----------------------------- */ + +/* base font-size corresponds to 10px and is adapted to rem unit */ +html { + font-size: 62.5%; +} +body { + background-color: #fff; + color: #000; + font-family: "Century Gothic", helvetica, arial, sans-serif; + font-size: (@basefont / 10) + 0em; + line-height: @l-h; // adapt to your design +} + +/* font-sizing for content */ +/* preserve vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */ +p, +ul, +ol, +dl, +blockquote, +pre, +td, +th, +label, +textarea, +caption, +details, +figure, +hgroup { + .flow(@basefont); +} +h1, .h1-like { + .flow(26); // equiv 26px + font-weight: normal; +} +h2, .h2-like { + .flow(24); // equiv 24px + font-weight: normal; +} +h3, .h3-like { + .flow(22); // equiv 22px + font-weight: normal; +} +h4, .h4-like { + .flow(20); // equiv 20px + font-weight: normal; +} +h5, .h5-like { + .flow(18); // equiv 18px + font-weight: normal; +} +h6, .h6-like { + .flow(16); // equiv 16px + font-weight: normal; +} + +/* alternate font-sizing */ +.smaller { + .pxtoem (10); /* equiv 10px */ +} +.small { + .pxtoem (12); /* equiv 12px */ +} +.big { + .pxtoem (16); /* equiv 16px */ +} +.bigger { + .pxtoem (18); /* equiv 18px */ +} +.biggest { + .pxtoem (20); /* equiv 20px */ +} + +/* soft reset */ +html, +body, +textarea, +figure, +label { + margin: 0; + padding: 0; +} +ul, +ol { + padding-left: 2em; +} +code, +pre, +samp, +kbd { + white-space: pre-wrap; + font-family: consolas, 'DejaVu Sans Mono', courier, monospace; + line-height: 1em; +} +code, kbd, mark { + border-radius: 2px; +} +em { + font-style: italic; +} +strong { + font-weight: bold; +} +kbd { + padding: 0 2px; + border: 1px solid #999; +} +code { + padding: 2px 4px; + background: rgba(0,0,0,.04); + color: #b11; +} +mark { + padding:2px 4px; + background: #ff0; +} +table { margin-bottom: 1.5em; } + +/* avoid top margins on first content element */ +p, ul, ol, dl, +blockquote, pre, +h1, h2, h3, h4, h5, h6 { + &:first-child { + margin-top: 0; + } +} + +/* avoid margins on nested elements */ +li p, +li ul, +li ol { + margin-top: 0; + margin-bottom: 0; +} + +/* max values */ +img, table, td, blockquote, code, pre, textarea, input, video { + max-width: 100%; +} + +/* you shall not pass */ +div, textarea, table, td, th, code, pre, samp { + word-wrap: break-word; + -webkit-hyphens: auto; + -moz-hyphens: auto; + -ms-hyphens: auto; + -o-hyphens: auto; + hyphens: auto; +} + +/* pictures */ +img { + height: auto; + vertical-align: middle; +} +/* Gmap3 max-width bug fix on images */ +#map_canvas img, +.gmnoprint img {max-width: none;} + +a img { border: 0; } + +/* scripts */ +body > script {display: none !important;} + +/* skip-links */ +.skip-links { + position: absolute; + + a { + position: absolute; + left: -7000px; + padding: 0.5em; + background: black; + color: white; + text-decoration: none; + + &:focus { + position: static; + } + } +} + +/* ----------------------------- */ +/* ==layout and modules */ +/* ----------------------------- */ + +/* switching box model for all elements */ +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +/* float layout */ +/* module, contains floats (.item is the same) */ +.mod, .item { + overflow: hidden; +} + +/* blocks that needs to be placed under floats */ +.clear, +.line, +.row { + clear: both; +} + +/* blocks that must contain floats */ +.clearfix:after, +.line:after, +.mod:after { + content: ""; + display: table; + clear: both; +} + +/* table layout */ +.row { + display: table; + table-layout: fixed; + width: 100%; +} +.row > *, +.col { + display: table-cell; + vertical-align: top; +} + +/* inline-block */ +.inbl { + display: inline-block; + vertical-align: top; + margin-right: -.25em; +} + +/* flexbox layout */ +.flex { + display : -webkit-box; + display : -moz-box; + display: -ms-flexbox; + display : -webkit-flex; + display : flex; +} +.flex-h { + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} +.flex-v { + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; +} +.flex-fluid { + -moz-box-flex: 1; + -webkit-flex: 1; + -moz-flex: 1; + -ms-flex: 1; + flex: 1; +} +.flex-start { + -webkit-box-ordinal-group: -1; + -moz-box-ordinal-group: 0; + -ms-flex-order : -1; + -webkit-order : -1; + -moz-order : -1; + order : -1; +} +.flex-mid { + -webkit-box-ordinal-group: 1; + -moz-box-ordinal-group: 1; + -ms-flex-order : 1; + -webkit-order : 1; + -moz-order : 1; + order : 1; +} +.flex-end { + -webkit-box-ordinal-group: 42; + -moz-box-ordinal-group: 42; + -ms-flex-order : 42; + -webkit-order : 42; + -moz-order : 42; + order : 42; +} + +/* alignments (blocks and inline) */ +/* ------------------------------ */ + +/* left elements */ +.left { + float: left; +} +img.left { + margin-right: 1em; +} + +/* right elements */ +.right { + float: right; +} +img.right { + margin-left: 1em; +} + +img.left, img.right { + margin-bottom: 5px; +} + +.center { margin-left: auto; margin-right: auto; } +.txtleft { text-align: left; } +.txtright { text-align: right; } +.txtcenter { text-align: center; } + +/* grids */ +/* ------------------------------ */ + +[class*=grid] > * {float: left; } /* direct childrens are floating */ + +.grid2 > * {.grid(2);} +.grid3 > * {.grid(3);} +.grid4 > * {.grid(4);} +.grid5 > * {.grid(5);} +.grid6 > * {.grid(6);} + +.grid2 > * + *, +.grid3 > * + *, +.grid4 > * + *, +.grid5 > * + *, +.grid6 > * + *, +.grid2-1 > * + *, +.grid1-2 > * + *, +.grid3-1 > * + *, +.grid1-3 > * + * { + margin-left: @gutter; +} +.grid2-1 > *, +.grid1-2 > * { + width: (100%-@gutter) / 3; +} +.grid2-1 > :first-child, +.grid1-2 > * + * { + width: (100%-@gutter) * 2 / 3; +} +.grid3-1 > *, +.grid1-3 > * { + width: (100%-@gutter) / 4; +} +.grid3-1 > :first-child, +.grid1-3 > * + * { + width: (100%-@gutter) * 3 / 4; +} + +/* blocks widths (percentage and pixels) */ +.w10 { width: 10%; } +.w20 { width: 20%; } +.w25 { width: 25%; } +.w30 { width: 30%; } +.w33 { width: 33.333%; } +.w40 { width: 40%; } +.w50 { width: 50%; } +.w60 { width: 60%; } +.w66 { width: 66.666%; } +.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; } + +/* spacing helpers +p,m = padding,margin +a,t,r,b,l = all,top,right,bottom,left +s,m,l,n = small(10px),medium(20px),large(30px),none(0) +source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css +*/ +.m-reset, .ma0 { margin: 0 !important; } +.p-reset, .pa0 { padding: 0 !important; } +.ma1, .mas { margin: @smallvalue !important; } +.ma2, .mam { margin: @mediumvalue !important; } +.ma3, .mal { margin: @largevalue !important; } +.pa1, .pas { padding: @smallvalue; } +.pa2, .pam { padding: @mediumvalue; } +.pa3, .pal { padding: @largevalue; } + +.mt0, .mtn { margin-top: 0 !important; } +.mt1, .mts { margin-top: @smallvalue !important; } +.mt2, .mtm { margin-top: @mediumvalue !important; } +.mt3, .mtl { margin-top: @largevalue !important; } +.mr0, .mrn { margin-right: 0; } +.mr1, .mrs { margin-right: @smallvalue; } +.mr2, .mrm { margin-right: @mediumvalue; } +.mr3, .mrl { margin-right: @largevalue; } +.mb0, .mbn { margin-bottom: 0 !important; } +.mb1, .mbs { margin-bottom: @smallvalue !important; } +.mb2, .mbm { margin-bottom: @mediumvalue !important; } +.mb3, .mbl { margin-bottom: @largevalue !important; } +.ml0, .mln { margin-left: 0; } +.ml1, .mls { margin-left: @smallvalue; } +.ml2, .mlm { margin-left: @mediumvalue; } +.ml3, .mll { margin-left: @largevalue; } + +.pt0, .ptn { padding-top: 0; } +.pt1, .pts { padding-top: @smallvalue; } +.pt2, .ptm { padding-top: @mediumvalue; } +.pt3, .ptl { padding-top: @largevalue; } +.pr0, .prn { padding-right: 0; } +.pr1, .prs { padding-right: @smallvalue; } +.pr2, .prm { padding-right: @mediumvalue; } +.pr3, .prl { padding-right: @largevalue; } +.pb0, .pbn { padding-bottom: 0; } +.pb1, .pbs { padding-bottom: @smallvalue; } +.pb2, .pbm { padding-bottom: @mediumvalue; } +.pb3, .pbl { padding-bottom: @largevalue; } +.pl0, .pln { padding-left: 0; } +.pl1, .pls { padding-left: @smallvalue; } +.pl2, .plm { padding-left: @mediumvalue; } +.pl3, .pll { padding-left: @largevalue; } + +/* hiding content */ +.visually-hidden { + position: absolute; + left: -7000px; + overflow: hidden; +} +[dir=rtl] .visually-hidden { + left: auto; + right: -7000px; +} + +/* hidden on desktop */ +.desktop-hidden { display: none; } +/* hidden on mobile */ +.mobile-hidden { display: block; } + +/* ----------------------------- */ +/* ==header */ +/* ----------------------------- */ + +/* ----------------------------- */ +/* ==sidebar */ +/* ----------------------------- */ + +/* ----------------------------- */ +/* ==footer */ +/* ----------------------------- */ + +/* ----------------------------- */ +/* ==forms */ +/* ----------------------------- */ +form, +fieldset { + border: none; +} +input, +button, +select, +label, +.btn { + vertical-align: middle; /* @bugfix alignment */ + font-family: inherit; +} +textarea { + resize: vertical; + font-family: inherit; +} + +/* ----------------------------- */ +/* ==main */ +/* ----------------------------- */ + +/* ----------------------------- */ +/* ==iefix */ +/* ----------------------------- */ + +/* haslayout for IE6/IE7 */ +.ie67 .clearfix, +.ie67 .line, +.ie67 .mod, +.ie67 .row, +.ie67 .col { + zoom: 1; +} + +/* inline-block and table-cell for IE6/IE7 */ +/* warning: .col needs width on IE6/IE7 */ +.ie67 .btn, +.ie67 .col, +.ie67 .inbl { + display: inline; + zoom: 1; +} +.ie8 img { + width: auto; /* @bugfix for IE8 */ +} + +/* Active box-sizing for IE6/IE7 */ +/* @source https://github.com/Schepp/box-sizing-polyfill */ +/* +.ie67 * { + behavior: url(/js/boxsizing.htc); +} +*/ + +/* ----------------------------- */ +/* ==print */ +/* ----------------------------- */ + +/* quick print reset */ +@media print { + p, + blockquote { + orphans: 2; + widows: 2; + } + blockquote, + ul, + ol { + page-break-inside: avoid; + } + h1, + h2, + h3, + caption { + page-break-after: avoid; + } +} + +/* ----------------------------- */ +/* ==desktop and retina medias */ +/* ----------------------------- */ + +@media (min-width: @mediumscreen) { +/* here go rules for big resources and big screens like: background-images, font-faces, etc. */ +} +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { +/* Style adjustments for retina devices */ +} + +/* ---------------------------------- */ +/* ==Responsive large / medium / tiny */ +/* ---------------------------------- */ + +@media (min-width: @largescreen) { + + /* layouts for large (l) screens */ + .large-hidden, + .tablet-hidden { display: none !important; } + .large-visible { display: block !important; } + .large-no-float {float: none; } + .large-inbl { + display: inline-block; + float: none; + vertical-align: top; + } + .large-row { + display: table; + table-layout: fixed; + width: 100% !important; + } + .large-col { + display: table-cell; + vertical-align: top; + } + + /* widths for large (l) screens */ + .large-w25 { width: 25% !important; } + .large-w33 { width: 33.3333% !important; } + .large-w50 { width: 50% !important; } + .large-w66 { width: 66.6666% !important; } + .large-w75 { width: 75% !important; } + .large-w100 { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; + } + + /* margins for large (l) screens */ + .large-ma0, + .large-man { margin: 0 !important; } +} + +@media (max-width: @mediumscreen) { + + /* quick tablet reset */ + .w60, + .w66, + .w70, + .w75, + .w80, + .w90, + .w100, + .w600p, + .w700p, + .w800p, + .w960p, + .mw960p, + .medium-wauto { width: auto; } + + /* layouts for medium (m) screens */ + .medium-hidden, + .tablet-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 !important; + table-layout: fixed !important; + width: 100% !important; + } + .medium-col { + display: table-cell !important; + vertical-align: top !important; + } + + /* widths for medium (m) 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 { + 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 (m) screens */ + .medium-ma0, + .medium-man { margin: 0 !important; } + + /* Responsive grids */ + .grid4 > * {.grid(2);} + .grid4 > :first-child + * + * {margin-left: 0} + + .grid6 > * {.grid(3);} + .grid6 > :first-child + * + * + * {margin-left: 0} +} + +@media (max-width: @tinyscreen) { + + /* quick smartphone reset */ + .mod, + .item, + .col, + fieldset { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; + } + .w30, + .w33, + .w40, + .w50, + .w300p, + .w400p, + .w500p { + width: auto; + } + .row { + display: block !important; + width: 100% !important; + } + + /* layouts for tiny (t) screens */ + .tiny-hidden, + .phone-hidden { display: none !important; } + .tiny-visible { display: block !important; } + .tiny-no-float {float: none;} + .tiny-inbl { + display: inline-block; + float: none; + vertical-align: top; + } + .tiny-row { + display: table !important; + table-layout: fixed !important; + width: 100% !important; + } + .tiny-col { + display: table-cell !important; + vertical-align: top !important; + } + th, + td { + display: block !important; + width: auto !important; + text-align: left !important; + } + thead { display: none; } + + /* widths for tiny (t) screens */ + .tiny-w25 { width: 25% !important; } + .tiny-w33 { width: 33.3333% !important; } + .tiny-w50 { width: 50% !important; } + .tiny-w66 { width: 66.6666% !important; } + .tiny-w75 { width: 75% !important; } + .tiny-w100 { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; + } + /* margins for tiny (t) screens */ + .tiny-ma0, + .tiny-man { margin: 0 !important; } +} + +/* orientation iOS font-size fix */ +@media (orientation: landscape) and (max-device-width: @mediumscreen) { + html, + body { + -webkit-text-size-adjust: 100%; + } +} \ No newline at end of file diff --git a/knacss.scss b/knacss.scss new file mode 100644 index 0000000..0324e9d --- /dev/null +++ b/knacss.scss @@ -0,0 +1,702 @@ +/** + * www.KNACSS.com V2.5c @author: Raphael Goetter, Alsacreations + * Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/ + */ + + +/* ----------------------------- */ +/* Table of content */ +/* ----------------------------- */ +/* + * 0 - Mixins and variables + * 1 - Reset + * 2 - Layout and modules + * 3 - Header + * 4 - Sidebar + * 5 - Footer + * 6 - Forms + * 7 - Main + * 8 - IEfix + * 9 - Print + * 10 - Desktop medias + * 11 - Mobile + */ + +/* Compass imports */ +@import "compass/css3/images"; +@import "compass/css3"; + +/* ----------------------------- */ +/* ==Mixins & variables */ +/* ----------------------------- */ + +/** + * REM mixin with PX fallback + * @include rem('font-size', 1.4) outputs: + * font-size: 14px; + * font-size: 1.4rem; + */ +@mixin rem($property, $val) { + #{$property}: ($val * 10) + px; + #{$property}: $val + rem; +} + +/** + * Mixin handling media queries breakpoints + * Usage: + * @include breakpoint(small) { ... } + * Can be used INSIDE a rule + */ +@mixin breakpoint($point) { + @if $point == small { + @media (max-width: 45em) { @content; } + } + @if $point == medium { + @media (max-width: 55em) { @content; } + } + @if $point == large { + @media (min-width: 55em) { @content; } + } +} + +/** + * Mixin making easier absolute/fixed positioning + * Usage: + * @include position(0, 0, 0, 0, absolute); + * Currently unused. Only here for posterity. + */ +@mixin position($top: auto, $right: auto, $bottom: auto, $left: auto, $position: absolute) { + top: $top; + right: $right; + bottom: $bottom; + left: $left; + position: $position; +} + +/** + * Function to parse int a value + * parseInt(15px) returns 15 + * Value must be unquoted + */ +@function parseInt($number) { + @return $number / ($number * 0 + 1); +} + +/** + * Mixin handling width-helpers classes + * Usage: + * @include w(100px) -> .w100p { width: 100px; } + * @include w(60%) -> .w60 { width: 60%; } + * Also handles media-queries + * If value >= 60% or 600px, becomes "auto" on tablets + * If value >= 30% or 300px, becomes "auto" on mobiles + * Change variables below to suit your needs + */ + +$valuePercentTablet: 60; +$valuePercentMobile: 30; +$valuePixelTablet: 600; +$valuePixelMobile: 300; + +@mixin w($val, $modifier: '') { + $int: parseInt($val); + $unit: unit($val); + $className: floor($int); + @if $unit == '%' { + #{'.w#{$className}'} { + #{$modifier}width: $val; + + @if $int >= $valuePercentTablet { + @include breakpoint(medium) { + width: auto; + } + } + + @if $int >= $valuePercentMobile { + @include breakpoint(small) { + width: auto; + } + } + } + } @else if $unit == 'px' { + #{'.w#{$className}p'} { + #{$modifier}width: $val; + + @if $int >= $valuePixelTablet { + @include breakpoint(medium) { + width: auto; + } + } + + @if $int >= $valuePixelMobile { + @include breakpoint(small) { + width: auto; + } + } + } + } +} + + +/* ----------------------------- */ +/* ==Reset */ +/* ----------------------------- */ + +/** + * Base font-size + * corresponds to 10px + * adapted to rem unit + */ +html { + font-size: 62.5%; + /* Orientation iOS font-size fix */ + @media (orientation: landscape) and (max-device-width: 768px) { + -webkit-text-size-adjust: 100%; + } +} + +body { + background: white; + color: black; + font-family: "Century Gothic", helvetica, arial, sans-serif; + @include rem('font-size', 1.4); /* equiv 14px */ + line-height: 1.5; /* adapt to your design */ +} + +/** + * Font-sizing for content + * Preserve vertical rythm + * Thanks to http://soqr.fr/vertical-rhythm/ + */ +p, ul, ol, dl, +blockquote, pre, +td, th, +label, textarea, +caption, details, figure, +hgroup { + @include rem('font-size', 1.4); /* equiv 14px */ + line-height: 1.5; + margin: .75em 0 0; +} + +/** + * Titles from h1 (.h1-like) to h6 (.h6-like) + * h1: 26px; + * h2: 24px; + * h3: 22px; + * h4: 20px; + * h5: 18px; + * h6: 16px; + */ +$j: 2.6; $k: 2.25; +@for $i from 1 through 6 { + #{'h#{$i}'}, #{'.h#{$i}-like'} { + @include rem('font-size', $j); + @include rem('line-height', $k); + font-weight: normal; + } + $j: $j - 0.2; $k: $k + 0.2; + @if $i == 3 { $k: 1.45; } +} + +/** + * Alternate font-sizing + * .smaller: 10px; + * .small : 12px; + * .medium : 14px; + * .big : 16px; + * .bigger : 18px; + * .biggest: 20px; + */ +$l: 1; +$sizes: smaller, small, medium, big, bigger, biggest; +@each $size in $sizes { + #{'.#{$size}'} { + @include rem('font-size', $l); + } + $l: $l + 0.2; +} + +/* Soft reset */ +html, body, +textarea, label +figure { + margin: 0; + padding: 0; +} +ul, ol { + padding-left: 2em; +} +code, pre, samp { + white-space: pre-wrap; + font-family: consolas, 'DejaVu Sans Mono', courier, monospace; +} +code { line-height: 1em; } +table { margin-bottom: 1.5em; } + +/* Avoid top margins on first content element */ +p, ul, ol, dl, +blockquote, pre, +h1,h2, h3, h4, h5, h6 { + &:first-child { + margin-top: 0; + } +} + +/* Avoid margins on nested elements */ +li { + p, ul, ol { + margin-top: 0; + margin-bottom: 0; + } +} + +/* Max width */ +img, table, td, blockquote, code, pre, textarea, input, video { + max-width: 100%; +} + +/* You shall not pass */ +div, textarea, table, td, th, code, pre, samp { + word-wrap: break-word; + @include hyphens(auto); +} + +/* Pictures */ +img { + width: auto; + height: auto; + vertical-align: middle; +} +a img { border: 0; } + +/* Scripts */ +body > script { display: none !important; } + +/* Skip-links */ +.skip-links { + position: absolute; + + a { + position: absolute; + left: -9999px; + padding: 0.5em; + background: black; + color: white; + text-decoration: none; + + &:focus { + position: static; + } + } +} + +/* ----------------------------- */ +/* ==layout and modules */ +/* ----------------------------- */ + +/** + * Switching box-model for all elements + * Content-box: width = width + padding + border + * Padding-box: width = width + padding + * Border-box : width = width (FUCK YEAH!) + */ +* { + @include box-sizing(border-box); +} + +/** + * 1. Include this rule to trigger hasLayout and contain floats. + * 2. The space content is one way to avoid an Opera bug when the + * contenteditable attribute is included anywhere else in the document. + * Otherwise it causes space to appear at the top and bottom of elements + * that are clearfixed. + * 3. The use of `table` rather than `block` is only necessary if using + * `:before` to contain the top-margins of child elements. + */ +.clearfix { + *zoom: 1; /* 1 */ + + &:after, &:before { + content : ' '; /* 2 */ + display: table; /* 3 */ + } + + &:after { + clear: both; + } +} + +/* Clearfix blocks that must contain floats */ +.line, .mod { + @extend .clearfix; +} + +/* Clear blocks that needs to be placed under floats */ +.clear, .line, .row { + clear: both; +} + +/** + * Float layout + * ------------ + * Tutorial : http://knacss.com/demos/tutoriel.html + */ + +/* Module, contains floats (.item is the same) */ +.mod, .item { + overflow: hidden; +} + +/** + * Table layout + * ------------ + */ +.row { + display: table; + table-layout: fixed; + width: 100%; + + @include breakpoint(small) { + display: block !important; + width: 100% !important; + } +} +.row > *, +.col { + display: table-cell; + vertical-align: top; +} + +/** + * Alignments (blocks and inline) + * ------------------------------ + */ + +/* Left elements */ + .left { float: left; } +img.left { margin-right: 1em; } + +/* Right elements */ + .right { float: right; } +img.right { margin-left: 1em; } + +img.left, +img.right { margin-bottom: 5px; } + +.center { margin-left: auto; margin-right: auto; } +.txtleft { text-align: left; } +.txtright { text-align: right; } +.txtcenter { text-align: center; } + +/* Simply inline-block */ +.inbl { + @include inline-block(top); /* All browsers back to IE6 */ + margin-right: -.25em; +} + +/** + * Grids + * ----- + */ + +/* Equal grids with 2% gutter */ +[class*=grid] > * {float: left; } /* direct childrens are floating */ +[class*=grid] > * + * { margin-left: 2%; } /* here's the gutter */ +.grid2 > * { width: 49%; } +.grid3 > * { width: 32%; } +.grid4 > * { width: 23.5%; } +.grid5 > * { width: 18.4%; } +.grid6 > * { width: 15%; } + +/* Unequal grids (1-2, 2-1, 1-3 and 3-1) */ +.grid2-1 > *:first-child, +.grid1-2 > * + * { width: 66%; } +.grid1-2 > *:first-child, +.grid2-1 > * + * { width: 32%; } +.grid1-3 > *:first-child, +.grid3-1 > * + * { width: 23.5%; } +.grid3-1 > *:first-child, +.grid1-3 > * + * { width: 74.5%; } + +/** + * Blocks widths (percentage and pixels) + * + media queries automagically handled + */ + +/** + * .w10 to .w100 (step 10) and + * .w100 to .w1000 (step 100) + */ +@for $i from 1 through 10 { + @include w($i*10%); + @include w($i*100px); +} + +/** + * Additional not-round numbers + * Add more to the list to suit your needs + */ +$runClasses: 25%, 33.33%, 50%, 66.66%, 75%, 50px, 150px, 960px; +@each $class in $runClasses { + @include w($class); +} + +/** + * You can even prefix width with + * 'max-' or 'min-' to handle min/max-width + */ +@include w(960px, 'max-'); + +/** + * Spacing helpers + * p = padding + * m = margin + * a = all + * t = top + * r = right + * b = bottom + * l = left + * s = small (10px) + * m = medium (20px) + * l = large (30px) + * n = none (0) + * Source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css + */ +.m-reset, .ma0 { margin: 0; } +.p-reset, .pa0 { padding: 0; } +.ma1, .mas { margin: 10px; } +.ma2, .mam { margin: 20px; } +.ma3, .mal { margin: 30px; } +.pa1, .pas { padding: 10px; } +.pa2, .pam { padding: 20px; } +.pa3, .pal { padding: 30px; } + +.mt0, .mtn { margin-top: 0; } +.mt1, .mts { margin-top: 10px; } +.mt2, .mtm { margin-top: 20px; } +.mt3, .mtl { margin-top: 30px; } +.mr0, .mrn { margin-right: 0; } +.mr1, .mrs { margin-right: 10px; } +.mr2, .mrm { margin-right: 20px; } +.mr3, .mrl { margin-right: 30px; } +.mb0, .mbn { margin-bottom: 0; } +.mb1, .mbs { margin-bottom: 10px; } +.mb2, .mbm { margin-bottom: 20px; } +.mb3, .mbl { margin-bottom: 30px; } +.ml0, .mln { margin-left: 0; } +.ml1, .mls { margin-left: 10px; } +.ml2, .mlm { margin-left: 20px; } +.ml3, .mll { margin-left: 30px; } + +.pt0, .ptn { padding-top: 0; } +.pt1, .pts { padding-top: 10px; } +.pt2, .ptm { padding-top: 20px; } +.pt3, .ptl { padding-top: 30px; } +.pr0, .prn { padding-right: 0; } +.pr1, .prs { padding-right: 10px; } +.pr2, .prm { padding-right: 20px; } +.pr3, .prl { padding-right: 30px; } +.pb0, .pbn { padding-bottom: 0; } +.pb1, .pbs { padding-bottom: 10px; } +.pb2, .pbm { padding-bottom: 20px; } +.pb3, .pbl { padding-bottom: 30px; } +.pl0, .pln { padding-left: 0; } +.pl1, .pls { padding-left: 10px; } +.pl2, .plm { padding-left: 20px; } +.pl3, .pll { padding-left: 30px; } + +/* Hidden yet accessible content */ +.visually-hidden { + position: absolute !important; + overflow: hidden; + clip: rect(0 0 0 0); + height : 1px !important; + width : 1px !important; + margin : -1px !important; + padding: 0 !important; + border: none; +} + +.desktop-hidden { /* Hidden on desktop */ + @include breakpoint(large) { + display: none; + } +} +.mobile-hidden { /* Hidden on mobile */ + @include breakpoint(small) { + display: none; + } +} +.tablet-hidden { /* Hidden on tablets */ + @include breakpoint(medium) { + display: none; + } +} + +/* ----------------------------- */ +/* ==Header */ +/* ----------------------------- */ + +/* ----------------------------- */ +/* ==Sidebar */ +/* ----------------------------- */ + +/* ----------------------------- */ +/* ==Footer */ +/* ----------------------------- */ + +/* ----------------------------- */ +/* ==Forms */ +/* ----------------------------- */ +form, +fieldset { + border: none; +} +input, +button, +select, +label, +.btn { + vertical-align: middle; /* @bugfix alignment */ +} +textarea { + resize: vertical; + font-family: inherit; +} + +/* ----------------------------- */ +/* ==Main */ +/* ----------------------------- */ + +/* ----------------------------- */ +/* ==IEfix */ +/* ----------------------------- */ + + +.ie67 { + /* haslayout for IE6/IE7 */ + .clearfix, .line, .mod, .row, .col { + zoom: 1; + } + + /** + * inline-block and table-cell for IE6/IE7 + * warning: .col needs width on IE6/IE7 + */ + .btn, .col { + display: inline; + zoom: 1; + } + + /** + * Add a slash at the end of this comment + * to enable box-sizing for IE6/IE7 + * @source https://github.com/Schepp/box-sizing-polyfill + * + + * { + behavior: url(/js/boxsizing.htc); + } + + /**/ +} + +.ie8 img { + width: auto; /* @bugfix for IE8 */ +} + + +/* ----------------------------- */ +/* ==Print */ +/* ----------------------------- */ + +/* Quick print reset */ +@media print { + p, blockquote { + orphans: 2; + widows: 2; + } + blockquote, ul, ol { + page-break-inside: avoid; + } + h1, h2, h3, caption { + page-break-after: avoid; + } +} + +/* ----------------------------- */ +/* ==Desktop medias */ +/* ----------------------------- */ + +@include breakpoint(large) { + /** + * Here go rules for big resources and big screens + * e.g. background-images, font-faces, etc. + */ +} + +/* ----------------------------- */ +/* ==Mobile */ +/* ----------------------------- */ + +/* quick tablet reset */ +@include breakpoint(medium) { + /* responsive widths for medium (m) screens, like tablets */ + .m25 { width: 25%; } + .m33 { width: 33.3333%; } + .m50 { width: 50%; } + .m66 { width: 66.6666%; } + .m75 { width: 75%; } + .m100 { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; + } +} + +/* quick smartphone reset */ +@include breakpoint(small) { + .mod, + .item, + .col, + fieldset { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; + } + /* responsive widths for tiny (t) screens, like smartphones */ + .t25 { width: 25%; } + .t33 { width: 33.3333%; } + .t50 { width: 50%; } + .t66 { width: 66.6666%; } + .t75 { width: 75%; } + .t100 { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; + } + th, + td { + display: block !important; + width: auto !important; + text-align: left !important; + } + thead { display: none; } +} + +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { +/* Style adjustments for retina devices */ +} \ No newline at end of file diff --git a/print.css b/print.css new file mode 100644 index 0000000..f9c6775 --- /dev/null +++ b/print.css @@ -0,0 +1,53 @@ +/* quick print reset */ +@media print { + body { + width: auto !important; + margin: auto !important; + font-family: serif; + font-size: 12pt; + background-color: #fff !important; + color: #333 !important; + } + p, + h1, + h2, + h3, + h4, + h5, + h6, + blockquote, + ul, + ol { + color: #000 !important; + margin: auto !important; + } + .print { + display: block; /* displaying .print elements */ + } + 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 */ + } +} \ No newline at end of file diff --git a/rwd.css b/rwd.css new file mode 100644 index 0000000..d6179cd --- /dev/null +++ b/rwd.css @@ -0,0 +1,197 @@ + +/* ----------------------------- */ +/* ==desktop and retina medias */ +/* ----------------------------- */ + +@media (min-width: 641px) { +/* here go rules for big resources and big screens like: background-images, font-faces, etc. */ +} +@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { +/* Style adjustments for retina devices */ +} + +/* ---------------------------------- */ +/* ==Responsive large / medium / tiny */ +/* ---------------------------------- */ + +@media (min-width: 1280px) { + + /* layouts for large (l) screens */ + .large-hidden, + .tablet-hidden { display: none !important; } + .large-visible { display: block !important; } + .large-no-float {float: none; } + .large-inbl { + display: inline-block; + float: none; + vertical-align: top; + } + .large-row { + display: table; + table-layout: fixed; + width: 100% !important; + } + .large-col { + display: table-cell; + vertical-align: top; + } + + /* widths for large (l) screens */ + .large-w25 { width: 25% !important; } + .large-w33 { width: 33.3333% !important; } + .large-w50 { width: 50% !important; } + .large-w66 { width: 66.6666% !important; } + .large-w75 { width: 75% !important; } + .large-w100 { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; + } + + /* margins for large (l) screens */ + .large-ma0, + .large-man { margin: 0 !important; } +} + +@media (max-width: 768px) { + + /* quick tablet reset */ + .w60, + .w66, + .w70, + .w75, + .w80, + .w90, + .w100, + .w600p, + .w700p, + .w800p, + .w960p, + .mw960p, + .medium-wauto { width: auto; } + + /* layouts for medium (m) screens */ + .medium-hidden, + .tablet-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 !important; + table-layout: fixed !important; + width: 100% !important; + } + .medium-col { + display: table-cell !important; + vertical-align: top !important; + } + + /* widths for medium (m) 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 { + 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 (m) screens */ + .medium-ma0, + .medium-man { margin: 0 !important; } + + /* Responsive grids */ + .grid4 > * {width: 49% !important; } + .grid4 > :first-child + * + * {margin-left: 0 !important;} + .grid6 > * {width: 32% !important; } + .grid6 > :first-child + * + * + * {margin-left: 0 !important;} +} + +@media (max-width: 640px) { + + /* quick smartphone reset */ + .mod, + .item, + .col, + fieldset { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; + } + .w30, + .w33, + .w40, + .w50, + .w300p, + .w400p, + .w500p { + width: auto; + } + .row { + display: block !important; + width: 100% !important; + } + + /* layouts for tiny (t) screens */ + .tiny-hidden, + .phone-hidden { display: none !important; } + .tiny-visible { display: block !important; } + .tiny-no-float {float: none;} + .tiny-inbl { + display: inline-block; + float: none; + vertical-align: top; + } + .tiny-row { + display: table !important; + table-layout: fixed !important; + width: 100% !important; + } + .tiny-col { + display: table-cell !important; + vertical-align: top !important; + } + th, + td { + display: block !important; + width: auto !important; + text-align: left !important; + } + thead { display: none; } + + /* widths for tiny (t) screens */ + .tiny-w25 { width: 25% !important; } + .tiny-w33 { width: 33.3333% !important; } + .tiny-w50 { width: 50% !important; } + .tiny-w66 { width: 66.6666% !important; } + .tiny-w75 { width: 75% !important; } + .tiny-w100 { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; + } + /* margins for tiny (t) screens */ + .tiny-ma0, + .tiny-man { margin: 0 !important; } +} \ No newline at end of file diff --git a/tables.css b/tables.css new file mode 100644 index 0000000..dc81855 --- /dev/null +++ b/tables.css @@ -0,0 +1,74 @@ + +/* ----------------------------- */ +/* ==tables */ +/* ----------------------------- */ + +table, +.table { + max-width : 100%; + table-layout: fixed; + border-collapse: collapse; + vertical-align: top; +} +table { + width: 100%; +} +.table { + display: table; +} +caption { + padding: 10px; + color: #555; + font-style: italic; +} +table { + border: 1px solid #ccc; +} +tr > * + * { + border-left: 1px solid #ccc; +} +th, +td { + padding: .3em .8em; + text-align: left; + border-bottom: 1px solid #ccc; +} +td { + color: #333; +} + +/* alternate tables */ +.alternate { border: 0; } +.alternate tbody { + border: 1px solid #ccc; +} +.alternate thead tr > * + * { + border-left: 0; +} +.alternate tbody tr > * + * { + border-left: 1px solid #ccc; +} + +/* alternate-vert tables */ +.alternate-vert { + border: 0; + border-right: 1px solid #ccc; +} +.alternate-vert tr > :first-child { + border-bottom: 0; +} +.alternate-vert tr > * + * { + border-top: 1px solid #ccc; +} + +/* striped tables */ +.striped tbody tr:nth-child(odd) { + background: #eee; + background: rgba(0, 0, 0, .05); +} + +/* striped-vert tables */ +.striped-vert tr > :first-child { + background: #eee; + background: rgba(0, 0, 0, .05); +} \ No newline at end of file