From e2085a039428051ec776c8c254f947459bc85413 Mon Sep 17 00:00:00 2001 From: Hugo Giraudel Date: Tue, 2 Apr 2013 12:36:18 +0200 Subject: [PATCH] Improved KNACSS Sass version --- forms.css => css/forms.css | 0 grids.css => css/grids.css | 0 icons.css => css/icons.css | 0 knacss.css => css/knacss.css | 0 print.css => css/print.css | 0 rwd.css => css/rwd.css | 0 tables.css => css/tables.css | 0 knacss.scss | 702 -------------------------------- knacss.less => less/knacss.less | 0 sass/_desktop-media.scss | 10 + sass/_footer.scss | 3 + sass/_forms.scss | 20 + sass/_header.scss | 3 + sass/_helpers.scss | 143 +++++++ sass/_iefix.scss | 35 ++ sass/_layout.scss | 255 ++++++++++++ sass/_main.scss | 3 + sass/_mobile.scss | 67 +++ sass/_print.scss | 17 + sass/_reset.scss | 168 ++++++++ sass/_sidebar.scss | 3 + sass/knacss.scss | 25 ++ 22 files changed, 752 insertions(+), 702 deletions(-) rename forms.css => css/forms.css (100%) rename grids.css => css/grids.css (100%) rename icons.css => css/icons.css (100%) rename knacss.css => css/knacss.css (100%) rename print.css => css/print.css (100%) rename rwd.css => css/rwd.css (100%) rename tables.css => css/tables.css (100%) delete mode 100644 knacss.scss rename knacss.less => less/knacss.less (100%) create mode 100644 sass/_desktop-media.scss create mode 100644 sass/_footer.scss create mode 100644 sass/_forms.scss create mode 100644 sass/_header.scss create mode 100644 sass/_helpers.scss create mode 100644 sass/_iefix.scss create mode 100644 sass/_layout.scss create mode 100644 sass/_main.scss create mode 100644 sass/_mobile.scss create mode 100644 sass/_print.scss create mode 100644 sass/_reset.scss create mode 100644 sass/_sidebar.scss create mode 100644 sass/knacss.scss diff --git a/forms.css b/css/forms.css similarity index 100% rename from forms.css rename to css/forms.css diff --git a/grids.css b/css/grids.css similarity index 100% rename from grids.css rename to css/grids.css diff --git a/icons.css b/css/icons.css similarity index 100% rename from icons.css rename to css/icons.css diff --git a/knacss.css b/css/knacss.css similarity index 100% rename from knacss.css rename to css/knacss.css diff --git a/print.css b/css/print.css similarity index 100% rename from print.css rename to css/print.css diff --git a/rwd.css b/css/rwd.css similarity index 100% rename from rwd.css rename to css/rwd.css diff --git a/tables.css b/css/tables.css similarity index 100% rename from tables.css rename to css/tables.css diff --git a/knacss.scss b/knacss.scss deleted file mode 100644 index 0324e9d..0000000 --- a/knacss.scss +++ /dev/null @@ -1,702 +0,0 @@ -/** - * 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/knacss.less b/less/knacss.less similarity index 100% rename from knacss.less rename to less/knacss.less diff --git a/sass/_desktop-media.scss b/sass/_desktop-media.scss new file mode 100644 index 0000000..5ba461a --- /dev/null +++ b/sass/_desktop-media.scss @@ -0,0 +1,10 @@ +/* ----------------------------- */ +/* ==Desktop medias */ +/* ----------------------------- */ + +@include breakpoint(large) { + /** + * Here go rules for big resources and big screens + * e.g. background-images, font-faces, etc. + */ +} \ No newline at end of file diff --git a/sass/_footer.scss b/sass/_footer.scss new file mode 100644 index 0000000..5dced67 --- /dev/null +++ b/sass/_footer.scss @@ -0,0 +1,3 @@ +/* ----------------------------- */ +/* ==Footer */ +/* ----------------------------- */ \ No newline at end of file diff --git a/sass/_forms.scss b/sass/_forms.scss new file mode 100644 index 0000000..3a3c087 --- /dev/null +++ b/sass/_forms.scss @@ -0,0 +1,20 @@ +/* ----------------------------- */ +/* ==Forms */ +/* ----------------------------- */ +form, +fieldset { + border: none; +} + +input, +button, +select, +label, +.btn { + vertical-align: middle; /* @bugfix alignment */ +} + +textarea { + resize: vertical; + font-family: inherit; +} \ No newline at end of file diff --git a/sass/_header.scss b/sass/_header.scss new file mode 100644 index 0000000..563581a --- /dev/null +++ b/sass/_header.scss @@ -0,0 +1,3 @@ +/* ----------------------------- */ +/* ==Header */ +/* ----------------------------- */ \ No newline at end of file diff --git a/sass/_helpers.scss b/sass/_helpers.scss new file mode 100644 index 0000000..b0283f4 --- /dev/null +++ b/sass/_helpers.scss @@ -0,0 +1,143 @@ +/* ----------------------------- */ +/* ==Helpers */ +/* ----------------------------- */ + +/* ********* *\ + * Variables * +\* ********* */ +/* Define your variables here */ + + + +/* ****** *\ + * Mixins * +\* ****** */ + +/** + * REM mixin with PX fallback + * @include rem('font-size', 14px) outputs: + * font-size: 14px; + * font-size: 1.4rem; + * + * The mixin relies on a baseline of 10px + */ +@mixin rem($property, $values) { + $px : (); + $rem: (); + + @each $value in $values { + + @if $value == 0 or $value == auto { + $px : append($px , $value); + $rem: append($rem, $value); + } + + @else { + + $unit: unit($value); + $val: $value / ($value * 0 + 1); + + @if $unit == "px" { + $px : append($px, $value); + $rem: append($rem, ($val / 10 + rem)); + } + + @if $unit == "rem" { + $px : append($px, ($val * 10 + px)); + $rem: append($rem, $value); + } + } + } + + #{$property}: $px; + #{$property}: $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; +} + + +/* ******* *\ + * Helpers * +\* ******* */ + +/** + * 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; + } +} + +/* 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; + } +} diff --git a/sass/_iefix.scss b/sass/_iefix.scss new file mode 100644 index 0000000..4ac027f --- /dev/null +++ b/sass/_iefix.scss @@ -0,0 +1,35 @@ +/* ----------------------------- */ +/* ==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 */ +} \ No newline at end of file diff --git a/sass/_layout.scss b/sass/_layout.scss new file mode 100644 index 0000000..8f50569 --- /dev/null +++ b/sass/_layout.scss @@ -0,0 +1,255 @@ +/* ----------------------------- */ +/* ==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!) + * 1. Enables box-sizing on pseudo-elements as well + */ +*, +*:before, +*:after { /* 1 */ + @include box-sizing(border-box); +} + +/* 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) + */ +.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 = 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; } + + +/** + * 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; +} \ No newline at end of file diff --git a/sass/_main.scss b/sass/_main.scss new file mode 100644 index 0000000..0b99cc4 --- /dev/null +++ b/sass/_main.scss @@ -0,0 +1,3 @@ +/* ----------------------------- */ +/* ==Main */ +/* ----------------------------- */ \ No newline at end of file diff --git a/sass/_mobile.scss b/sass/_mobile.scss new file mode 100644 index 0000000..624b472 --- /dev/null +++ b/sass/_mobile.scss @@ -0,0 +1,67 @@ +/* ----------------------------- */ +/* ==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/sass/_print.scss b/sass/_print.scss new file mode 100644 index 0000000..268c6af --- /dev/null +++ b/sass/_print.scss @@ -0,0 +1,17 @@ +/* ----------------------------- */ +/* ==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; + } +} diff --git a/sass/_reset.scss b/sass/_reset.scss new file mode 100644 index 0000000..84a9dd5 --- /dev/null +++ b/sass/_reset.scss @@ -0,0 +1,168 @@ +/* ----------------------------- */ +/* ==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', 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', 14px); + line-height: 1.5; + margin: .75em 0 0; +} + +/** + * Titles from h1 (.h1-like) to h6 (.h6-like) + */ + +headings() { font-weight: normal; } + +h1, .h1-like { + @include rem('font-size', 26px); + @include rem('line-height', 22.5px); +} + +h2, .h2-like { + @include rem('font-size', 24px); + @include rem('line-height', 24.5px); +} + +h3, .h3-like { + @include rem('font-size', 22px); + @include rem('line-height', 26.5px); +} + +h4, .h4-like { + @include rem('font-size', 20px); + @include rem('line-height', 14.5px); +} + +h5, .h5-like { + @include rem('font-size', 18px); + @include rem('line-height', 16.5px); +} + +h6, .h6-like { + @include rem('font-size', 16px); + @include rem('line-height', 18.5px); +} + + +/** + * Alternate font-sizing + * .smaller: 10px; + * .small : 12px; + * .medium : 14px; + * .big : 16px; + * .bigger : 18px; + * .biggest: 20px; + */ +.smaller { @include rem('font-size', 10px); } +.small { @include rem('font-size', 12px); } +.medium { @include rem('font-size', 14px); } +.big { @include rem('font-size', 16px); } +.bigger { @include rem('font-size', 18px); } +.biggest { @include rem('font-size', 20px); } + + +/* 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; + } + } +} \ No newline at end of file diff --git a/sass/_sidebar.scss b/sass/_sidebar.scss new file mode 100644 index 0000000..e6efc0c --- /dev/null +++ b/sass/_sidebar.scss @@ -0,0 +1,3 @@ +/* ----------------------------- */ +/* ==Sidebar */ +/* ----------------------------- */ \ No newline at end of file diff --git a/sass/knacss.scss b/sass/knacss.scss new file mode 100644 index 0000000..919ca13 --- /dev/null +++ b/sass/knacss.scss @@ -0,0 +1,25 @@ +/** + * www.KNACSS.com V2.5c @author: Raphael Goetter, Alsacreations + * Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/ + */ + +/* Compass imports */ +@import "compass/css3/images"; +@import "compass/css3"; + +/* ----------------------------- */ +/* Table of content */ +/* ----------------------------- */ + +@import "helpers"; +@import "reset"; +@import "layout"; +@import "header"; +@import "sidebar"; +@import "footer"; +@import "forms"; +@import "main"; +@import "iefix"; +@import "print"; +@import "dekstop-media"; +@import "mobile"; \ No newline at end of file