From 4dfd022f791835463c1114031d3607ecd8a93d85 Mon Sep 17 00:00:00 2001 From: Nick Pack Date: Thu, 10 Oct 2013 18:35:26 +0100 Subject: [PATCH] Initial inline and API level docs, fixed stupid oversight in grid handling --- Gruntfile.js | 24 ++- build/css/Ribs.css | 207 ++++++++++++++++++++- docs/Ribs.html | 46 +++++ docs/forms.html | 153 ++++++++++++++++ docs/grid.html | 164 +++++++++++++++++ docs/images.html | 8 + docs/index.html | 70 +++++++ docs/links.html | 16 ++ docs/lists.html | 48 +++++ docs/mixins.html | 216 ++++++++++++++++++++++ docs/normalize-normalize.html | 332 ++++++++++++++++++++++++++++++++++ docs/tables.html | 241 ++++++++++++++++++++++++ docs/typography.html | 116 ++++++++++++ docs/variables.html | 157 ++++++++++++++++ package.json | 1 + src/scss/Ribs.scss | 30 +-- src/scss/_forms.scss | 39 +++- src/scss/_grid.scss | 112 +++++++++--- src/scss/_images.scss | 10 +- src/scss/_links.scss | 3 +- src/scss/_lists.scss | 3 +- src/scss/_tables.scss | 118 +++++++++++- src/scss/_typography.scss | 3 +- src/scss/_variables.scss | 27 ++- 24 files changed, 2074 insertions(+), 70 deletions(-) create mode 100644 docs/Ribs.html create mode 100644 docs/forms.html create mode 100644 docs/grid.html create mode 100644 docs/images.html create mode 100644 docs/index.html create mode 100644 docs/links.html create mode 100644 docs/lists.html create mode 100644 docs/mixins.html create mode 100644 docs/normalize-normalize.html create mode 100644 docs/tables.html create mode 100644 docs/typography.html create mode 100644 docs/variables.html diff --git a/Gruntfile.js b/Gruntfile.js index 5b8280c..319d567 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -35,16 +35,34 @@ module.exports = function(grunt) { watch: { files: 'src/scss/**/*', tasks: ['sass', 'csslint:scssoutput', 'cssmin'] - } + }, + styleguide: { + styledocco: { + options: { + framework: { + name: 'styledocco' + }, + name: '<%= pkg.name %>' + }, + template: { + include: 'build/css/Ribs.min.css' + }, + files: { + 'docs': 'src/scss/*.scss' + }, + } + }, }); grunt.loadNpmTasks('grunt-contrib-csslint'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-watch'); - + grunt.loadNpmTasks('grunt-styleguide'); + + grunt.registerTask('docs', ['sass', 'styleguide']); grunt.registerTask('test', ['sass', 'csslint:scssoutput']); grunt.registerTask('minify', ['cssmin']); grunt.registerTask('default', ['sass', 'cssmin']); -}; \ No newline at end of file +}; diff --git a/build/css/Ribs.css b/build/css/Ribs.css index d851c5a..a6b4a6e 100644 --- a/build/css/Ribs.css +++ b/build/css/Ribs.css @@ -1,10 +1,11 @@ /* -* Ribs -* Skeleton is Copyright 2011, Dave Gamache -* -* Ribs is the evolution of Skeleton by Nick Pack -* Free to use under the MIT license. -* http://github.com/nickpack/Ribs + #Ribs + ## Copyright Information + Skeleton is Copyright 2011, Dave Gamache + + Ribs is the evolution of Skeleton by Nick Pack + Free to use under the MIT license. + http://github.com/nickpack/Ribs */ /* normalize.css v2.1.3 | MIT License | git.io/normalize */ /* ========================================================================== @@ -360,6 +361,32 @@ hr { margin: 10px 0 30px; height: 0; } +/* +#Grid System + +
One
+
Eleven
+
Two
+
Ten
+
Three
+
Nine
+
Four
+
Eight
+
Five
+
Seven
+
Six
+
Six
+
Seven
+
Five
+
Eight
+
Four
+
Nine
+
Three
+
Ten
+
Two
+
Eleven
+
One
+*/ .container { position: relative; margin: 0 auto; @@ -658,6 +685,10 @@ hr { margin-right: 10px; } .container .omega { margin-left: 10px; } } +/* + #Mobile Grid + Every column element in this grid is the total grid width +*/ @media only screen and (max-width: 767px) { .container { width: 90%; } @@ -681,6 +712,13 @@ hr { .container .offset-by-fourteen, .container .offset-by-fifteen { padding-left: 0; } } +/* + ##Auto-applied clearfix for .container elements + + ```
+ This element has clearfix applied in browsers that support the :after css selector +
``` +*/ .container:after { content: "\0020"; display: block; @@ -688,6 +726,12 @@ hr { clear: both; visibility: hidden; } +/* + ##General use clearfix class + ```
This haz clearfix
``` + Use this clearfix class on parent to clear nested columns, or: + wrap each row of columns in a ```
...
``` +*/ .clearfix:before, .clearfix:after, .row:before, @@ -699,6 +743,13 @@ hr { width: 0; height: 0; } +/* + ##Auto-applied clearfix for .row elements + + ```
+ This element has clearfix applied in browsers that support the :after css selector +
``` +*/ .row:after, .clearfix:after { clear: both; } @@ -706,6 +757,10 @@ hr { .row, .clearfix { zoom: 1; } +/* + ##Block level clear + You can also use a ```
``` to clear columns +*/ .clear { clear: both; display: block; @@ -937,17 +992,29 @@ input::-moz-focus-inner { border: 0; padding: 0; } +/* + ##General margins (all sides) + Applied to both form, and fieldset +*/ form { margin: 0 0 20px 0; } fieldset { margin: 0 0 20px 0; } +/* + ##Search/URL fields + Make these behave as text fields +*/ input[type="search"], input[type="url"] { -webkit-appearance: textfield; -moz-appearance: textfield; } +/* + ##General form element styles, border etc. + Applied to all except checkboxes +*/ input[type="text"], input[type="password"], input[type="email"], @@ -970,10 +1037,18 @@ select { margin: 0 0 20px 0; background: white; } +/* + ##Select boxes + Padding and width applied from settings +*/ select { padding: 10px; width: 220px; } +/* + ##Form element focus styles + Applied to all except checkboxes and selects +*/ input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, @@ -1001,16 +1076,48 @@ legend { input[type="checkbox"] { display: inline; } +/* + ##Spans inside legends, or labels + Alters font size, weight and colour based on variables +*/ label span, legend span { font-weight: normal; font-size: 13px; color: #444444; } +/* + ## Scale an image in line with the responsive grid + ``` + + ``` +*/ .scale-with-grid { max-width: 100%; height: auto; } +/* +##Basic table style + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1NickPack@nickpack
+*/ table { max-width: 100%; background: white; @@ -1041,10 +1148,54 @@ table { table table { background: white; } +/* +##Condensed table style + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1NickPack@nickpack
+*/ .table-condensed th, .table-condensed td { padding: 4px 5px; } +/* +##Bordered table style + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1NickPack@nickpack
+*/ .table-bordered { border: 1px solid #cccccc; border-collapse: separate; @@ -1116,10 +1267,54 @@ table { -moz-border-radius-topright: 3px; border-top-right-radius: 3px; } +/* +##Striped table style + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1NickPack@nickpack
+*/ .table-striped tbody > tr:nth-child(odd) > td, .table-striped tbody > tr:nth-child(odd) > th { background-color: #efefef; } +/* +##Hover table style + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1NickPack@nickpack
+*/ .table-hover tbody tr:hover > td, .table-hover tbody tr:hover > th { background-color: #999999; } diff --git a/docs/Ribs.html b/docs/Ribs.html new file mode 100644 index 0000000..c8309d5 --- /dev/null +++ b/docs/Ribs.html @@ -0,0 +1,46 @@ +Ribs | Ribs +

Ribs

+ +

Skeleton is Copyright 2011, Dave Gamache

+

Ribs is the evolution of Skeleton by Nick Pack + Free to use under the MIT license. + http://github.com/nickpack/Ribs

+

Import of normalize, variables and mixins

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

General body style

+
body {
+  background: #fff;
+  font: 14px/21px $body_font_family;
+  color: #444;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}

General horizontal rule style

+
hr {
+  border: $hr_border;
+  border-width: $hr_border_width;
+  clear: both;
+  margin: $hr_margin;
+  height: 0;
+}

Import of ribs functionality

+
@import "_grid";
+@import "_typography";
+@import "_links";
+@import "_lists";
+@import "_forms";
+@import "_images";
+@import "_tables";

Example Media Queries

+

Media Query - Smaller than standard 960 (devices and browsers)

+

Media Query - Tablet Portrait size to standard 960 (devices and browsers)

+

Media Query - All Mobile Sizes (devices and browser)

+

Media Query - Mobile Landscape Size to Tablet Portrait (devices and browsers)

+

Media Query - Mobile Portrait Size to Mobile Landscape Size (devices and browsers)

+
@media only screen and (max-width: 959px) {}
+
+@media only screen and (min-width: 768px) and (max-width: 959px) {}
+
+@media only screen and (max-width: 767px) {}
+
+@media only screen and (min-width: 480px) and (max-width: 767px) {}
+
+@media only screen and (max-width: 479px) {}
diff --git a/docs/forms.html b/docs/forms.html new file mode 100644 index 0000000..f96849e --- /dev/null +++ b/docs/forms.html @@ -0,0 +1,153 @@ +forms | Ribs +

Buttons

+

Normal

+

Hover

+

Active

+

Full width

+

Fix for odd Mozilla border & padding issues

+
.button,
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  @include vertical-gradient($form_button_gradient_start, $form_button_gradient_end);
+  @include button_border($form_button_border_rightbottom, $form_button_border_topleft);
+  @include border-radius($form_button_border_radius);
+  color: $form_button_text_colour;
+  display: inline-block;
+  font-size: $form_button_font_size;
+  font-weight: bold;
+  text-decoration: none;
+  text-shadow: $form_button_text_shadow;
+  cursor: pointer;
+  margin: $form_input_margin;
+  line-height: $form_button_line_height;
+  padding: $form_button_padding;
+  font-family: $form_element_font;
+}
+
+.button:hover,
+button:hover,
+input[type="submit"]:hover,
+input[type="reset"]:hover,
+input[type="button"]:hover {
+  @include vertical-gradient($form_button_hover_gradient_start, $form_button_hover_gradient_end);
+  color: $form_button_hover_text_colour;
+  @include button_border($form_button_hover_border_rightbottom, $form_button_hover_border_topleft);
+}
+
+.button:active,
+button:active,
+input[type="submit"]:active,
+input[type="reset"]:active,
+input[type="button"]:active {
+  @include vertical-gradient($form_button_active_gradient_start, $form_button_active_gradient_end);
+  border: $form_button_active_border;
+}
+
+.button .full-width,
+button.full-width,
+input[type="submit"].full-width,
+input[type="reset"].full-width,
+input[type="button"].full-width {
+  width: 100%;
+  padding-left: 0;
+  padding-right: 0;
+  text-align: center;
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}

Forms

+

General margins (all sides)

+

Applied to both form, and fieldset

+

Search/URL fields

+

Make these behave as text fields

+

General form element styles, border etc.

+

Applied to all except checkboxes

+

Select boxes

+

Padding and width applied from settings

+

Form element focus styles

+

Applied to all except checkboxes and selects

+

Textarea min height

+

Label/legend font settings

+

Checkbox display

+

Spans inside legends, or labels

+

Alters font size, weight and colour based on variables

+
form {
+  margin: $form_fieldset_margin;
+}
+
+fieldset {
+  margin: $form_fieldset_margin;
+}
+
+input[type="search"],
+input[type="url"] {
+  -webkit-appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="search"],
+input[type="url"],
+input[type="number"],
+input[type="tel"],
+textarea,
+select {
+  border: $form_input_border;
+  padding: $form_input_padding;
+  @include border-radius($form_input_border_radius);
+  font: $form_input_font_size $form_element_font;
+  color: $form_input_text_colour;
+  width: $form_input_width;
+  max-width: $form_input_max_width;
+  display: block;
+  margin: $form_input_margin;
+  background: $form_input_background;
+}
+
+select {
+  padding: $form_input_select_padding;
+  width: $form_input_select_width;
+}
+
+input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="email"]:focus,
+input[type="search"]:focus,
+input[type="url"]:focus,
+input[type="number"]:focus,
+input[type="tel"]:focus,
+textarea:focus {
+  border: $form_input_focus_border;
+  color: $form_input_focus_text_colour;
+  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: $form_textarea_min_height;
+}
+
+label,
+legend {
+  display: block;
+  font-weight: $legend_font_weight;
+  font-size: $legend_font_size;
+}
+
+input[type="checkbox"] {
+  display: $form_input_checkbox_display;
+}
+
+label span,
+legend span {
+  font-weight: $form_label_legend_font_weight;
+  font-size: $form_input_font_size;
+  color: $form_label_legend_colour;
+}
diff --git a/docs/grid.html b/docs/grid.html new file mode 100644 index 0000000..c9ffbca --- /dev/null +++ b/docs/grid.html @@ -0,0 +1,164 @@ +grid | Ribs +

Grid System

+
One
+
Eleven
+
Two
+
Ten
+
Three
+
Nine
+
Four
+
Eight
+
Five
+
Seven
+
Six
+
Six
+
Seven
+
Five
+
Eight
+
Four
+
Nine
+
Three
+
Ten
+
Two
+
Eleven
+
One
+
.container {
+  position: relative;
+  margin: 0 auto;
+  padding: 0;
+  & .alpha {
+    margin-left: 0;
+  }
+  & .omega {
+    margin-right: 0;
+  }
+}
+
+.column, .columns {
+  float: left;
+  margin-left: $gutter/2;
+  margin-right: $gutter/2;
+}
+
+.alpha-omega {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+.row {
+  margin-bottom: $gutter;
+}

Desktop Grid

+
+
@include grid($desktop-container-width, $column-count, $gutter);

Tablet Grid

+
+
@media only screen and (max-width: $tablet-max-breakpoint) {
+  @include grid($tablet-container-width, $column-count, $gutter);
+
+  .container {
+    width: $tablet-container-width;
+    & .alpha {
+      margin-right: 10px;
+    }
+    & .omega {
+      margin-left: 10px;
+    }
+  }
+}

Mobile Grid

+

Every column element in this grid is the total grid width

+
@media only screen and (max-width: $mobile-max-breakpoint) {
+  .container {
+    width: $mobile-container-width;
+    & .one,
+    & .two,
+    & .three,
+    & .four,
+    & .five,
+    & .six,
+    & .seven,
+    & .eight,
+    & .nine,
+    & .ten,
+    & .eleven,
+    & .twelve,
+    & .thirteen,
+    & .fourteen,
+    & .fifteen,
+    & .sixteen,
+    & .one-third,
+    & .two-thirds,
+    & .one-half,
+    & .one-quarter,
+    & .three-quarters
+    { width: $mobile-column-width; }
+
+    .column, .columns {
+      margin: 0;
+    }
+
+    .offset-by-one,
+    .offset-by-two,
+    .offset-by-three,
+    .offset-by-four,
+    .offset-by-five,
+    .offset-by-six,
+    .offset-by-seven,
+    .offset-by-eight,
+    .offset-by-nine,
+    .offset-by-ten,
+    .offset-by-eleven,
+    .offset-by-twelve,
+    .offset-by-thirteen,
+    .offset-by-fourteen,
+    .offset-by-fifteen { padding-left: 0; }
+  }
+}

Clearing

+

Auto-applied clearfix for .container elements

+

<div class="container"> + This element has clearfix applied in browsers that support the :after css selector + </div>

+

General use clearfix class

+

<div class="clearfix">This haz clearfix</div> + Use this clearfix class on parent to clear nested columns, or: + wrap each row of columns in a <div class="row">...</div>

+

Auto-applied clearfix for .row elements

+

<div class="row"> + This element has clearfix applied in browsers that support the :after css selector + </div>

+

Block level clear

+

You can also use a <br class="clear"> to clear columns

+
.container:after {
+  content: "\0020";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
+
+.clearfix:before,
+.clearfix:after,
+.row:before,
+.row:after {
+  content: '\0020';
+  display: block;
+  overflow: hidden;
+  visibility: hidden;
+  width: 0;
+  height: 0;
+}
+.row:after,
+.clearfix:after {
+  clear: both;
+}
+
+.row, .clearfix {
+  zoom: 1;
+}
+
+.clear {
+  clear: both;
+  display: block;
+  overflow: hidden;
+  visibility: hidden;
+  width: 0;
+  height: 0;
+}
diff --git a/docs/images.html b/docs/images.html new file mode 100644 index 0000000..1e80ee3 --- /dev/null +++ b/docs/images.html @@ -0,0 +1,8 @@ +images | Ribs +

Images

+

Scale an image in line with the responsive grid

+ +
.scale-with-grid {
+  max-width: 100%;
+  height: auto;
+}
diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..78d23a4 --- /dev/null +++ b/docs/index.html @@ -0,0 +1,70 @@ +Ribs +

Ribs v1.0.7

+
+

Ribs is the evolution of Skeleton, the original author seems to have disappeared and/or lost interest in the project, and my colleagues and I use this an awful lot.

+
+

What's different here?

+

My fork has one significant difference over the original project, that is a full SCSS conversion to make use of more modern technologies and to expose a lot more customisation options quickly and easily.

+

As time goes by, and with enough interest I will gradually extend the available options and build a packaging tool that allows you to select all of your customisations in a graphical way - thinking something along the lines of jQuery themeroller, just a bit more lightweight.

+

Some Key Differences

+
    +
  • Maintained!
    • +
  • Configurable grid
    • +
  • Default colours, borders, fonts, margins, padding etc are all configurable variables
    • +
  • Normalized elements, rather than the old school CSS resets
    • +
  • Sensible Table styles
    • +
  • Taking advantage of sass, the majority of selector repetition is removed in favour of mixins that generate the selectors
    • +
  • Many issues flagged by CSSLint refactored to resolve them
    • +
  • The original CSS has been split out into individual files and heavily refactored to tidy it up
    • +
  • Golden ratio default line heights
    • +
  • A selection of useful mixins
    • +
  • Push and pull column classes
    • +
  • Bower installable
    • +
+

Installing

+

Either clone this repository and drop in manually, or install from bower:

+

Build status

+

The project is set up to build and run csslint on Travis:

+
    +
  • Master: Build Status
    • +
  • Development: Build Status
    • +
+

Building

+

I've added grunt configuration to the repository for those of you that use it.

+

There are 4 main tasks added: + default - Runs Sass to create the stylesheet from the source files, places the output in ./css then creates a minified version of the file and places it into the same directory + test - This runs CSSLint over the output CSS file (Note that there are a few bits in the original skeleton css that I still need to fix!) + minify - This literally just runs cssmin, useful if you've edited Ribs.css directly + watch - This will monitor the scss directory for changes and automatically rebuild the css and minified css (Effectively the same as sass --watch but with added minification)

+

To get started with the grunt tools

+

You need to install grunt-cli globally (npm install -g grunt-cli) to start with, otherwise you wont have a runner! +Then following that, from the root dir of this project, run npm install which will set up all of the required dependencies.

+

You should be good to go.

+

Changelog

+
    +
  • Oct 10, 2013 - (v1.0.7) Documented the differences between the original skeleton project and Ribs, Updated normalize to 2.1.3
    • +
  • Aug 7, 2013 - (v1.0.6) Some additional variables, grid push and pull
    • +
  • Jul 17, 2013 - (v1.0.5) Some additional variables, some base table styling
    • +
  • Jul 14, 2013 - (v1.0.4) Removed reset and replaced it with normalize
    • +
  • May 30, 2013 - (v1.0.3) Added 1.5 * font size line heights to headings and paragraphs
    • +
  • May 28, 2013 - Rename project to Ribs
    • +
  • May 17, 2013 - (v1.0.2) Travis CI build configuration, and minor refactor to remove as many of the warnings from CSSLint as was feasible to do - MAY CAUSE REGRESSIONS.
    • +
  • May 17, 2013 - (v1.0.1) Added grunt build tools
    • +
  • Apr 23, 2013 - (v1.0.0) Skeleton SCSS v1.0 - Additional variable conversions, changes based on feedback to the original project and bower submission.
    • +
  • Jan 31, 2013 - Completed SCSS conversion of Skeleton 1.2.
    • +
+

Contributers

+
    +
  • Nick Pack
    • +
  • Matthew Copeland
    • +
  • Miles Z. Sterrett
    • +
  • AtomicPages LLC
    • +
  • Toby Vervaart
    • +
  • Dave Gamache
    • +
+

Licence

+

Copyright (c) 2013 Nick Pack +Based on the original skeleton project which is Copyright 2011 Dave Gamache +Licensed under the MIT license.

+

Bitdeli Badge

+
diff --git a/docs/links.html b/docs/links.html new file mode 100644 index 0000000..3eaa8c8 --- /dev/null +++ b/docs/links.html @@ -0,0 +1,16 @@ +links | Ribs +
diff --git a/docs/lists.html b/docs/lists.html new file mode 100644 index 0000000..51b4c12 --- /dev/null +++ b/docs/lists.html @@ -0,0 +1,48 @@ +lists | Ribs +

Lists

+
ul, ol {
+  margin: $list_margin;
+}
+
+ul {
+  list-style: $ul_list_style;
+}
+
+ol {
+  list-style: $ol_list_style;
+}
+
+ol, ul.square, ul.circle, ul.disc {
+  margin: $list_styled_margin;
+}
+
+ul.square {
+  list-style: square $list_styled_position;
+}
+
+ul.circle {
+  list-style: circle $list_styled_position;
+}
+
+ul.disc {
+  list-style: disc $list_styled_position;
+}
+
+ul ul, ul ol,
+ol ol, ol ul {
+  margin: $nested_list_margin;
+  font-size: $nested_list_font_size;
+}
+
+li {
+  line-height: $list_item_line_height;
+  margin: $list_item_margin;
+}
+
+.large li {
+  line-height: $list_large_line_height;
+}
+
+li p {
+  line-height: $list_item_paragraph_line_height;
+}
diff --git a/docs/mixins.html b/docs/mixins.html new file mode 100644 index 0000000..367d058 --- /dev/null +++ b/docs/mixins.html @@ -0,0 +1,216 @@ +mixins | Ribs +
+
@mixin button_border($rightbottom, $topleft) {
+  border: $rightbottom;
+  border-top: $topleft;
+  border-left: $topleft;
+}
+
+@mixin col-count($colCount, $colSpacing) {
+  -webkit-column-count: $colCount;
+  -webkit-column-gap: $colSpacing;
+  -moz-column-count: $colCount;
+  -moz-column-gap: $colSpacing;
+  column-count: $colCount;
+  column-gap: $colSpacing;
+}
+
+@mixin size($height, $width) {
+  height: $height;
+  width: $width;
+}
+
+@mixin square($size) {
+  @include size($size, $size);
+}
+
+@mixin border-radius($radius) {
+  -webkit-border-radius: $radius;
+  -moz-border-radius: $radius;
+  border-radius: $radius;
+}
+
+@mixin border-top-left-radius($radius) {
+  -webkit-border-top-left-radius: $radius;
+  -moz-border-radius-topleft: $radius;
+  border-top-left-radius: $radius;
+}
+
+@mixin border-top-right-radius($radius) {
+  -webkit-border-top-right-radius: $radius;
+  -moz-border-radius-topright: $radius;
+  border-top-right-radius: $radius;
+}
+
+@mixin border-bottom-right-radius($radius) {
+  -webkit-border-bottom-right-radius: $radius;
+  -moz-border-radius-bottomright: $radius;
+  border-bottom-right-radius: $radius;
+}
+
+@mixin border-bottom-left-radius($radius) {
+  -webkit-border-bottom-left-radius: $radius;
+  -moz-border-radius-bottomleft: $radius;
+  border-bottom-left-radius: $radius;
+}
+
+@mixin border-top-radius($radius) {
+  @include border-top-right-radius($radius);
+  @include border-top-left-radius($radius);
+}
+
+@mixin border-right-radius($radius) {
+  @include border-top-right-radius($radius);
+  @include border-bottom-right-radius($radius);
+}
+
+@mixin border-bottom-radius($radius) {
+  @include border-bottom-right-radius($radius);
+  @include border-bottom-left-radius($radius);
+}
+
+@mixin border-left-radius($radius) {
+  @include border-top-left-radius($radius);
+  @include border-bottom-left-radius($radius);
+}
+
+@mixin background-size($size){
+  -webkit-background-size: $size;
+  -moz-background-size: $size;
+  -o-background-size: $size;
+  background-size: $size;
+}
+
+@mixin box-sizing($boxsize) {
+  -webkit-box-sizing: $boxsize;
+  -moz-box-sizing: $boxsize;
+  -ms-box-sizing: $boxsize; 
+  -o-box-sizing: $boxsize; 
+  -khtml-box-sizing: $boxsize;
+  box-sizing: $boxsize;
+}
+
+@mixin horizontal-gradient($startColour, $endColour) {
+  background-color: $fallback_hex_gradient_bg;
+  background-image: linear-gradient(to right, $startColour, $endColour);
+  background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColour), to($endColour));
+  background-image: -webkit-linear-gradient(left, $startColour, $endColour);
+  background-image: -moz-linear-gradient(left, $startColour, $endColour);
+  background-image: -o-linear-gradient(left, $startColour, $endColour);
+  background-repeat: repeat-x;
+}
+
+@mixin vertical-gradient($startColour, $endColour) {
+  background-color: $fallback_hex_gradient_bg;
+  background-color: mix($startColour, $endColour, 60%);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColour), to($endColour));
+  background-image: -webkit-linear-gradient(top, $startColour, $endColour);
+  background-image: -moz-linear-gradient(top, $startColour, $endColour);
+  background-image: -o-linear-gradient(top, $startColour, $endColour);
+  background-image: linear-gradient(to bottom, $startColour, $endColour);
+  background-repeat: repeat-x;
+}
+
+@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;
+}
+
+@mixin grid($grid-container-width, $grid-column-count:$column-count, $grid-gutter:$gutter) {
+
+  $grid-column-width: $grid-container-width/$grid-column-count;
+
+  .container {
+    width: $grid-container-width;
+
+    .one         { width: (1*$grid-column-width - $grid-gutter); }
+    .two         { width: (2*$grid-column-width - $grid-gutter); }
+    .three       { width: (3*$grid-column-width - $grid-gutter); }
+    .four        { width: (4*$grid-column-width - $grid-gutter); }
+    .five        { width: (5*$grid-column-width - $grid-gutter); }
+    .six         { width: (6*$grid-column-width - $grid-gutter); }
+    .seven       { width: (7*$grid-column-width - $grid-gutter); }
+    .eight       { width: (8*$grid-column-width - $grid-gutter); }
+    .nine        { width: (9*$grid-column-width - $grid-gutter); }
+    .ten         { width: (10*$grid-column-width - $grid-gutter); }
+    .eleven      { width: (11*$grid-column-width - $grid-gutter); }
+    .twelve      { width: (12*$grid-column-width - $grid-gutter); }
+    .thirteen    { width: (13*$grid-column-width - $grid-gutter); }
+    .fourteen    { width: (14*$grid-column-width - $grid-gutter); }
+    .fifteen     { width: (15*$grid-column-width - $grid-gutter); }
+    .sixteen     { width: (16*$grid-column-width - $grid-gutter); }
+    .one-third   { width: ($grid-container-width/3) - $grid-gutter; }
+    .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; }
+
+    .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; }
+    .offset-by-five     { padding-left: $grid-column-width*5; }
+    .offset-by-six      { padding-left: $grid-column-width*6; }
+    .offset-by-seven    { padding-left: $grid-column-width*7; }
+    .offset-by-eight    { padding-left: $grid-column-width*8; }
+    .offset-by-nine     { padding-left: $grid-column-width*9; }
+    .offset-by-ten      { padding-left: $grid-column-width*10; }
+    .offset-by-eleven   { padding-left: $grid-column-width*11; }
+    .offset-by-twelve   { padding-left: $grid-column-width*12; }
+    .offset-by-thirteen { padding-left: $grid-column-width*13; }
+    .offset-by-fourteen { padding-left: $grid-column-width*14; }
+    .offset-by-fifteen  { padding-left: $grid-column-width*15; }
+
+    .pull-by-one      { left: -$grid-column-width; }
+    .pull-by-two      { left: -$grid-column-width*2; }
+    .pull-by-three    { left: -$grid-column-width*3; }
+    .pull-by-four     { left: -$grid-column-width*4; }
+    .pull-by-five     { left: -$grid-column-width*5; }
+    .pull-by-six      { left: -$grid-column-width*6; }
+    .pull-by-seven    { left: -$grid-column-width*7; }
+    .pull-by-eight    { left: -$grid-column-width*8; }
+    .pull-by-nine     { left: -$grid-column-width*9; }
+    .pull-by-ten      { left: -$grid-column-width*10; }
+    .pull-by-eleven   { left: -$grid-column-width*11; }
+    .pull-by-twelve   { left: -$grid-column-width*12; }
+    .pull-by-thirteen { left: -$grid-column-width*13; }
+    .pull-by-fourteen { left: -$grid-column-width*14; }
+    .pull-by-fifteen  { left: -$grid-column-width*15; }
+
+    .push-by-one      { left: $grid-column-width; }
+    .push-by-two      { left: $grid-column-width*2; }
+    .push-by-three    { left: $grid-column-width*3; }
+    .push-by-four     { left: $grid-column-width*4; }
+    .push-by-five     { left: $grid-column-width*5; }
+    .push-by-six      { left: $grid-column-width*6; }
+    .push-by-seven    { left: $grid-column-width*7; }
+    .push-by-eight    { left: $grid-column-width*8; }
+    .push-by-nine     { left: $grid-column-width*9; }
+    .push-by-ten      { left: $grid-column-width*10; }
+    .push-by-eleven   { left: $grid-column-width*11; }
+    .push-by-twelve   { left: $grid-column-width*12; }
+    .push-by-thirteen { left: $grid-column-width*13; }
+    .push-by-fourteen { left: $grid-column-width*14; }
+    .push-by-fifteen  { left: $grid-column-width*15; }
+  }
+}
+
+@mixin clearfix {
+  clear: both;
+  display: block;
+  overflow: hidden;
+  visibility: hidden;
+  width: 0;
+  height: 0;
+}
+
+@mixin visible {
+  display: block !important; 
+  visibility: visible;
+}
+
+@mixin hidden {
+  display: none !important; 
+  visibility: hidden;
+}
diff --git a/docs/normalize-normalize.html b/docs/normalize-normalize.html new file mode 100644 index 0000000..597912e --- /dev/null +++ b/docs/normalize-normalize.html @@ -0,0 +1,332 @@ +normalize | Ribs +

! normalize.css v2.1.3 | MIT License | git.io/normalize

+

==========================================================================

+

HTML5 display definitions

+

+ Correct block display not defined in IE 8/9.

+

+ Correct inline-block display not defined in IE 8/9.

+

+ Prevent modern browsers from displaying audio without controls. + * Remove excess height in iOS 5 devices.

+

+ Address [hidden] styling not present in IE 8/9. + * Hide the template element in IE, Safari, and Firefox < 22.

+

==========================================================================

+
article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+    display: block;
+}
+
+
+audio,
+canvas,
+video {
+    display: inline-block;
+}
+
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+
+[hidden],
+template {
+    display: none;
+}

Base

+

+ 1. Set default font family to sans-serif. + 2. Prevent iOS text size adjust after orientation change, without disabling + user zoom.

+

+ Remove default margin.

+

==========================================================================

+
html {
+    font-family: sans-serif; /* 1 */
+    -ms-text-size-adjust: 100%; /* 2 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+
+body {
+    margin: 0;
+}

Typography

+

+ Address variable h1 font-size and margin within section and article + * contexts in Firefox 4+, Safari 5, and Chrome.

+

+ Address styling not present in IE 8/9, Safari 5, and Chrome.

+

+ Address style set to bolder in Firefox 4+, Safari 5, and Chrome.

+

+ Address styling not present in Safari 5 and Chrome.

+

+ Address differences between Firefox and other browsers.

+

+ Address styling not present in IE 8/9.

+

+ Correct font family set oddly in Safari 5 and Chrome.

+

+ Improve readability of pre-formatted text in all browsers.

+

+ Set consistent quote types.

+

+ Address inconsistent and variable font size in all browsers.

+

+ Prevent sub and sup affecting line-height in all browsers.

+

==========================================================================

+
h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+
+abbr[title] {
+    border-bottom: 1px dotted;
+}
+
+
+b,
+strong {
+    font-weight: bold;
+}
+
+
+dfn {
+    font-style: italic;
+}
+
+
+hr {
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+    height: 0;
+}
+
+
+mark {
+    background: #ff0;
+    color: #000;
+}
+
+
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, serif;
+    font-size: 1em;
+}
+
+
+pre {
+    white-space: pre-wrap;
+}
+
+
+q {
+    quotes: "\201C" "\201D" "\2018" "\2019";
+}
+
+
+small {
+    font-size: 80%;
+}
+
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}

Embedded content

+

+ Remove border when inside a element in IE 8/9.

+

+ Correct overflow displayed oddly in IE 9.

+

==========================================================================

+
img {
+    border: 0;
+}
+
+
+svg:not(:root) {
+    overflow: hidden;
+}

Figures

+

+ Address margin not present in IE 8/9 and Safari 5.

+

==========================================================================

+
figure {
+    margin: 0;
+}

Forms

+

+ Define consistent border, margin, and padding.

+

+ 1. Correct color not being inherited in IE 8/9. + * 2. Remove padding so people aren't caught out if they zero out fieldsets.

+

+ 1. Correct font family not being inherited in all browsers. + 2. Correct font size not being inherited in all browsers. + 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.

+

+ Address Firefox 4+ setting line-height on input using !important in + * the UA stylesheet.

+

+ Address inconsistent text-transform inheritance for button and select. + All other form control elements do not inherit text-transform values. + Correct button style inheritance in Chrome, Safari 5+, and IE 8+. + * Correct select style inheritance in Firefox 4+ and Opera.

+

+ 1. Avoid the WebKit bug in Android 4.0. where (2) destroys native audio + and video controls. + 2. Correct inability to style clickable input types in iOS. + 3. Improve usability and consistency of cursor style between image-type + * input and others.

+

+ Re-set default cursor for disabled elements.

+

+ 1. Address box sizing set to content-box in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10.

+

+ 1. Address appearance set to searchfield in Safari 5 and Chrome. + 2. Address box-sizing set to border-box in Safari 5 and Chrome + (include -moz to future-proof).

+

+ Remove inner padding and search cancel button in Safari 5 and Chrome + * on OS X.

+

+ Remove inner padding and border in Firefox 4+.

+

+ 1. Remove default vertical scrollbar in IE 8/9. + * 2. Improve readability and alignment in all browsers.

+

==========================================================================

+
fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+
+legend {
+    border: 0; /* 1 */
+    padding: 0; /* 2 */
+}
+
+
+button,
+input,
+select,
+textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 2 */
+    margin: 0; /* 3 */
+}
+
+
+button,
+input {
+    line-height: normal;
+}
+
+
+button,
+select {
+    text-transform: none;
+}
+
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button; /* 2 */
+    cursor: pointer; /* 3 */
+}
+
+
+button[disabled],
+html input[disabled] {
+    cursor: default;
+}
+
+
+input[type="checkbox"],
+input[type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+}
+
+
+input[type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box; /* 2 */
+    box-sizing: content-box;
+}
+
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+
+textarea {
+    overflow: auto; /* 1 */
+    vertical-align: top; /* 2 */
+}

Tables

+

+ Remove most spacing between table cells.

+
table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
diff --git a/docs/tables.html b/docs/tables.html new file mode 100644 index 0000000..4721996 --- /dev/null +++ b/docs/tables.html @@ -0,0 +1,241 @@ +tables | Ribs +

Tables

+
+

The majority of concepts here are shamelessly borrowed from Bootstrap and amended to fit + https://raw.github.com/twitter/bootstrap/master/less/tables.less

+

Basic table style

+ + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1NickPack@nickpack
+ +

Condensed table style

+ + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1NickPack@nickpack
+ +

Bordered table style

+ + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1NickPack@nickpack
+ +

Striped table style

+ + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1NickPack@nickpack
+ +

Hover table style

+ + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1NickPack@nickpack
+
table {
+  max-width: 100%;
+  background: $table_background;
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+  margin: $table_margin;
+  th,
+  td {
+    padding: $table_td_th_padding;
+    line-height: $table_td_th_line_height;
+    text-align: left;
+    vertical-align: top;
+    border-top: 1px solid $table_border_colour;
+  }
+  th {
+    font-weight: bold;
+  }
+
+  thead th {
+    vertical-align: bottom;
+  }
+
+  caption thead tr:first-child th,
+  caption thead tr:first-child td,
+  colgroup thead tr:first-child th,
+  colgroup thead tr:first-child td,
+  thead:first-child tr:first-child th,
+  thead:first-child tr:first-child td {
+    border-top: 0;
+  }
+
+  tbody tbody {
+    border-top: 2px solid $table_border_colour;
+  }
+
+  table {
+    background: $table_background;
+  }
+}
+
+.table-condensed {
+  th,
+  td {
+    padding: $table_condensed_padding;
+  }
+}
+
+.table-bordered {
+  border: 1px solid $table_border_colour;
+  border-collapse: separate;
+  border-left: 0;
+  @include border-radius($table_border_radius);
+  th,
+  td {
+    border-left: 1px solid $table_border_colour;
+  }
+
+  caption thead tr:first-child th,
+  caption tbody tr:first-child th,
+  caption tbody tr:first-child td,
+  colgroup thead tr:first-child th,
+  colgroup tbody tr:first-child th,
+  colgroup tbody tr:first-child td,
+  thead:first-child tr:first-child th,
+  tbody:first-child tr:first-child th,
+  tbody:first-child tr:first-child td {
+    border-top: 0;
+  }
+
+  thead:first-child tr:first-child > th:first-child,
+  tbody:first-child tr:first-child > td:first-child,
+  tbody:first-child tr:first-child > th:first-child {
+    @include border-top-left-radius($table_border_radius);
+  }
+
+  thead:first-child tr:first-child > th:last-child,
+  tbody:first-child tr:first-child > td:last-child,
+  tbody:first-child tr:first-child > th:last-child {
+    @include border-top-right-radius($table_border_radius);
+  }
+
+  thead:last-child tr:last-child > th:first-child,
+  tbody:last-child tr:last-child > td:first-child,
+  tbody:last-child tr:last-child > th:first-child,
+  tfoot:last-child tr:last-child > td:first-child,
+  tfoot:last-child tr:last-child > th:first-child {
+    @include border-bottom-left-radius($table_border_radius);
+  }
+
+  thead:last-child tr:last-child > th:last-child,
+  tbody:last-child tr:last-child > td:last-child,
+  tbody:last-child tr:last-child > th:last-child,
+  tfoot:last-child tr:last-child > td:last-child,
+  tfoot:last-child tr:last-child > th:last-child {
+    @include border-bottom-right-radius($table_border_radius);
+  }
+
+  tfoot tbody:last-child tr:last-child td:first-child {
+    @include border-bottom-left-radius(0);
+  }
+  tfoot tbody:last-child tr:last-child td:last-child {
+    @include border-bottom-right-radius(0);
+  }
+
+  caption thead tr:first-child th:first-child,
+  caption tbody tr:first-child td:first-child,
+  colgroup thead tr:first-child th:first-child,
+  colgroup tbody tr:first-child td:first-child {
+    @include border-top-left-radius($table_border_radius);
+  }
+  caption thead tr:first-child th:last-child,
+  caption tbody tr:first-child td:last-child,
+  colgroup thead tr:first-child th:last-child,
+  colgroup tbody tr:first-child td:last-child {
+    @include border-top-right-radius($table_border_radius);
+  }
+
+}
+
+.table-striped {
+  tbody {
+    > tr:nth-child(odd) > td,
+    > tr:nth-child(odd) > th {
+      background-color: $table_alt_colour;
+    }
+  }
+}
+
+.table-hover {
+  tbody {
+    tr:hover > td,
+    tr:hover > th {
+      background-color: $table_hover_colour;
+    }
+  }
+}
diff --git a/docs/typography.html b/docs/typography.html new file mode 100644 index 0000000..2becd26 --- /dev/null +++ b/docs/typography.html @@ -0,0 +1,116 @@ +typography | Ribs +

Typography

+
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+  font-weight: inherit;
+}
+
+h1 {
+  color: $heading_colour;
+  font-family: $heading_font;
+  font-weight: $heading_font_weight;
+  font-size: $heading1_font_size;
+  line-height: $heading1_line_height;
+  margin: $heading1_margin;
+}
+
+h2 {
+  color: $heading_colour;
+  font-family: $heading_font;
+  font-weight: $heading_font_weight;
+  font-size: $heading2_font_size;
+  line-height: $heading2_line_height;
+  margin: $heading2_margin;
+}
+
+h3 {
+  color: $heading_colour;
+  font-family: $heading_font;
+  font-weight: $heading_font_weight;
+  font-size: $heading3_font_size;
+  line-height: $heading3_line_height;
+  margin: $heading3_margin;
+}
+
+h4 {
+  color: $heading_colour;
+  font-family: $heading_font;
+  font-weight: $heading_font_weight;
+  font-size: $heading4_font_size;
+  line-height: $heading4_line_height;
+  margin: $heading4_margin;
+}
+
+h5 {
+  color: $heading_colour;
+  font-family: $heading_font;
+  font-weight: $heading_font_weight;
+  font-size: $heading5_font_size;
+  line-height: $heading5_line_height;
+}
+
+h6 {
+  color: $heading_colour;
+  font-family: $heading_font;
+  font-weight: $heading_font_weight;
+  font-size: $heading6_font_size;
+  line-height: $heading6_line_height;
+}
+
+.subheader {
+  color: $subheader_colour;
+}
+
+p {
+  margin: $paragraph_margin;
+  line-height: $paragraph_line_height;
+}
+
+p img {
+  margin: $paragraph_image_margin;
+}
+
+.lead {
+  font-size: $paragraph_lead_font_size;
+  line-height: $paragraph_lead_line_height;
+  color: $paragraph_lead_colour;
+}
+
+em {
+  font-style: $em_font_style;
+}
+
+strong {
+  font-weight: bold;
+  color: $strong_colour;
+}
+
+small {
+  font-size: $small_font_size;
+}
+
+blockquote, blockquote p {
+  font-size: $blockquote_font_size;
+  line-height: $blockquote_line_height;
+  color: $blockquote_colour;
+  font-style: $blockquote_font_style;
+}
+
+blockquote {
+  margin: $blockquote_margin;
+  padding: $blockquote_padding;
+  border-left: $blockquote_border_left;
+}
+
+blockquote cite {
+  display: block;
+  font-size: $blockquote_cite_font_size;
+  color: $blockquote_cite_colour;
+}
+
+blockquote cite:before {
+  content: "\2014 \0020";
+}
+
+blockquote cite a, blockquote cite a:visited, blockquote cite a:visited {
+  color: $blockquote_cite_link_colour;
+}
diff --git a/docs/variables.html b/docs/variables.html new file mode 100644 index 0000000..772d1eb --- /dev/null +++ b/docs/variables.html @@ -0,0 +1,157 @@ +variables | Ribs +

Grid System Variables

+
$gutter: 20px;
+$column-count: 16;
+$desktop-container-width: 960px;
+$tablet-container-width: 768px;
+$mobile-container-width: 90%;
+$mobile-column-width: 100%;
+$base_font_size: 14px;

Breakpoint max widths - you probably dont need to change these

+
$tablet-max-breakpoint: $desktop-container-width - 1;
+$mobile-max-breakpoint: $tablet-container-width - 1;

Form Variables

+

button

+

button hover

+

Button active

+

Form input

+

Form checkbox

+

Form input focus

+

select

+

fieldset/label/legend

+

Textarea

+
$form_element_font: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+$form_button_border_radius: 3px;
+$form_button_border_topleft: 1px solid #ccc;
+$form_button_border_rightbottom: 1px solid #aaa;
+$form_button_text_colour: #444;
+$form_button_text_shadow: 0 1px rgba(255, 255, 255, .75);
+$form_button_gradient_start: rgba(255, 255, 255, .2);
+$form_button_gradient_end: rgba(0, 0, 0, .2);
+$form_button_font_size: 11px;
+$form_button_padding: 8px 10px;
+$form_button_line_height: normal;
+
+$form_button_hover_border_topleft: 1px solid #aaa;
+$form_button_hover_border_rightbottom: 1px solid #888;
+$form_button_hover_gradient_start: rgba(255, 255, 255, .3);
+$form_button_hover_gradient_end: rgba(0, 0, 0, .3);
+$form_button_hover_text_colour: #222;
+
+$form_button_active_border: 1px solid #666;
+$form_button_active_gradient_start: rgba(255, 255, 255, .2);
+$form_button_active_gradient_end: rgba(0, 0, 0, .2);
+
+$form_input_border: 1px solid #ccc;
+$form_input_text_colour: #777;
+$form_input_background: #fff;
+$form_input_padding: 6px 4px;
+$form_input_width: 210px;
+$form_input_max_width: 100%;
+$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_label_legend_font_weight: normal;
+$form_fieldset_margin: 0 0 20px 0;
+
+$legend_font_weight: bold;
+$legend_font_size: $form_input_font_size;
+
+$form_textarea_min_height: 60px;

Headings

+
$heading_font: "Georgia", "Times New Roman", serif;
+$heading_font_weight: normal;
+$heading_colour: #181818;
+
+$heading1_font_size: 46px;
+$heading1_line_height: $heading1_font_size * 1.5;
+$heading1_margin: 0 0 14px 0;
+
+$heading2_font_size: 35px;
+$heading2_line_height: $heading2_font_size * 1.5;
+$heading2_margin: 0 0 10px 0;
+
+$heading3_font_size: 28px;
+$heading3_line_height: $heading3_font_size * 1.5;
+$heading3_margin: 0 0 8px 0;
+
+$heading4_font_size: 21px;
+$heading4_line_height: $heading4_font_size * 1.5;
+$heading4_margin: 0 0 4px 0;
+
+$heading5_font_size: 17px;
+$heading5_line_height: $heading5_font_size * 1.5;
+
+$heading6_font_size: 14px;
+$heading6_line_height: $heading6_font_size * 1.5;

Subheading

+
$subheader_colour: #777;

Paragraphs

+
$paragraph_margin: 0 0 20px 0;
+$paragraph_image_margin: 0;
+$paragraph_line_height: $base_font_size * 1.5;
+
+$paragraph_lead_font_size: 21px;
+$paragraph_lead_line_height: $paragraph_lead_font_size * 1.5;
+$paragraph_lead_colour: #777;

General Text

+
$em_font_style: italic;
+
+$small_font_size: 80%;
+
+$strong_colour: #333;

Blockquotes

+
$blockquote_colour: #777;
+$blockquote_border_left: 1px solid #ddd;
+$blockquote_cite_colour: #555;
+$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;

Horizontal rules

+
$hr_border: solid #ddd;
+$hr_border_width: 1px 0 0;
+$hr_margin: 10px 0 30px;

Main font

+
$body_font_family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;

Lists

+
$list_margin: 0 0 20px 0;
+$list_large_line_height: 21px;
+
+$ul_list_style: none outside;
+$ol_list_style: decimal;
+
+$list_styled_margin: 0 0 0 10px; // 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%;
+
+$list_item_line_height: 18px;
+$list_item_margin: 0 0 12px 0;
+$list_item_paragraph_line_height: 21px;
+
+$fallback_hex_gradient_bg: #CCC;

Tables

+
$table_background: #FFF;
+$table_margin: 10px 0;
+$table_td_th_padding: 8px;
+$table_td_th_line_height: 21px;
+$table_border_colour: #CCC;
+$table_border_radius: 3px;
+$table_alt_colour: #EFEFEF;
+$table_hover_colour: #999;
+$table_condensed_padding: 4px 5px;
diff --git a/package.json b/package.json index 5c7557d..0d69e6e 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "grunt-contrib-watch": "~0.3.1", "grunt-contrib-sass": "~0.3.0", "grunt-contrib-csslint": "~0.1.1", + "grunt-styleguide": "~0.2.6", "grunt-contrib-cssmin": "~0.5.0" } } diff --git a/src/scss/Ribs.scss b/src/scss/Ribs.scss index 9e3c352..467a86f 100644 --- a/src/scss/Ribs.scss +++ b/src/scss/Ribs.scss @@ -1,16 +1,19 @@ /* -* Ribs -* Skeleton is Copyright 2011, Dave Gamache -* -* Ribs is the evolution of Skeleton by Nick Pack -* Free to use under the MIT license. -* http://github.com/nickpack/Ribs + #Ribs + ## Copyright Information + Skeleton is Copyright 2011, Dave Gamache + + Ribs is the evolution of Skeleton by Nick Pack + Free to use under the MIT license. + http://github.com/nickpack/Ribs */ +// #Import of normalize, variables and mixins @import "_variables"; @import "normalize/_normalize"; @import "_mixins"; +// #General body style body { background: #fff; font: 14px/21px $body_font_family; @@ -19,6 +22,7 @@ body { -ms-text-size-adjust: 100%; } +// #General horizontal rule style hr { border: $hr_border; border-width: $hr_border_width; @@ -27,6 +31,7 @@ hr { height: 0; } +// #Import of ribs functionality @import "_grid"; @import "_typography"; @import "_links"; @@ -35,17 +40,18 @@ hr { @import "_images"; @import "_tables"; -// Smaller than standard 960 (devices and browsers) +// #Example Media Queries +// ##Media Query - Smaller than standard 960 (devices and browsers) @media only screen and (max-width: 959px) {} -// Tablet Portrait size to standard 960 (devices and browsers) +// ##Media Query - 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) +// ##Media Query - All Mobile Sizes (devices and browser) @media only screen and (max-width: 767px) {} -// Mobile Landscape Size to Tablet Portrait (devices and browsers) +// ##Media Query - 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) -@media only screen and (max-width: 479px) {} \ No newline at end of file +// ##Media Query - Mobile Portrait Size to Mobile Landscape Size (devices and browsers) +@media only screen and (max-width: 479px) {} diff --git a/src/scss/_forms.scss b/src/scss/_forms.scss index 12ef76c..82d04bc 100644 --- a/src/scss/_forms.scss +++ b/src/scss/_forms.scss @@ -1,5 +1,5 @@ // #Buttons -// ================================================== +// ##Normal .button, button, input[type="submit"], @@ -21,6 +21,7 @@ input[type="button"] { font-family: $form_element_font; } +// ##Hover .button:hover, button:hover, input[type="submit"]:hover, @@ -31,6 +32,7 @@ input[type="button"]:hover { @include button_border($form_button_hover_border_rightbottom, $form_button_hover_border_topleft); } +// ##Active .button:active, button:active, input[type="submit"]:active, @@ -40,6 +42,7 @@ input[type="button"]:active { border: $form_button_active_border; } +// ##Full width .button .full-width, button.full-width, input[type="submit"].full-width, @@ -51,7 +54,7 @@ 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; @@ -59,8 +62,11 @@ input::-moz-focus-inner { } // #Forms -// ================================================== +/* + ##General margins (all sides) + Applied to both form, and fieldset +*/ form { margin: $form_fieldset_margin; } @@ -69,12 +75,20 @@ fieldset { margin: $form_fieldset_margin; } +/* + ##Search/URL fields + Make these behave as text fields +*/ input[type="search"], input[type="url"] { -webkit-appearance: textfield; - -moz-appearance: textfield; + -moz-appearance: textfield; } +/* + ##General form element styles, border etc. + Applied to all except checkboxes +*/ input[type="text"], input[type="password"], input[type="email"], @@ -96,11 +110,19 @@ select { background: $form_input_background; } +/* + ##Select boxes + Padding and width applied from settings +*/ select { padding: $form_input_select_padding; width: $form_input_select_width; } +/* + ##Form element focus styles + Applied to all except checkboxes and selects +*/ input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, @@ -115,10 +137,12 @@ textarea:focus { @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 textarea { min-height: $form_textarea_min_height; } +// ##Label/legend font settings label, legend { display: block; @@ -126,13 +150,18 @@ legend { font-size: $legend_font_size; } +// ##Checkbox display input[type="checkbox"] { display: $form_input_checkbox_display; } +/* + ##Spans inside legends, or labels + Alters font size, weight and colour based on variables +*/ label span, legend span { font-weight: $form_label_legend_font_weight; font-size: $form_input_font_size; color: $form_label_legend_colour; -} \ No newline at end of file +} diff --git a/src/scss/_grid.scss b/src/scss/_grid.scss index 6b3dd85..4fa1a19 100644 --- a/src/scss/_grid.scss +++ b/src/scss/_grid.scss @@ -1,12 +1,39 @@ +/* +#Grid System + +
One
+
Eleven
+
Two
+
Ten
+
Three
+
Nine
+
Four
+
Eight
+
Five
+
Seven
+
Six
+
Six
+
Seven
+
Five
+
Eight
+
Four
+
Nine
+
Three
+
Ten
+
Two
+
Eleven
+
One
+*/ + .container { position: relative; margin: 0 auto; padding: 0; - & .alpha { - margin-left: 0; + & .alpha { + margin-left: 0; } - & .omega { - margin-right: 0; + & .omega { + margin-right: 0; } } @@ -21,30 +48,36 @@ margin-left: 0; } -.row { - margin-bottom: $gutter; +.row { + margin-bottom: $gutter; } + +// #Desktop Grid @include grid($desktop-container-width, $column-count, $gutter); //----------------------------------------------------------------------- -// #Tablet -@media only screen and (max-width: 959px) { +// #Tablet Grid +@media only screen and (max-width: $tablet-max-breakpoint) { @include grid($tablet-container-width, $column-count, $gutter); - .container { - width: $tablet-container-width; - & .alpha { - margin-right: 10px; + .container { + width: $tablet-container-width; + & .alpha { + margin-right: 10px; } - & .omega { - margin-left: 10px; + & .omega { + margin-left: 10px; } } } //-------------------------------------------------------------------- -// #Mobile -@media only screen and (max-width: 767px) { +/* + #Mobile Grid + Every column element in this grid is the total grid width +*/ + +@media only screen and (max-width: $mobile-max-breakpoint) { .container { width: $mobile-container-width; & .one, @@ -67,7 +100,7 @@ & .two-thirds, & .one-half, & .one-quarter, - & .three-quarters + & .three-quarters { width: $mobile-column-width; } .column, .columns { @@ -93,18 +126,28 @@ } // #Clearing -// ================================================== -.container:after { - content: "\0020"; - display: block; - height: 0; - clear: both; - visibility: hidden; +/* + ##Auto-applied clearfix for .container elements + + ```
+ This element has clearfix applied in browsers that support the :after css selector +
``` +*/ +.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
+/* + ##General use clearfix class + ```
This haz clearfix
``` + Use this clearfix class on parent to clear nested columns, or: + wrap each row of columns in a ```
...
``` +*/ .clearfix:before, .clearfix:after, .row:before, @@ -114,19 +157,28 @@ overflow: hidden; visibility: hidden; width: 0; - height: 0; + height: 0; } +/* + ##Auto-applied clearfix for .row elements + ```
+ This element has clearfix applied in browsers that support the :after css selector +
``` +*/ .row:after, .clearfix:after { - clear: both; + clear: both; } .row, .clearfix { - zoom: 1; + zoom: 1; } -// You can also use a
to clear columns +/* + ##Block level clear + You can also use a ```
``` to clear columns +*/ .clear { clear: both; display: block; diff --git a/src/scss/_images.scss b/src/scss/_images.scss index af1e6d7..2cb309d 100644 --- a/src/scss/_images.scss +++ b/src/scss/_images.scss @@ -1,7 +1,11 @@ // #Images -// ================================================== - +/* + ## Scale an image in line with the responsive grid + ``` + + ``` +*/ .scale-with-grid { max-width: 100%; height: auto; -} \ No newline at end of file +} diff --git a/src/scss/_links.scss b/src/scss/_links.scss index bf5b643..5e880dc 100644 --- a/src/scss/_links.scss +++ b/src/scss/_links.scss @@ -1,5 +1,4 @@ // #Links -// ================================================== a, a:visited { color: $link_colour; text-decoration: $link_decoration; @@ -13,4 +12,4 @@ a:hover, a:focus { p a, p a:visited { line-height: inherit; -} \ No newline at end of file +} diff --git a/src/scss/_lists.scss b/src/scss/_lists.scss index 96b5546..6578c1a 100644 --- a/src/scss/_lists.scss +++ b/src/scss/_lists.scss @@ -1,5 +1,4 @@ // #Lists -// ================================================== ul, ol { margin: $list_margin; } @@ -45,4 +44,4 @@ li { li p { line-height: $list_item_paragraph_line_height; -} \ No newline at end of file +} diff --git a/src/scss/_tables.scss b/src/scss/_tables.scss index 5774d85..4371f2c 100644 --- a/src/scss/_tables.scss +++ b/src/scss/_tables.scss @@ -4,6 +4,28 @@ // The majority of concepts here are shamelessly borrowed from Bootstrap and amended to fit // https://raw.github.com/twitter/bootstrap/master/less/tables.less +/* +##Basic table style + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1NickPack@nickpack
+*/ table { max-width: 100%; background: $table_background; @@ -45,6 +67,28 @@ table { } } +/* +##Condensed table style + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1NickPack@nickpack
+*/ .table-condensed { th, td { @@ -52,6 +96,28 @@ table { } } +/* +##Bordered table style + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1NickPack@nickpack
+*/ .table-bordered { border: 1px solid $table_border_colour; border-collapse: separate; @@ -61,7 +127,7 @@ table { td { border-left: 1px solid $table_border_colour; } - + caption thead tr:first-child th, caption tbody tr:first-child th, caption tbody tr:first-child td, @@ -73,7 +139,7 @@ table { tbody:first-child tr:first-child td { border-top: 0; } - + thead:first-child tr:first-child > th:first-child, tbody:first-child tr:first-child > td:first-child, tbody:first-child tr:first-child > th:first-child { @@ -85,7 +151,7 @@ table { tbody:first-child tr:first-child > th:last-child { @include border-top-right-radius($table_border_radius); } - + thead:last-child tr:last-child > th:first-child, tbody:last-child tr:last-child > td:first-child, tbody:last-child tr:last-child > th:first-child, @@ -93,7 +159,7 @@ table { tfoot:last-child tr:last-child > th:first-child { @include border-bottom-left-radius($table_border_radius); } - + thead:last-child tr:last-child > th:last-child, tbody:last-child tr:last-child > td:last-child, tbody:last-child tr:last-child > th:last-child, @@ -124,6 +190,28 @@ table { } +/* +##Striped table style + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1NickPack@nickpack
+*/ .table-striped { tbody { > tr:nth-child(odd) > td, @@ -133,6 +221,28 @@ table { } } +/* +##Hover table style + + + + + + + + + + + + + + + + + + +
#First NameLast NameUsername
1NickPack@nickpack
+*/ .table-hover { tbody { tr:hover > td, diff --git a/src/scss/_typography.scss b/src/scss/_typography.scss index da98c74..88d2d5c 100644 --- a/src/scss/_typography.scss +++ b/src/scss/_typography.scss @@ -1,5 +1,4 @@ // #Typography -// ================================================== h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; @@ -114,4 +113,4 @@ blockquote cite:before { blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: $blockquote_cite_link_colour; -} \ No newline at end of file +} diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 82fb935..3b80d17 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -1,3 +1,4 @@ +// #Grid System Variables $gutter: 20px; $column-count: 16; $desktop-container-width: 960px; @@ -6,8 +7,14 @@ $mobile-container-width: 90%; $mobile-column-width: 100%; $base_font_size: 14px; +// #Breakpoint max widths - you probably dont need to change these +$tablet-max-breakpoint: $desktop-container-width - 1; +$mobile-max-breakpoint: $tablet-container-width - 1; + +// #Form Variables $form_element_font: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; +// ##button $form_button_border_radius: 3px; $form_button_border_topleft: 1px solid #ccc; $form_button_border_rightbottom: 1px solid #aaa; @@ -19,16 +26,19 @@ $form_button_font_size: 11px; $form_button_padding: 8px 10px; $form_button_line_height: normal; +// ##button hover $form_button_hover_border_topleft: 1px solid #aaa; $form_button_hover_border_rightbottom: 1px solid #888; $form_button_hover_gradient_start: rgba(255, 255, 255, .3); $form_button_hover_gradient_end: rgba(0, 0, 0, .3); $form_button_hover_text_colour: #222; +// ##Button active $form_button_active_border: 1px solid #666; $form_button_active_gradient_start: rgba(255, 255, 255, .2); $form_button_active_gradient_end: rgba(0, 0, 0, .2); +// ##Form input $form_input_border: 1px solid #ccc; $form_input_text_colour: #777; $form_input_background: #fff; @@ -40,8 +50,10 @@ $form_input_margin: 0 0 20px 0; $form_input_font_size: 13px; $form_input_border_radius: 2px; +// ##Form checkbox $form_input_checkbox_display: inline; +// ##Form input focus $form_input_focus_border: 1px solid #aaa; $form_input_focus_text_colour: #444; $form_input_focus_outline: none; @@ -50,8 +62,10 @@ $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); +// ##select $form_input_select_padding: 10px; +// ##fieldset/label/legend $form_label_legend_colour: #444; $form_label_legend_font_weight: normal; $form_fieldset_margin: 0 0 20px 0; @@ -59,14 +73,17 @@ $form_fieldset_margin: 0 0 20px 0; $legend_font_weight: bold; $legend_font_size: $form_input_font_size; +// ##Textarea $form_textarea_min_height: 60px; +// #Links $link_colour: #333; $link_decoration: underline; $link_outline: 0; $link_hover_colour: #000; $link_hover_decoration: none; +// #Headings $heading_font: "Georgia", "Times New Roman", serif; $heading_font_weight: normal; $heading_colour: #181818; @@ -93,8 +110,10 @@ $heading5_line_height: $heading5_font_size * 1.5; $heading6_font_size: 14px; $heading6_line_height: $heading6_font_size * 1.5; +// #Subheading $subheader_colour: #777; +// #Paragraphs $paragraph_margin: 0 0 20px 0; $paragraph_image_margin: 0; $paragraph_line_height: $base_font_size * 1.5; @@ -103,12 +122,14 @@ $paragraph_lead_font_size: 21px; $paragraph_lead_line_height: $paragraph_lead_font_size * 1.5; $paragraph_lead_colour: #777; +// #General Text $em_font_style: italic; $small_font_size: 80%; $strong_colour: #333; +// #Blockquotes $blockquote_colour: #777; $blockquote_border_left: 1px solid #ddd; $blockquote_cite_colour: #555; @@ -120,12 +141,15 @@ $blockquote_font_size: 17px; $blockquote_line_height: 24px; $blockquote_font_style: italic; +// #Horizontal rules $hr_border: solid #ddd; $hr_border_width: 1px 0 0; $hr_margin: 10px 0 30px; +// #Main font $body_font_family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; +// #Lists $list_margin: 0 0 20px 0; $list_large_line_height: 21px; @@ -133,7 +157,7 @@ $ul_list_style: none outside; $ol_list_style: decimal; $list_styled_margin: 0 0 0 10px; // ul, ol with disc, square etc. -$list_styled_position: outside; // List item bullet position +$list_styled_position: outside; // List item bullet position $nested_list_margin: 4px 0 5px 30px; $nested_list_font_size: 90%; @@ -144,6 +168,7 @@ $list_item_paragraph_line_height: 21px; $fallback_hex_gradient_bg: #CCC; +// #Tables $table_background: #FFF; $table_margin: 10px 0; $table_td_th_padding: 8px;