Merge branch 'release/1.0.8'

This commit is contained in:
Nick Pack 2013-10-10 18:39:07 +01:00
commit aafd3bac23
26 changed files with 2080 additions and 74 deletions

View File

@ -35,14 +35,32 @@ 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']);

View File

@ -1,4 +1,4 @@
Ribs v1.0.7
Ribs v1.0.8
=============
> 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.
@ -50,6 +50,7 @@ Then following that, from the root dir of this project, run `npm install` which
You should be good to go.
## Changelog
* Oct 10, 2013 - (v1.0.8) Initial inline documentation, styledocco based docs generation, fixed breakpoint oversight on media queries for tablet and mobile
* 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

View File

@ -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
<div class="one column alpha">One</div>
<div class="eleven columns omega">Eleven</div>
<div class="two columns alpha">Two</div>
<div class="ten columns omega">Ten</div>
<div class="three columns alpha">Three</div>
<div class="nine columns omega">Nine</div>
<div class="four columns alpha">Four</div>
<div class="eight columns omega">Eight</div>
<div class="five columns alpha">Five</div>
<div class="seven columns omega">Seven</div>
<div class="six columns alpha">Six</div>
<div class="six columns omega">Six</div>
<div class="seven columns alpha">Seven</div>
<div class="five columns omega">Five</div>
<div class="eight columns alpha">Eight</div>
<div class="four columns omega">Four</div>
<div class="nine columns alpha">Nine</div>
<div class="three columns omega">Three</div>
<div class="ten columns alpha">Ten</div>
<div class="two columns omega">Two</div>
<div class="eleven columns alpha">Eleven</div>
<div class="one column omega">One</div>
*/
.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
```<div class="container">
This element has clearfix applied in browsers that support the :after css selector
</div>```
*/
.container:after {
content: "\0020";
display: block;
@ -688,6 +726,12 @@ hr {
clear: both;
visibility: hidden; }
/*
##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>```
*/
.clearfix:before,
.clearfix:after,
.row:before,
@ -699,6 +743,13 @@ hr {
width: 0;
height: 0; }
/*
##Auto-applied clearfix for .row elements
```<div class="row">
This element has clearfix applied in browsers that support the :after css selector
</div>```
*/
.row:after,
.clearfix:after {
clear: both; }
@ -706,6 +757,10 @@ hr {
.row, .clearfix {
zoom: 1; }
/*
##Block level clear
You can also use a ```<br class="clear">``` 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
```
<img src="foo.jpg" title="Scaling image of Foo" class="scale-with-grid">
```
*/
.scale-with-grid {
max-width: 100%;
height: auto; }
/*
##Basic table style
<table>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Nick</td>
<td>Pack</td>
<td>@nickpack</td>
</tr>
</tbody>
</table>
*/
table {
max-width: 100%;
background: white;
@ -1041,10 +1148,54 @@ table {
table table {
background: white; }
/*
##Condensed table style
<table class="table-condensed">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Nick</td>
<td>Pack</td>
<td>@nickpack</td>
</tr>
</tbody>
</table>
*/
.table-condensed th,
.table-condensed td {
padding: 4px 5px; }
/*
##Bordered table style
<table class="table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Nick</td>
<td>Pack</td>
<td>@nickpack</td>
</tr>
</tbody>
</table>
*/
.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
<table class="table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Nick</td>
<td>Pack</td>
<td>@nickpack</td>
</tr>
</tbody>
</table>
*/
.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th {
background-color: #efefef; }
/*
##Hover table style
<table class="table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Nick</td>
<td>Pack</td>
<td>@nickpack</td>
</tr>
</tbody>
</table>
*/
.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > th {
background-color: #999999; }

View File

@ -1,7 +1,7 @@
{
"name": "Ribs",
"version": "1.0.7",
"main": "css/Ribs.css",
"version": "1.0.8",
"main": "build/css/Ribs.css",
"ignore": [
"**/.*",
"node_modules",

46
docs/Ribs.html Normal file

File diff suppressed because one or more lines are too long

153
docs/forms.html Normal file

File diff suppressed because one or more lines are too long

164
docs/grid.html Normal file

File diff suppressed because one or more lines are too long

8
docs/images.html Normal file

File diff suppressed because one or more lines are too long

71
docs/index.html Normal file

File diff suppressed because one or more lines are too long

16
docs/links.html Normal file

File diff suppressed because one or more lines are too long

48
docs/lists.html Normal file

File diff suppressed because one or more lines are too long

216
docs/mixins.html Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

241
docs/tables.html Normal file

File diff suppressed because one or more lines are too long

116
docs/typography.html Normal file

File diff suppressed because one or more lines are too long

157
docs/variables.html Normal file

File diff suppressed because one or more lines are too long

View File

@ -2,7 +2,7 @@
"name": "Ribs",
"title": "Ribs",
"description": "The evolution of Skeleton: A Beautiful Boilerplate for Responsive, Mobile-Friendly Development.",
"version": "1.0.7",
"version": "1.0.8",
"homepage": "https://github.com/nickpack/Ribs",
"author": {
"name": "Nick Pack",
@ -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"
}
}

View File

@ -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 Query - Mobile Portrait Size to Mobile Landscape Size (devices and browsers)
@media only screen and (max-width: 479px) {}

View File

@ -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;
}
/*
##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,10 +150,15 @@ 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;

View File

@ -1,3 +1,30 @@
/*
#Grid System
<div class="one column alpha">One</div>
<div class="eleven columns omega">Eleven</div>
<div class="two columns alpha">Two</div>
<div class="ten columns omega">Ten</div>
<div class="three columns alpha">Three</div>
<div class="nine columns omega">Nine</div>
<div class="four columns alpha">Four</div>
<div class="eight columns omega">Eight</div>
<div class="five columns alpha">Five</div>
<div class="seven columns omega">Seven</div>
<div class="six columns alpha">Six</div>
<div class="six columns omega">Six</div>
<div class="seven columns alpha">Seven</div>
<div class="five columns omega">Five</div>
<div class="eight columns alpha">Eight</div>
<div class="four columns omega">Four</div>
<div class="nine columns alpha">Nine</div>
<div class="three columns omega">Three</div>
<div class="ten columns alpha">Ten</div>
<div class="two columns omega">Two</div>
<div class="eleven columns alpha">Eleven</div>
<div class="one column omega">One</div>
*/
.container {
position: relative;
margin: 0 auto;
@ -25,11 +52,13 @@
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 {
@ -43,8 +72,12 @@
}
}
//--------------------------------------------------------------------
// #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,
@ -93,8 +126,14 @@
}
// #Clearing
// ==================================================
/*
##Auto-applied clearfix for .container elements
```<div class="container">
This element has clearfix applied in browsers that support the :after css selector
</div>```
*/
.container:after {
content: "\0020";
display: block;
@ -103,8 +142,12 @@
visibility: hidden;
}
// Use clearfix class on parent to clear nested columns,
// or wrap each row of columns in a <div class="row">
/*
##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>```
*/
.clearfix:before,
.clearfix:after,
.row:before,
@ -116,7 +159,13 @@
width: 0;
height: 0;
}
/*
##Auto-applied clearfix for .row elements
```<div class="row">
This element has clearfix applied in browsers that support the :after css selector
</div>```
*/
.row:after,
.clearfix:after {
clear: both;
@ -126,7 +175,10 @@
zoom: 1;
}
// You can also use a <br class="clear" /> to clear columns
/*
##Block level clear
You can also use a ```<br class="clear">``` to clear columns
*/
.clear {
clear: both;
display: block;

View File

@ -1,6 +1,10 @@
// #Images
// ==================================================
/*
## Scale an image in line with the responsive grid
```
<img src="foo.jpg" title="Scaling image of Foo" class="scale-with-grid">
```
*/
.scale-with-grid {
max-width: 100%;
height: auto;

View File

@ -1,5 +1,4 @@
// #Links
// ==================================================
a, a:visited {
color: $link_colour;
text-decoration: $link_decoration;

View File

@ -1,5 +1,4 @@
// #Lists
// ==================================================
ul, ol {
margin: $list_margin;
}

View File

@ -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
<table>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Nick</td>
<td>Pack</td>
<td>@nickpack</td>
</tr>
</tbody>
</table>
*/
table {
max-width: 100%;
background: $table_background;
@ -45,6 +67,28 @@ table {
}
}
/*
##Condensed table style
<table class="table-condensed">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Nick</td>
<td>Pack</td>
<td>@nickpack</td>
</tr>
</tbody>
</table>
*/
.table-condensed {
th,
td {
@ -52,6 +96,28 @@ table {
}
}
/*
##Bordered table style
<table class="table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Nick</td>
<td>Pack</td>
<td>@nickpack</td>
</tr>
</tbody>
</table>
*/
.table-bordered {
border: 1px solid $table_border_colour;
border-collapse: separate;
@ -124,6 +190,28 @@ table {
}
/*
##Striped table style
<table class="table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Nick</td>
<td>Pack</td>
<td>@nickpack</td>
</tr>
</tbody>
</table>
*/
.table-striped {
tbody {
> tr:nth-child(odd) > td,
@ -133,6 +221,28 @@ table {
}
}
/*
##Hover table style
<table class="table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Nick</td>
<td>Pack</td>
<td>@nickpack</td>
</tr>
</tbody>
</table>
*/
.table-hover {
tbody {
tr:hover > td,

View File

@ -1,5 +1,4 @@
// #Typography
// ==================================================
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
font-weight: inherit;

View File

@ -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;
@ -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;