BitGoblin/Bones
1
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

Initial inline and API level docs, fixed stupid oversight in grid handling

Browse Source
This commit is contained in:
Nick Pack
2013-10-10 18:35:26 +01:00
parent 76f84c66d5
commit 4dfd022f79
24 changed files with 2074 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Gruntfile.js
+21 -3
View File
@@ -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']);
};
};
build/css/Ribs.css
+201 -6
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; }
docs/Ribs.html
+46
View File
File diff suppressed because one or more lines are too long
docs/forms.html
+153
View File
File diff suppressed because one or more lines are too long
docs/grid.html
+164
View File
File diff suppressed because one or more lines are too long
docs/images.html
+8
View File
File diff suppressed because one or more lines are too long
docs/index.html
+70
View File
File diff suppressed because one or more lines are too long
docs/links.html
+16
View File
File diff suppressed because one or more lines are too long
docs/lists.html
+48
View File
File diff suppressed because one or more lines are too long
docs/mixins.html
+216
View File
File diff suppressed because one or more lines are too long
docs/normalize-normalize.html
+332
View File
File diff suppressed because one or more lines are too long
docs/tables.html
+241
View File
File diff suppressed because one or more lines are too long
docs/typography.html
+116
View File
File diff suppressed because one or more lines are too long
docs/variables.html
+157
View File
File diff suppressed because one or more lines are too long
package.json
+1
View File
@@ -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"
}
}
src/scss/Ribs.scss
+18 -12
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 only screen and (max-width: 479px) {}
// ##Media Query - Mobile Portrait Size to Mobile Landscape Size (devices and browsers)
@media only screen and (max-width: 479px) {}
src/scss/_forms.scss
+34 -5
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;
-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;
}
}
src/scss/_grid.scss
+82 -30
View File
@@ -1,12 +1,39 @@
/*
#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;
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
```<div class="container">
This element has clearfix applied in browsers that support the :after css selector
</div>```
*/
.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">
/*
##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,
@@ -114,19 +157,28 @@
overflow: hidden;
visibility: hidden;
width: 0;
height: 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;
clear: both;
}
.row, .clearfix {
zoom: 1;
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;
src/scss/_images.scss
+7 -3
View File
@@ -1,7 +1,11 @@
// #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;
}
}
src/scss/_links.scss
+1 -2
View File
@@ -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;
}
}
src/scss/_lists.scss
+1 -2
View File
@@ -1,5 +1,4 @@
// #Lists
// ==================================================
ul, ol {
margin: $list_margin;
}
@@ -45,4 +44,4 @@ li {
li p {
line-height: $list_item_paragraph_line_height;
}
}
src/scss/_tables.scss
+114 -4
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;
@@ -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
<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,
src/scss/_typography.scss
+1 -2
View File
@@ -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;
}
}
src/scss/_variables.scss
+26 -1
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;
@@ -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;