Yet more variables, and a fair bit of housekeeping

2013-07-15 10:19:46 +01:00
parent 89832d4052
commit 0fcf83793e
12 changed files with 86 additions and 132 deletions
--- a/scss/Ribs.scss
+++ b/scss/Ribs.scss
@@ -1,19 +1,16 @@
 /*
-* Ribs V1.0.2
+* Ribs
 * Skeleton is Copyright 2011, Dave Gamache
 *
 * Ribs is the evolution of Skeleton by Nick Pack
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
-* 28/05/2013
 */

@import "_variables";
@import "normalize/_normalize";
@import "_mixins";

-/* #Basic Styles
-================================================== */
 body {
  background: #fff;
  font: 14px/21px $body_font_family;
@@ -22,6 +19,14 @@ body {
  -ms-text-size-adjust: 100%;
 }

+hr {
+  border: $hr_border;
+  border-width: $hr_border_width;
+  clear: both;
+  margin: $hr_margin;
+  height: 0;
+}
+
@import "_grid";
@import "_typography";
@import "_links";
@@ -29,20 +34,17 @@ body {
@import "_forms";
@import "_images";

-/* #Example Media Queries
-================================================== */
-
-/* Smaller than standard 960 (devices and browsers) */
+// Smaller than standard 960 (devices and browsers)
@media only screen and (max-width: 959px) {}

-/* Tablet Portrait size to standard 960 (devices and browsers) */
+// Tablet Portrait size to standard 960 (devices and browsers)
@media only screen and (min-width: 768px) and (max-width: 959px) {}

-/* All Mobile Sizes (devices and browser) */
+// All Mobile Sizes (devices and browser)
@media only screen and (max-width: 767px) {}

-/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
+// Mobile Landscape Size to Tablet Portrait (devices and browsers)
@media only screen and (min-width: 480px) and (max-width: 767px) {}

-/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
+// Mobile Portrait Size to Mobile Landscape Size (devices and browsers)
@media only screen and (max-width: 479px) {}
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -1,5 +1,5 @@
-/* #Buttons
-================================================== */
+// #Buttons
+// ==================================================
 .button,
 button,
 input[type="submit"],
@@ -51,15 +51,15 @@ input[type="button"].full-width {
  text-align: center;
 }

-/* Fix for odd Mozilla border & padding issues */
+// Fix for odd Mozilla border & padding issues
 button::-moz-focus-inner,
 input::-moz-focus-inner {
  border: 0;
  padding: 0;
 }

-/* #Forms
-================================================== */
+// #Forms
+// ==================================================

 form {
  margin: $form_fieldset_margin;
@@ -86,7 +86,7 @@ textarea,
 select {
  border: $form_input_border;
  padding: $form_input_padding;
-  @include border-radius(2px);
+  @include border-radius($form_input_border_radius);
  font: $form_input_font_size $form_element_font;
  color: $form_input_text_colour;
  width: $form_input_width;
@@ -97,7 +97,7 @@ select {
 }

 select {
-  padding: 0;
+  padding: $form_input_select_padding;
 }

 input[type="text"]:focus,
@@ -110,12 +110,12 @@ input[type="tel"]:focus,
 textarea:focus {
  border: $form_input_focus_border;
  color: $form_input_focus_text_colour;
-  outline: none;
-  @include box-shadow(0, 0, 3px, rgba(0, 0, 0, .2))
+  outline: $form_input_focus_outline;
+  @include box-shadow($form_input_focus_box_shadow_x, $form_input_focus_box_shadow_y, $form_input_focus_box_shadow_blur, $form_input_focus_box_shadow_colour)
 }

 textarea {
-  min-height: 60px;
+  min-height: $form_textarea_min_height;
 }

 label,
@@ -130,7 +130,7 @@ select {
 }

 input[type="checkbox"] {
-  display: inline;
+  display: $form_input_checkbox_display;
 }

 label span,
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -12,6 +12,11 @@
  margin-right: $gutter/2;
 }

+.alpha-omega {
+  margin-right: 0;
+  margin-left: 0;
+}
+
 .row { margin-bottom: $gutter; }

@include grid($desktop-container-width, $column-count, $gutter);
@@ -26,10 +31,6 @@
    & .alpha { margin-right: 10px; }
    & .omega { margin-left: 10px; }
  }
-
-  .alpha-omega {
-    margin-right: 0;
-    margin-left: 0; }
 }
 //--------------------------------------------------------------------
 // #Mobile
@@ -81,14 +82,13 @@
  }
 }

-/* #Clearing
-================================================== */
+// #Clearing
+// ==================================================

-/* Self Clearing Goodness */
 .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

-/* Use clearfix class on parent to clear nested columns,
-or wrap each row of columns in a <div class="row"> */
+// Use clearfix class on parent to clear nested columns,
+// or wrap each row of columns in a <div class="row">
 .clearfix:before,
 .clearfix:after,
 .row:before,
@@ -106,7 +106,7 @@ or wrap each row of columns in a <div class="row"> */
    .clearfix {
      zoom: 1; }

-/* You can also use a <br class="clear" /> to clear columns */
+// You can also use a <br class="clear" /> to clear columns
 .clear {
  clear: both;
  display: block;
--- a/scss/_images.scss
+++ b/scss/_images.scss
@@ -1,5 +1,5 @@
-/* #Images
-================================================== */
+// #Images
+// ==================================================

 .scale-with-grid {
  max-width: 100%;
--- a/scss/_links.scss
+++ b/scss/_links.scss
@@ -1,5 +1,5 @@
-/* #Links
-================================================== */
+// #Links
+// ==================================================
 a, a:visited {
  color: $link_colour;
  text-decoration: $link_decoration;
--- a/scss/_lists.scss
+++ b/scss/_lists.scss
@@ -1,5 +1,5 @@
-/* #Lists
-================================================== */
+// #Lists
+// ==================================================
 ul, ol {
  margin: $list_margin;
 }
@@ -17,15 +17,15 @@ ol, ul.square, ul.circle, ul.disc {
 }

 ul.square {
-  list-style: square outside;
+  list-style: square $list_styled_position;
 }

 ul.circle {
-  list-style: circle outside;
+  list-style: circle $list_styled_position;
 }

 ul.disc {
-  list-style: disc outside;
+  list-style: disc $list_styled_position;
 }

 ul ul, ul ol,
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -112,7 +112,7 @@
@mixin box-shadow($a, $b, $c, $colour) {
  -moz-box-shadow: $a $b $c $colour;
  -webkit-box-shadow: $a $b $c $colour;
-  box-shadow:  $a $b $c $colour;
+  box-shadow: $a $b $c $colour;
 }

@mixin grid($grid-container-width, $grid-column-count:$column-count, $grid-gutter:$gutter) {
@@ -142,10 +142,9 @@
    .two-thirds  { width: (($grid-container-width/3)*2) - $grid-gutter; }
    .one-half    { width: ($grid-container-width/2) - $grid-gutter; }
    .one-quarter { width: ($grid-container-width/4) - $grid-gutter; }
-    .three-quarters {width: (($grid-container-width/4)*3) - $grid-gutter;}
+    .three-quarters { width: (($grid-container-width/4)*3) - $grid-gutter; }

-
-    .offset-by-one      { padding-left: $grid-column-width;  }
+    .offset-by-one      { padding-left: $grid-column-width; }
    .offset-by-two      { padding-left: $grid-column-width*2; }
    .offset-by-three    { padding-left: $grid-column-width*3; }
    .offset-by-four     { padding-left: $grid-column-width*4; }
--- a/scss/_typography.scss
+++ b/scss/_typography.scss
@@ -1,15 +1,5 @@
-/* #Typography
-================================================== */
-/*	@font-face {
-	    font-family: 'FontName';
-	    src: url('../fonts/FontName.eot');
-	    src: url('../fonts/FontName.eot?iefix') format('eot'),
-	         url('../fonts/FontName.woff') format('woff'),
-	         url('../fonts/FontName.ttf') format('truetype'),
-	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
-	    font-weight: normal;
-	    font-style: normal; }
-*/
+// #Typography
+// ==================================================

 h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  font-weight: inherit;
@@ -99,12 +89,11 @@ small {
  font-size: 80%;
 }

-/*	Blockquotes  */
 blockquote, blockquote p {
-  font-size: 17px;
-  line-height: 24px;
+  font-size: $blockquote_font_size;
+  line-height: $blockquote_line_height;
  color: $blockquote_colour;
-  font-style: italic;
+  font-style: $blockquote_font_style;
 }

 blockquote {
@@ -125,13 +114,4 @@ blockquote cite:before {

 blockquote cite a, blockquote cite a:visited, blockquote cite a:visited {
  color: $blockquote_cite_link_colour;
-}
-
-/* not really typographical, but I couldnt find anywhere else to put it */
-hr {
-  border: $hr_border;
-  border-width: $hr_border_width;
-  clear: both;
-  margin: $hr_margin;
-  height: 0;
 }
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -37,9 +37,19 @@ $form_input_width: 210px;
 $form_input_select_width: 220px;
 $form_input_margin: 0 0 20px 0;
 $form_input_font_size: 13px;
+$form_input_border_radius: 2px;
+
+$form_input_checkbox_display: inline;

 $form_input_focus_border: 1px solid #aaa;
 $form_input_focus_text_colour: #444;
+$form_input_focus_outline: none;
+$form_input_focus_box_shadow_x: 0;
+$form_input_focus_box_shadow_y: 0;
+$form_input_focus_box_shadow_blur: 3px;
+$form_input_focus_box_shadow_colour: rgba(0, 0, 0, .2);
+
+$form_input_select_padding: 10px;

 $form_label_legend_colour: #444;
 $form_fieldset_margin: 0 0 20px 0;
@@ -47,6 +57,8 @@ $form_fieldset_margin: 0 0 20px 0;
 $legend_font_weight: bold;
 $legend_font_size: $form_input_font_size;

+$form_textarea_min_height: 60px;
+
 $link_colour: #333;
 $link_decoration: underline;
 $link_outline: 0;
@@ -98,6 +110,9 @@ $blockquote_cite_link_colour: #555;
 $blockquote_cite_font_size: 12px;
 $blockquote_margin: 0 0 20px;
 $blockquote_padding: 9px 20px 0 19px;
+$blockquote_font_size: 17px;
+$blockquote_line_height: 24px;
+$blockquote_font_style: italic;

 $hr_border: solid #ddd;
 $hr_border_width: 1px 0 0;
@@ -111,7 +126,8 @@ $list_large_line_height: 21px;
 $ul_list_style: none outside;
 $ol_list_style: decimal;

-$list_styled_margin: 0 0 0 30px; /* ul, ol with disc, square etc. */
+$list_styled_margin: 0 0 0 30px; // ul, ol with disc, square etc.
+$list_styled_position: outside;  // List item bullet position 

 $nested_list_margin: 4px 0 5px 30px;
 $nested_list_font_size: 90%;