commit 0468166a34891f7b253e7bfeba862c990233d0e0 Author: raphaelgoetter Date: Sun Mar 31 10:19:51 2013 +0200 first commit 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