From 1d7cfeb8638dfc8c25c04e9858aea0af9a845bf6 Mon Sep 17 00:00:00 2001 From: Charlie Owen Date: Mon, 17 Nov 2014 23:04:17 +0000 Subject: [PATCH] Convert comments from CSS to Sass-style comments --- csswizardry-grids.scss | 527 ++++++++++++++++++----------------------- 1 file changed, 227 insertions(+), 300 deletions(-) diff --git a/csswizardry-grids.scss b/csswizardry-grids.scss index 12be407..6529db7 100644 --- a/csswizardry-grids.scss +++ b/csswizardry-grids.scss @@ -1,125 +1,118 @@ -/*------------------------------------*\ - $CSSWIZARDRY-GRIDS -\*------------------------------------*/ -/** - * CONTENTS - * INTRODUCTION.........How the grid system works. - * VARIABLES............Your settings. - * MIXINS...............Library mixins. - * GRID SETUP...........Build the grid structure. - * WIDTHS...............Build our responsive widths around our breakpoints. - * PUSH.................Push classes. - * PULL.................Pull classes. - */ - - - - - -/*------------------------------------*\ - $INTRODUCTION -\*------------------------------------*/ -/** - * csswizardry grids provides you with widths to suit a number of breakpoints - * designed around devices of a size you specify. Out of the box, csswizardry - * grids caters to the following types of device: - * - * palm -- palm-based devices, like phones and small tablets - * lap -- lap-based devices, like iPads or laptops - * portable -- all of the above - * desk -- stationary devices, like desktop computers - * regular -- any/all types of device - * - * These namespaces are then used in the library to give you the ability to - * manipulate your layouts based around them, for example: - * -
- * - * This would give you a grid item which is 100% width unless it is on a lap - * device, at which point it become 50% wide, or it is on a desktop device, at - * which point it becomes 33.333% width. - * - * csswizardry grids also has push and pull classes which allow you to nudge - * grid items left and right by a defined amount. These follow the same naming - * convention as above, but are prepended by either `push--` or `pull--`, for - * example: - * - `class="grid__item one-half push--one-half"` - * - * This would give you a grid item which is 50% width and pushed over to the - * right by 50%. - * - * All classes in csswizardry grids follow this patten, so you should fairly - * quickly be able to piece together any combinations you can imagine, for - * example: - * - `class="grid__item one-whole lap--one-half desk--one-third push--desk--one-third"` - * - `class="grid__item one-quarter palm--one-half push--palm--one-half"` - * - `class="grid__item palm--one-third desk--five-twelfths"` - */ - - - - - -/*------------------------------------*\ - $VARIABLES -\*------------------------------------*/ -/** - * If you are building a non-responsive site but would still like to use - * csswizardry-grids, set this to ‘false’: - */ +// ------------------------------------ +// $CSSWIZARDRY-GRIDS +// ------------------------------------ +// +// * CONTENTS +// * INTRODUCTION.........How the grid system works. +// * VARIABLES............Your settings. +// * MIXINS...............Library mixins. +// * GRID SETUP...........Build the grid structure. +// * WIDTHS...............Build our responsive widths around our breakpoints. +// * PUSH.................Push classes. +// * PULL.................Pull classes. + + + + + + +// ------------------------------------ +// $INTRODUCTION +// ------------------------------------ +// +// csswizardry grids provides you with widths to suit a number of breakpoints +// designed around devices of a size you specify. Out of the box, csswizardry +// grids caters to the following types of device: +// +// palm -- palm-based devices, like phones and small tablets +// lap -- lap-based devices, like iPads or laptops +// portable -- all of the above +// desk -- stationary devices, like desktop computers +// regular -- any/all types of device +// +// These namespaces are then used in the library to give you the ability to +// manipulate your layouts based around them, for example: +// +//
+// +// This would give you a grid item which is 100% width unless it is on a lap +// device, at which point it become 50% wide, or it is on a desktop device, at +// which point it becomes 33.333% width. +// +// csswizardry grids also has push and pull classes which allow you to nudge +// grid items left and right by a defined amount. These follow the same naming +// convention as above, but are prepended by either `push--` or `pull--`, for +// example: +// +// `class="grid__item one-half push--one-half"` +// +// This would give you a grid item which is 50% width and pushed over to the +// right by 50%. +// +// All classes in csswizardry grids follow this patten, so you should fairly +// quickly be able to piece together any combinations you can imagine, for +// example: +// +// `class="grid__item one-whole lap--one-half desk--one-third push--desk--one-third"` +// `class="grid__item one-quarter palm--one-half push--palm--one-half"` +// `class="grid__item palm--one-third desk--five-twelfths"` + + + + + + +// ------------------------------------ +// $VARIABLES +// ------------------------------------ + +// If you are building a non-responsive site but would still like to use +// csswizardry-grids, set this to ‘false’: + $responsive: true !default; -/** - * Is this build mobile first? Setting to ‘true’ means that all grids will be - * 100% width if you do not apply a more specific class to them. - */ +// Is this build mobile first? Setting to ‘true’ means that all grids will be +// 100% width if you do not apply a more specific class to them. + $mobile-first: true !default; -/** - * Set the spacing between your grid items. - */ +// Set the spacing between your grid items. + $gutter: 24px !default; -/** - * Would you like Sass’ silent classes, or regular CSS classes? - */ +// Would you like Sass’ silent classes, or regular CSS classes? + $use-silent-classes: false !default; -/** - * Would you like push and pull classes enabled? - */ +// Would you like push and pull classes enabled? + $push: false !default; $pull: false !default; -/** - * Using `inline-block` means that the grid items need their whitespace removing - * in order for them to work correctly. Set the following to true if you are - * going to achieve this by manually removing/commenting out any whitespace in - * your HTML yourself. - * - * Setting this to false invokes a hack which cannot always be guaranteed, - * please see the following for more detail: - * - * github.com/csswizardry/csswizardry-grids/commit/744d4b23c9d2b77d605b5991e54a397df72e0688 - * github.com/csswizardry/inuit.css/issues/170#issuecomment-14859371 - */ + +// Using `inline-block` means that the grid items need their whitespace removing +// in order for them to work correctly. Set the following to true if you are +// going to achieve this by manually removing/commenting out any whitespace in +// your HTML yourself. +// +// Setting this to false invokes a hack which cannot always be guaranteed, +// please see the following for more detail: +// +// github.com/csswizardry/csswizardry-grids/commit/744d4b23c9d2b77d605b5991e54a397df72e0688 +// github.com/csswizardry/inuit.css/issues/170#issuecomment-14859371 + $use-markup-fix: true !default; -/** - * Define your breakpoints. The first value is the prefix that shall be used for - * your classes (e.g. `.palm--one-half`), the second value is the media query - * that the breakpoint fires at. - */ +// Define your breakpoints. The first value is the prefix that shall be used for +// your classes (e.g. `.palm--one-half`), the second value is the media query +// that the breakpoint fires at. + $breakpoints: ( 'palm' '(max-width: 480px)', 'lap' '(min-width: 481px) and (max-width: 1023px)', @@ -128,40 +121,38 @@ $breakpoints: ( ) !default; -/** - * Define which namespaced breakpoints you would like to generate for each of - * widths, push and pull. This is handy if you only need pull on, say, desk, or - * you only need a new width breakpoint at mobile sizes. It allows you to only - * compile as much CSS as you need. All are turned on by default, but you can - * add and remove breakpoints at will. - * - * Push and pull shall only be used if `$push` and/or `$pull` and `$responsive` - * have been set to ‘true’. - */ +// Define which namespaced breakpoints you would like to generate for each of +// widths, push and pull. This is handy if you only need pull on, say, desk, or +// you only need a new width breakpoint at mobile sizes. It allows you to only +// compile as much CSS as you need. All are turned on by default, but you can +// add and remove breakpoints at will. +// +// Push and pull shall only be used if `$push` and/or `$pull` and `$responsive` +// have been set to ‘true’. + $breakpoint-has-widths: ('palm', 'lap', 'portable', 'desk') !default; $breakpoint-has-push: ('palm', 'lap', 'portable', 'desk') !default; $breakpoint-has-pull: ('palm', 'lap', 'portable', 'desk') !default; -/** - * You do not need to edit anything from this line onward; csswizardry-grids is - * good to go. Happy griddin’! - */ +// You do not need to edit anything from this line onward; csswizardry-grids is +// good to go. Happy griddin’! + $class-type: if($use-silent-classes, unquote("%"), unquote(".")); -/*------------------------------------*\ - $MIXINS -\*------------------------------------*/ -/** - * These mixins are for the library to use only, you should not need to modify - * them at all. - * - * Enclose a block of code with a media query as named in `$breakpoints`. - */ +// ------------------------------------ +// $MIXINS +// ------------------------------------ + +// These mixins are for the library to use only, you should not need to modify +// them at all. +// +// Enclose a block of code with a media query as named in `$breakpoints`. + @mixin grid-media-query($media-query) { $breakpoint-found: false; @@ -184,10 +175,9 @@ $class-type: if($use-silent-classes, unquote("%"), unquote(".")); } -/** - * Drop relative positioning into silent classes which can’t take advantage of - * the `[class*="push--"]` and `[class*="pull--"]` selectors. - */ +// Drop relative positioning into silent classes which can’t take advantage of +// the `[class*="push--"]` and `[class*="pull--"]` selectors. + @mixin silent-relative { @if $use-silent-classes { position:relative; @@ -198,26 +188,26 @@ $class-type: if($use-silent-classes, unquote("%"), unquote(".")); -/*------------------------------------*\ - $GRID SETUP -\*------------------------------------*/ -/** - * 1. Allow the grid system to be used on lists. - * 2. Remove any margins and paddings that might affect the grid system. - * 3. Apply a negative `margin-left` to negate the columns’ gutters. - */ +// ------------------------------------ +// $GRID SETUP +// ------------------------------------ + +// 1. Allow the grid system to be used on lists. +// 2. Remove any margins and paddings that might affect the grid system. +// 3. Apply a negative `margin-left` to negate the columns’ gutters. + #{$class-type}grid { - list-style:none; /* [1] */ - margin:0; /* [2] */ - padding:0; /* [2] */ - margin-left:-$gutter; /* [3] */ + list-style:none; // [1] + margin:0; // [2] + padding:0; // [2] + margin-left:-$gutter; // [3] @if not $use-markup-fix { letter-spacing:-0.31em; } } @if not $use-markup-fix { - /* Opera hack */ + // Opera hack .opera:-o-prefocus, #{$class-type}grid { word-spacing:-0.43em; @@ -225,34 +215,33 @@ $class-type: if($use-silent-classes, unquote("%"), unquote(".")); } - /** - * 1. Cause columns to stack side-by-side. - * 2. Space columns apart. - * 3. Align columns to the tops of each other. - * 4. Full-width unless told to behave otherwise. - * 5. Required to combine fluid widths and fixed gutters. - */ - #{$class-type}grid__item { - display:inline-block; /* [1] */ - padding-left:$gutter; /* [2] */ - vertical-align:top; /* [3] */ - @if $mobile-first { - width:100%; /* [4] */ - } - -webkit-box-sizing:border-box; /* [5] */ - -moz-box-sizing:border-box; /* [5] */ - box-sizing:border-box; /* [5] */ - @if not $use-markup-fix { - letter-spacing:normal; - word-spacing:normal; - } +// 1. Cause columns to stack side-by-side. +// 2. Space columns apart. +// 3. Align columns to the tops of each other. +// 4. Full-width unless told to behave otherwise. +// 5. Required to combine fluid widths and fixed gutters. + +#{$class-type}grid__item { + display:inline-block; // [1] + padding-left:$gutter; // [2] + vertical-align:top; // [3] + @if $mobile-first { + width:100%; // [4] } + -webkit-box-sizing:border-box; // [5] + -moz-box-sizing:border-box; // [5] + box-sizing:border-box; // [5] + @if not $use-markup-fix { + letter-spacing:normal; + word-spacing:normal; + } +} -/** - * Reversed grids allow you to structure your source in the opposite order to - * how your rendered layout will appear. Extends `.grid`. - */ + +// Reversed grids allow you to structure your source in the opposite order to +// how your rendered layout will appear. Extends `.grid`. + #{$class-type}grid--rev { direction:rtl; text-align:left; @@ -264,10 +253,9 @@ $class-type: if($use-silent-classes, unquote("%"), unquote(".")); } -/** - * Gutterless grids have all the properties of regular grids, minus any spacing. - * Extends `.grid`. - */ +// Gutterless grids have all the properties of regular grids, minus any spacing. +// Extends `.grid`. + #{$class-type}grid--full { margin-left:0; @@ -277,9 +265,9 @@ $class-type: if($use-silent-classes, unquote("%"), unquote(".")); } -/** - * Align the entire grid to the right. Extends `.grid`. - */ + +// Align the entire grid to the right. Extends `.grid`. + #{$class-type}grid--right { text-align:right; @@ -289,10 +277,10 @@ $class-type: if($use-silent-classes, unquote("%"), unquote(".")); } -/** - * Centered grids align grid items centrally without needing to use push or pull - * classes. Extends `.grid`. - */ + +// Centered grids align grid items centrally without needing to use push or pull +// classes. Extends `.grid`. + #{$class-type}grid--center { text-align:center; @@ -302,10 +290,9 @@ $class-type: if($use-silent-classes, unquote("%"), unquote(".")); } -/** - * Align grid cells vertically (`.grid--middle` or `.grid--bottom`). Extends - * `.grid`. - */ +// Align grid cells vertically (`.grid--middle` or `.grid--bottom`). Extends +// `.grid`. + #{$class-type}grid--middle { > #{$class-type}grid__item { @@ -321,9 +308,8 @@ $class-type: if($use-silent-classes, unquote("%"), unquote(".")); } -/** - * Create grids with narrower gutters. Extends `.grid`. - */ +// Create grids with narrower gutters. Extends `.grid`. + #{$class-type}grid--narrow { margin-left:-($gutter / 2); @@ -333,9 +319,8 @@ $class-type: if($use-silent-classes, unquote("%"), unquote(".")); } -/** - * Create grids with wider gutters. Extends `.grid`. - */ +// Create grids with wider gutters. Extends `.grid`. + #{$class-type}grid--wide { margin-left:-($gutter * 2); @@ -348,54 +333,42 @@ $class-type: if($use-silent-classes, unquote("%"), unquote(".")); -/*------------------------------------*\ - $WIDTHS -\*------------------------------------*/ -/** - * Create our width classes, prefixed by the specified namespace. - */ +// ------------------------------------ +// $WIDTHS +// ------------------------------------ + +// Create our width classes, prefixed by the specified namespace. + @mixin device-type($namespace:"") { $prefix: $class-type + $namespace; - /** - * Whole - */ + // Whole #{$prefix}one-whole { width:100%; } - /** - * Halves - */ + // Halves #{$prefix}one-half { width:50%; } - /** - * Thirds - */ + // Thirds #{$prefix}one-third { width:33.333%; } #{$prefix}two-thirds { width:66.666%; } - /** - * Quarters - */ + // Quarters #{$prefix}one-quarter { width:25%; } #{$prefix}two-quarters { @extend #{$prefix}one-half; } #{$prefix}three-quarters { width:75%; } - /** - * Fifths - */ + // Fifths #{$prefix}one-fifth { width:20%; } #{$prefix}two-fifths { width:40%; } #{$prefix}three-fifths { width:60%; } #{$prefix}four-fifths { width:80%; } - /** - * Sixths - */ + // Sixths #{$prefix}one-sixth { width:16.666%; } #{$prefix}two-sixths { @extend #{$prefix}one-third; } #{$prefix}three-sixths { @extend #{$prefix}one-half; } @@ -403,9 +376,7 @@ $class-type: if($use-silent-classes, unquote("%"), unquote(".")); #{$prefix}five-sixths { width:83.333%; } - /** - * Eighths - */ + // Eighths #{$prefix}one-eighth { width:12.5%; } #{$prefix}two-eighths { @extend #{$prefix}one-quarter; } #{$prefix}three-eighths { width:37.5%; } @@ -415,9 +386,7 @@ $class-type: if($use-silent-classes, unquote("%"), unquote(".")); #{$prefix}seven-eighths { width:87.5%; } - /** - * Tenths - */ + // Tenths #{$prefix}one-tenth { width:10%; } #{$prefix}two-tenths { @extend #{$prefix}one-fifth; } #{$prefix}three-tenths { width:30%; } @@ -429,9 +398,7 @@ $class-type: if($use-silent-classes, unquote("%"), unquote(".")); #{$prefix}nine-tenths { width:90%; } - /** - * Twelfths - */ + // Twelfths #{$prefix}one-twelfth { width:8.333%; } #{$prefix}two-twelfths { @extend #{$prefix}one-sixth; } #{$prefix}three-twelfths { @extend #{$prefix}one-quarter; } @@ -446,15 +413,13 @@ $class-type: if($use-silent-classes, unquote("%"), unquote(".")); } -/** - * Our regular, non-responsive width classes. - */ +// Our regular, non-responsive width classes. + @include device-type; -/** - * Our responsive classes, if we have enabled them. - */ +// Our responsive classes, if we have enabled them. + @if $responsive { @each $name in $breakpoint-has-widths { @@ -469,54 +434,42 @@ $class-type: if($use-silent-classes, unquote("%"), unquote(".")); -/*------------------------------------*\ - $PUSH -\*------------------------------------*/ -/** - * Push classes, to move grid items over to the right by certain amounts. - */ +// ------------------------------------ +// $PUSH +// ------------------------------------ + +// Push classes, to move grid items over to the right by certain amounts. + @mixin push-setup($namespace: "") { $prefix: $class-type + "push--" + $namespace; - /** - * Whole - */ + // Whole #{$prefix}one-whole { left:100%; @include silent-relative; } - /** - * Halves - */ + // Halves #{$prefix}one-half { left:50%; @include silent-relative; } - /** - * Thirds - */ + // Thirds #{$prefix}one-third { left:33.333%; @include silent-relative; } #{$prefix}two-thirds { left:66.666%; @include silent-relative; } - /** - * Quarters - */ + // Quarters #{$prefix}one-quarter { left:25%; @include silent-relative; } #{$prefix}two-quarters { @extend #{$prefix}one-half; } #{$prefix}three-quarters { left:75%; @include silent-relative; } - /** - * Fifths - */ + // Fifths #{$prefix}one-fifth { left:20%; @include silent-relative; } #{$prefix}two-fifths { left:40%; @include silent-relative; } #{$prefix}three-fifths { left:60%; @include silent-relative; } #{$prefix}four-fifths { left:80%; @include silent-relative; } - /** - * Sixths - */ + // Sixths #{$prefix}one-sixth { left:16.666%; @include silent-relative; } #{$prefix}two-sixths { @extend #{$prefix}one-third; } #{$prefix}three-sixths { @extend #{$prefix}one-half; } @@ -524,9 +477,7 @@ $class-type: if($use-silent-classes, unquote("%"), unquote(".")); #{$prefix}five-sixths { left:83.333%; @include silent-relative; } - /** - * Eighths - */ + // Eighths #{$prefix}one-eighth { left:12.5%; @include silent-relative; } #{$prefix}two-eighths { @extend #{$prefix}one-quarter; } #{$prefix}three-eighths { left:37.5%; @include silent-relative; } @@ -536,9 +487,7 @@ $class-type: if($use-silent-classes, unquote("%"), unquote(".")); #{$prefix}seven-eighths { left:87.5%; @include silent-relative; } - /** - * Tenths - */ + // Tenths #{$prefix}one-tenth { left:10%; @include silent-relative; } #{$prefix}two-tenths { @extend #{$prefix}one-fifth; } #{$prefix}three-tenths { left:30%; @include silent-relative; } @@ -550,9 +499,7 @@ $class-type: if($use-silent-classes, unquote("%"), unquote(".")); #{$prefix}nine-tenths { left:90%; @include silent-relative; } - /** - * Twelfths - */ + // Twelfths #{$prefix}one-twelfth { left:8.333%; @include silent-relative; } #{$prefix}two-twelfths { @extend #{$prefix}one-sixth; } #{$prefix}three-twelfths { @extend #{$prefix}one-quarter; } @@ -568,9 +515,8 @@ $class-type: if($use-silent-classes, unquote("%"), unquote(".")); @if $push { - /** - * Not a particularly great selector, but the DRYest way to do things. - */ + // Not a particularly great selector, but the DRYest way to do things. + [class*="push--"] { position:relative; } @include push-setup; @@ -589,54 +535,42 @@ $class-type: if($use-silent-classes, unquote("%"), unquote(".")); -/*------------------------------------*\ - $PULL -\*------------------------------------*/ -/** - * Pull classes, to move grid items back to the left by certain amounts. - */ +// ------------------------------------ +// $PULL +// ------------------------------------ + +// Pull classes, to move grid items back to the left by certain amounts. + @mixin pull-setup($namespace: "") { $prefix: $class-type + "pull--" + $namespace; - /** - * Whole - */ + // Whole #{$prefix}one-whole { right:100%; @include silent-relative; } - /** - * Halves - */ + // Halves #{$prefix}one-half { right:50%; @include silent-relative; } - /** - * Thirds - */ + // Thirds #{$prefix}one-third { right:33.333%; @include silent-relative; } #{$prefix}two-thirds { right:66.666%; @include silent-relative; } - /** - * Quarters - */ + // Quarters #{$prefix}one-quarter { right:25%; @include silent-relative; } #{$prefix}two-quarters { @extend #{$prefix}one-half; } #{$prefix}three-quarters { right:75%; @include silent-relative; } - /** - * Fifths - */ + // Fifths #{$prefix}one-fifth { right:20%; @include silent-relative; } #{$prefix}two-fifths { right:40%; @include silent-relative; } #{$prefix}three-fifths { right:60%; @include silent-relative; } #{$prefix}four-fifths { right:80%; @include silent-relative; } - /** - * Sixths - */ + // Sixths #{$prefix}one-sixth { right:16.666%; @include silent-relative; } #{$prefix}two-sixths { @extend #{$prefix}one-third; } #{$prefix}three-sixths { @extend #{$prefix}one-half; } @@ -644,9 +578,7 @@ $class-type: if($use-silent-classes, unquote("%"), unquote(".")); #{$prefix}five-sixths { right:83.333%; @include silent-relative; } - /** - * Eighths - */ + // Eighths #{$prefix}one-eighth { right:12.5%; @include silent-relative; } #{$prefix}two-eighths { @extend #{$prefix}one-quarter; } #{$prefix}three-eighths { right:37.5%; @include silent-relative; } @@ -656,9 +588,7 @@ $class-type: if($use-silent-classes, unquote("%"), unquote(".")); #{$prefix}seven-eighths { right:87.5%; @include silent-relative; } - /** - * Tenths - */ + // Tenths #{$prefix}one-tenth { right:10%; @include silent-relative; } #{$prefix}two-tenths { @extend #{$prefix}one-fifth; } #{$prefix}three-tenths { right:30%; @include silent-relative; } @@ -670,9 +600,7 @@ $class-type: if($use-silent-classes, unquote("%"), unquote(".")); #{$prefix}nine-tenths { right:90%; @include silent-relative; } - /** - * Twelfths - */ + // Twelfths #{$prefix}one-twelfth { right:8.333%; @include silent-relative; } #{$prefix}two-twelfths { @extend #{$prefix}one-sixth; } #{$prefix}three-twelfths { @extend #{$prefix}one-quarter; } @@ -688,9 +616,8 @@ $class-type: if($use-silent-classes, unquote("%"), unquote(".")); @if $pull { - /** - * Not a particularly great selector, but the DRYest way to do things. - */ + // Not a particularly great selector, but the DRYest way to do things. + [class*="pull--"] { position:relative; } @include pull-setup;