diff --git a/sass/00-config.scss b/sass/00-config.scss index c25e5a6..716608f 100644 --- a/sass/00-config.scss +++ b/sass/00-config.scss @@ -54,9 +54,7 @@ $ultra-large-screen : 1600px; // ultra large screens media query $gutter : 20px; // gutter value (%, px, em, rem) for grid layouts -// Sass mixins - -// Rem with px fallback +// [Mixin] Rem with px fallback @mixin rem($size) { @if unitless($size) { font-size: ($size * 1rem) / 1rem * $base-font-size; @@ -67,7 +65,7 @@ $gutter : 20px; // gutter value (%, px, em, rem) for grid layouts } } -// Em from px +// [Mixin] Em from px @mixin em($size) { @if unitless($size) { $bf: $base-font-size / 1px; diff --git a/sass/01-base.scss b/sass/01-base.scss index bd0d149..1960e18 100644 --- a/sass/01-base.scss +++ b/sass/01-base.scss @@ -1,7 +1,7 @@ @import "00-config"; /* ----------------------------- */ -/* == soft reset */ +/* ==soft reset */ /* ----------------------------- */ /** diff --git a/sass/02-grids.scss b/sass/02-grids.scss index 387f539..834e5d7 100644 --- a/sass/02-grids.scss +++ b/sass/02-grids.scss @@ -2,7 +2,6 @@ /* ---------------------------------- */ /* ==classic grids */ -/* .. use it when gutter size matters */ /* ---------------------------------- */ /** @@ -17,28 +16,42 @@ overflow: hidden; } -.grid > * { /* global styles for direct child ex. .grid3 */ +/** + * Global styles for direct child + * e.g. `.grid3` + * 1. Gutter value + */ +.grid > * { display: block; padding: 0; - margin-left: -$gutter; /* gutter value */ + margin-left: -$gutter; text-align: left; } -.grid > * > * { /* global styles for each "cell" */ +/** + * Global styles for each "cell" + * 1. Gutter value + */ +.grid > * > * { display: inline-block; - padding-left: $gutter; /* gutter value */ + padding-left: $gutter; margin-left: 0; vertical-align: top; } -/* whitespace fixing for modern browsers including IE9+ */ +/** + * Whitespace fixing for modern browsers including IE9+ + */ :root .grid { font-size: 0; } +/** + * 1. Rem fallback for Opera Mini + */ :root .grid > * > * { - font-size: $base-font-size; /* fallback for Opera Mini */ - font-size: ($base-font-size / 10px) + rem; + font-size: $base-font-size; + font-size: ($base-font-size / 10px) * 1rem; } /* Opera hack */ @@ -47,32 +60,73 @@ word-spacing: -0.43em; } -.grid2 > * {width: 50%;} -.grid3 > * {width: 33.333%;} -.grid4 > * {width: 25%;} -.grid5 > * {width: 20%;} -.grid6 > * {width: 16.667%;} -.grid8 > * {width: 12.5%;} -.grid10 > * {width: 10%;} -.grid12 > * {width: 8.333%;} +.grid2 > * { + width: 50%; +} -/* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */ +.grid3 > * { + width: 33.333%; +} + +.grid4 > * { + width: 25%; +} + +.grid5 > * { + width: 20%; +} + +.grid6 > * { + width: 16.667%; +} + +.grid8 > * { + width: 12.5%; +} + +.grid10 > * { + width: 10%; +} + +.grid12 > * { + width: 8.333%; +} + +/** + * Unequal grids + * (1-2, 2-1, 1-3 and 3-1) for 2 blocks + */ .grid2-1 > *:first-child, -.grid1-2 > * + * { width: 66.666%; } -.grid1-2 > *:first-child, -.grid2-1 > * + * { width: 33.333%; } -.grid1-3 > *:first-child, -.grid3-1 > * + * { width: 25%; } -.grid3-1 > *:first-child, -.grid1-3 > * + * { width: 75%; } +.grid1-2 > * + * { + width: 66.666%; +} -/* Responsiv-o-matic */ +.grid1-2 > *:first-child, +.grid2-1 > * + * { + width: 33.333%; +} + +.grid1-3 > *:first-child, +.grid3-1 > * + * { + width: 25%; +} + +.grid3-1 > *:first-child, +.grid1-3 > * + * { + width: 75%; +} + +/** + * Responsive-o-matic + */ @media (max-width: $large-screen) { .grid5 > *, .grid6 > *, .grid8 > *, .grid10 > *, - .grid12 > * {width: 33.333%} + .grid12 > * { + width: 33.333%; + } } @media (max-width: $small-screen) { @@ -82,11 +136,15 @@ .grid6 > *, .grid8 > *, .grid10 > *, - .grid12 > * {width: 50%} + .grid12 > * { + width: 50%; + } } @media (max-width: $tiny-screen) { - .grid > * > * {width: 100% !important} + .grid > * > * { + width: 100% !important, + } } /* ---------------------------------- */ @@ -94,10 +152,9 @@ /* .. to automatically justify blocs */ /* ---------------------------------- */ -/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */ - /** * Container of autogrids + * Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */ [class*="autogrid"] { text-align: justify; diff --git a/sass/04-forms.scss b/sass/04-forms.scss index c5ee141..35252fb 100644 --- a/sass/04-forms.scss +++ b/sass/04-forms.scss @@ -4,10 +4,10 @@ /* ==forms */ /* ----------------------------- */ -/* thanks to HTML5boilerplate, -* github.com/nathansmith/formalize -* and www.sitepen.com -*/ +/** + * Thanks to HTML5boilerplate, + * Source: github.com/nathansmith/formalize and www.sitepen.com + */ /** * Buttons @@ -53,12 +53,15 @@ textarea { resize: vertical; } +/** + * 1. Clickable input types in iOS + */ button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; - -webkit-appearance: button; /* clickable input types in iOS */ + -webkit-appearance: button; } input[type="search"] { @@ -94,9 +97,9 @@ textarea:-moz-placeholder { * 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 { +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/sass/10-gmaps.scss b/sass/10-gmaps.scss index 67e2736..e11836f 100644 --- a/sass/10-gmaps.scss +++ b/sass/10-gmaps.scss @@ -1,4 +1,5 @@ @import "00-config"; + /* ----------------------------- */ /* ==gmaps support */ /* ----------------------------- */