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

Merge branch 'release/1.0.8'

Browse Source
This commit is contained in:
Nick Pack
2013-10-10 18:39:07 +01:00
parent 462ff164d7 677f9c85af
commit aafd3bac23
26 changed files with 2080 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
Gruntfile.js
View File

@@ -35,16 +35,34 @@ module.exports = function(grunt) {
watch: { watch: {
files: 'src/scss/**/*', files: 'src/scss/**/*',
tasks: ['sass', 'csslint:scssoutput', 'cssmin'] 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-csslint');
grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-styleguide');
grunt.registerTask('docs', ['sass', 'styleguide']);
grunt.registerTask('test', ['sass', 'csslint:scssoutput']); grunt.registerTask('test', ['sass', 'csslint:scssoutput']);
grunt.registerTask('minify', ['cssmin']); grunt.registerTask('minify', ['cssmin']);
grunt.registerTask('default', ['sass', 'cssmin']); grunt.registerTask('default', ['sass', 'cssmin']);
}; };

3
README.md
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. > 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. You should be good to go.
## Changelog ## 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 * 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 * 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 17, 2013 - (v1.0.5) Some additional variables, some base table styling

207
build/css/Ribs.css
View File

@@ -1,10 +1,11 @@
/* /*
* Ribs #Ribs
* Skeleton is Copyright 2011, Dave Gamache ## Copyright Information
* Skeleton is Copyright 2011, Dave Gamache
* Ribs is the evolution of Skeleton by Nick Pack
* Free to use under the MIT license. Ribs is the evolution of Skeleton by Nick Pack
* http://github.com/nickpack/Ribs Free to use under the MIT license.
http://github.com/nickpack/Ribs
*/ */
/* normalize.css v2.1.3 | MIT License | git.io/normalize */ /* normalize.css v2.1.3 | MIT License | git.io/normalize */
/* ========================================================================== /* ==========================================================================
@@ -360,6 +361,32 @@ hr {
margin: 10px 0 30px; margin: 10px 0 30px;
height: 0; } 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 { .container {
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
@@ -658,6 +685,10 @@ hr {
margin-right: 10px; } margin-right: 10px; }
.container .omega { .container .omega {
margin-left: 10px; } } margin-left: 10px; } }
/*
#Mobile Grid
Every column element in this grid is the total grid width
*/
@media only screen and (max-width: 767px) { @media only screen and (max-width: 767px) {
.container { .container {
width: 90%; } width: 90%; }
@@ -681,6 +712,13 @@ hr {
.container .offset-by-fourteen, .container .offset-by-fourteen,
.container .offset-by-fifteen { .container .offset-by-fifteen {
padding-left: 0; } } 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 { .container:after {
content: "\0020"; content: "\0020";
display: block; display: block;
@@ -688,6 +726,12 @@ hr {
clear: both; clear: both;
visibility: hidden; } 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:before,
.clearfix:after, .clearfix:after,
.row:before, .row:before,
@@ -699,6 +743,13 @@ hr {
width: 0; 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, .row:after,
.clearfix:after { .clearfix:after {
clear: both; } clear: both; }
@@ -706,6 +757,10 @@ hr {
.row, .clearfix { .row, .clearfix {
zoom: 1; } zoom: 1; }
/*
##Block level clear
You can also use a ```<br class="clear">``` to clear columns
*/
.clear { .clear {
clear: both; clear: both;
display: block; display: block;
@@ -937,17 +992,29 @@ input::-moz-focus-inner {
border: 0; border: 0;
padding: 0; } padding: 0; }
/*
##General margins (all sides)
Applied to both form, and fieldset
*/
form { form {
margin: 0 0 20px 0; } margin: 0 0 20px 0; }
fieldset { fieldset {
margin: 0 0 20px 0; } margin: 0 0 20px 0; }
/*
##Search/URL fields
Make these behave as text fields
*/
input[type="search"], input[type="search"],
input[type="url"] { input[type="url"] {
-webkit-appearance: textfield; -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="text"],
input[type="password"], input[type="password"],
input[type="email"], input[type="email"],
@@ -970,10 +1037,18 @@ select {
margin: 0 0 20px 0; margin: 0 0 20px 0;
background: white; } background: white; }
/*
##Select boxes
Padding and width applied from settings
*/
select { select {
padding: 10px; padding: 10px;
width: 220px; } width: 220px; }
/*
##Form element focus styles
Applied to all except checkboxes and selects
*/
input[type="text"]:focus, input[type="text"]:focus,
input[type="password"]:focus, input[type="password"]:focus,
input[type="email"]:focus, input[type="email"]:focus,
@@ -1001,16 +1076,48 @@ legend {
input[type="checkbox"] { input[type="checkbox"] {
display: inline; } display: inline; }
/*
##Spans inside legends, or labels
Alters font size, weight and colour based on variables
*/
label span, label span,
legend span { legend span {
font-weight: normal; font-weight: normal;
font-size: 13px; font-size: 13px;
color: #444444; } 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 { .scale-with-grid {
max-width: 100%; max-width: 100%;
height: auto; } 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 { table {
max-width: 100%; max-width: 100%;
background: white; background: white;
@@ -1041,10 +1148,54 @@ table {
table table { table table {
background: white; } 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 th,
.table-condensed td { .table-condensed td {
padding: 4px 5px; } 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 { .table-bordered {
border: 1px solid #cccccc; border: 1px solid #cccccc;
border-collapse: separate; border-collapse: separate;
@@ -1116,10 +1267,54 @@ table {
-moz-border-radius-topright: 3px; -moz-border-radius-topright: 3px;
border-top-right-radius: 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) > td,
.table-striped tbody > tr:nth-child(odd) > th { .table-striped tbody > tr:nth-child(odd) > th {
background-color: #efefef; } 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 > td,
.table-hover tbody tr:hover > th { .table-hover tbody tr:hover > th {
background-color: #999999; } background-color: #999999; }

4
component.json
View File

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

46
docs/Ribs.html Normal file
View File

File diff suppressed because one or more lines are too long

153
docs/forms.html Normal file
View File

File diff suppressed because one or more lines are too long

164
docs/grid.html Normal file
View File

File diff suppressed because one or more lines are too long

8
docs/images.html Normal file
View File

File diff suppressed because one or more lines are too long

71
docs/index.html Normal file
View File

File diff suppressed because one or more lines are too long

16
docs/links.html Normal file
View File

File diff suppressed because one or more lines are too long

48
docs/lists.html Normal file
View File

File diff suppressed because one or more lines are too long

216
docs/mixins.html Normal file
View File

File diff suppressed because one or more lines are too long

332
docs/normalize-normalize.html Normal file
View File

File diff suppressed because one or more lines are too long

241
docs/tables.html Normal file
View File

File diff suppressed because one or more lines are too long

116
docs/typography.html Normal file
View File

File diff suppressed because one or more lines are too long

157
docs/variables.html Normal file
View File

File diff suppressed because one or more lines are too long

3
package.json
View File

@@ -2,7 +2,7 @@
"name": "Ribs", "name": "Ribs",
"title": "Ribs", "title": "Ribs",
"description": "The evolution of Skeleton: A Beautiful Boilerplate for Responsive, Mobile-Friendly Development.", "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", "homepage": "https://github.com/nickpack/Ribs",
"author": { "author": {
"name": "Nick Pack", "name": "Nick Pack",
@@ -34,6 +34,7 @@
"grunt-contrib-watch": "~0.3.1", "grunt-contrib-watch": "~0.3.1",
"grunt-contrib-sass": "~0.3.0", "grunt-contrib-sass": "~0.3.0",
"grunt-contrib-csslint": "~0.1.1", "grunt-contrib-csslint": "~0.1.1",
"grunt-styleguide": "~0.2.6",
"grunt-contrib-cssmin": "~0.5.0" "grunt-contrib-cssmin": "~0.5.0"
} }
} }

30
src/scss/Ribs.scss
View File

@@ -1,16 +1,19 @@
/* /*
* Ribs #Ribs
* Skeleton is Copyright 2011, Dave Gamache ## Copyright Information
* Skeleton is Copyright 2011, Dave Gamache
* Ribs is the evolution of Skeleton by Nick Pack
* Free to use under the MIT license. Ribs is the evolution of Skeleton by Nick Pack
* http://github.com/nickpack/Ribs Free to use under the MIT license.
http://github.com/nickpack/Ribs
*/ */
// #Import of normalize, variables and mixins
@import "_variables"; @import "_variables";
@import "normalize/_normalize"; @import "normalize/_normalize";
@import "_mixins"; @import "_mixins";
// #General body style
body { body {
background: #fff; background: #fff;
font: 14px/21px $body_font_family; font: 14px/21px $body_font_family;
@@ -19,6 +22,7 @@ body {
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
} }
// #General horizontal rule style
hr { hr {
border: $hr_border; border: $hr_border;
border-width: $hr_border_width; border-width: $hr_border_width;
@@ -27,6 +31,7 @@ hr {
height: 0; height: 0;
} }
// #Import of ribs functionality
@import "_grid"; @import "_grid";
@import "_typography"; @import "_typography";
@import "_links"; @import "_links";
@@ -35,17 +40,18 @@ hr {
@import "_images"; @import "_images";
@import "_tables"; @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) {} @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) {} @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) {} @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) {} @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) {} @media only screen and (max-width: 479px) {}

39
src/scss/_forms.scss
View File

@@ -1,5 +1,5 @@
// #Buttons // #Buttons
// ================================================== // ##Normal
.button, .button,
button, button,
input[type="submit"], input[type="submit"],
@@ -21,6 +21,7 @@ input[type="button"] {
font-family: $form_element_font; font-family: $form_element_font;
} }
// ##Hover
.button:hover, .button:hover,
button:hover, button:hover,
input[type="submit"]: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); @include button_border($form_button_hover_border_rightbottom, $form_button_hover_border_topleft);
} }
// ##Active
.button:active, .button:active,
button:active, button:active,
input[type="submit"]:active, input[type="submit"]:active,
@@ -40,6 +42,7 @@ input[type="button"]:active {
border: $form_button_active_border; border: $form_button_active_border;
} }
// ##Full width
.button .full-width, .button .full-width,
button.full-width, button.full-width,
input[type="submit"].full-width, input[type="submit"].full-width,
@@ -51,7 +54,7 @@ input[type="button"].full-width {
text-align: center; text-align: center;
} }
// Fix for odd Mozilla border & padding issues // ##Fix for odd Mozilla border & padding issues
button::-moz-focus-inner, button::-moz-focus-inner,
input::-moz-focus-inner { input::-moz-focus-inner {
border: 0; border: 0;
@@ -59,8 +62,11 @@ input::-moz-focus-inner {
} }
// #Forms // #Forms
// ==================================================
/*
##General margins (all sides)
Applied to both form, and fieldset
*/
form { form {
margin: $form_fieldset_margin; margin: $form_fieldset_margin;
} }
@@ -69,12 +75,20 @@ fieldset {
margin: $form_fieldset_margin; margin: $form_fieldset_margin;
} }
/*
##Search/URL fields
Make these behave as text fields
*/
input[type="search"], input[type="search"],
input[type="url"] { input[type="url"] {
-webkit-appearance: textfield; -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="text"],
input[type="password"], input[type="password"],
input[type="email"], input[type="email"],
@@ -96,11 +110,19 @@ select {
background: $form_input_background; background: $form_input_background;
} }
/*
##Select boxes
Padding and width applied from settings
*/
select { select {
padding: $form_input_select_padding; padding: $form_input_select_padding;
width: $form_input_select_width; width: $form_input_select_width;
} }
/*
##Form element focus styles
Applied to all except checkboxes and selects
*/
input[type="text"]:focus, input[type="text"]:focus,
input[type="password"]:focus, input[type="password"]:focus,
input[type="email"]: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) @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 { textarea {
min-height: $form_textarea_min_height; min-height: $form_textarea_min_height;
} }
// ##Label/legend font settings
label, label,
legend { legend {
display: block; display: block;
@@ -126,13 +150,18 @@ legend {
font-size: $legend_font_size; font-size: $legend_font_size;
} }
// ##Checkbox display
input[type="checkbox"] { input[type="checkbox"] {
display: $form_input_checkbox_display; display: $form_input_checkbox_display;
} }
/*
##Spans inside legends, or labels
Alters font size, weight and colour based on variables
*/
label span, label span,
legend span { legend span {
font-weight: $form_label_legend_font_weight; font-weight: $form_label_legend_font_weight;
font-size: $form_input_font_size; font-size: $form_input_font_size;
color: $form_label_legend_colour; color: $form_label_legend_colour;
} }

112
src/scss/_grid.scss
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 { .container {
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
padding: 0; padding: 0;
& .alpha { & .alpha {
margin-left: 0; margin-left: 0;
} }
& .omega { & .omega {
margin-right: 0; margin-right: 0;
} }
} }
@@ -21,30 +48,36 @@
margin-left: 0; margin-left: 0;
} }
.row { .row {
margin-bottom: $gutter; margin-bottom: $gutter;
} }
// #Desktop Grid
@include grid($desktop-container-width, $column-count, $gutter); @include grid($desktop-container-width, $column-count, $gutter);
//----------------------------------------------------------------------- //-----------------------------------------------------------------------
// #Tablet // #Tablet Grid
@media only screen and (max-width: 959px) { @media only screen and (max-width: $tablet-max-breakpoint) {
@include grid($tablet-container-width, $column-count, $gutter); @include grid($tablet-container-width, $column-count, $gutter);
.container { .container {
width: $tablet-container-width; width: $tablet-container-width;
& .alpha { & .alpha {
margin-right: 10px; margin-right: 10px;
} }
& .omega { & .omega {
margin-left: 10px; 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 { .container {
width: $mobile-container-width; width: $mobile-container-width;
& .one, & .one,
@@ -67,7 +100,7 @@
& .two-thirds, & .two-thirds,
& .one-half, & .one-half,
& .one-quarter, & .one-quarter,
& .three-quarters & .three-quarters
{ width: $mobile-column-width; } { width: $mobile-column-width; }
.column, .columns { .column, .columns {
@@ -93,18 +126,28 @@
} }
// #Clearing // #Clearing
// ==================================================
.container:after { /*
content: "\0020"; ##Auto-applied clearfix for .container elements
display: block;
height: 0; ```<div class="container">
clear: both; This element has clearfix applied in browsers that support the :after css selector
visibility: hidden; </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:before,
.clearfix:after, .clearfix:after,
.row:before, .row:before,
@@ -114,19 +157,28 @@
overflow: hidden; overflow: hidden;
visibility: hidden; visibility: hidden;
width: 0; 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, .row:after,
.clearfix:after { .clearfix:after {
clear: both; clear: both;
} }
.row, .clearfix { .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 {
clear: both; clear: both;
display: block; display: block;

10
src/scss/_images.scss
View File

@@ -1,7 +1,11 @@
// #Images // #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 { .scale-with-grid {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
} }

3
src/scss/_links.scss
View File

@@ -1,5 +1,4 @@
// #Links // #Links
// ==================================================
a, a:visited { a, a:visited {
color: $link_colour; color: $link_colour;
text-decoration: $link_decoration; text-decoration: $link_decoration;
@@ -13,4 +12,4 @@ a:hover, a:focus {
p a, p a:visited { p a, p a:visited {
line-height: inherit; line-height: inherit;
} }

3
src/scss/_lists.scss
View File

@@ -1,5 +1,4 @@
// #Lists // #Lists
// ==================================================
ul, ol { ul, ol {
margin: $list_margin; margin: $list_margin;
} }
@@ -45,4 +44,4 @@ li {
li p { li p {
line-height: $list_item_paragraph_line_height; line-height: $list_item_paragraph_line_height;
} }

118
src/scss/_tables.scss
View File

@@ -4,6 +4,28 @@
// The majority of concepts here are shamelessly borrowed from Bootstrap and amended to fit // The majority of concepts here are shamelessly borrowed from Bootstrap and amended to fit
// https://raw.github.com/twitter/bootstrap/master/less/tables.less // 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 { table {
max-width: 100%; max-width: 100%;
background: $table_background; 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 { .table-condensed {
th, th,
td { 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 { .table-bordered {
border: 1px solid $table_border_colour; border: 1px solid $table_border_colour;
border-collapse: separate; border-collapse: separate;
@@ -61,7 +127,7 @@ table {
td { td {
border-left: 1px solid $table_border_colour; border-left: 1px solid $table_border_colour;
} }
caption thead tr:first-child th, caption thead tr:first-child th,
caption tbody tr:first-child th, caption tbody tr:first-child th,
caption tbody tr:first-child td, caption tbody tr:first-child td,
@@ -73,7 +139,7 @@ table {
tbody:first-child tr:first-child td { tbody:first-child tr:first-child td {
border-top: 0; border-top: 0;
} }
thead:first-child tr:first-child > th:first-child, thead:first-child tr:first-child > th:first-child,
tbody:first-child tr:first-child > td:first-child, tbody:first-child tr:first-child > td:first-child,
tbody:first-child tr:first-child > th: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 { tbody:first-child tr:first-child > th:last-child {
@include border-top-right-radius($table_border_radius); @include border-top-right-radius($table_border_radius);
} }
thead:last-child tr:last-child > th:first-child, thead:last-child tr:last-child > th:first-child,
tbody:last-child tr:last-child > td:first-child, tbody:last-child tr:last-child > td:first-child,
tbody:last-child tr:last-child > th: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 { tfoot:last-child tr:last-child > th:first-child {
@include border-bottom-left-radius($table_border_radius); @include border-bottom-left-radius($table_border_radius);
} }
thead:last-child tr:last-child > th:last-child, thead:last-child tr:last-child > th:last-child,
tbody:last-child tr:last-child > td:last-child, tbody:last-child tr:last-child > td:last-child,
tbody:last-child tr:last-child > th: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 { .table-striped {
tbody { tbody {
> tr:nth-child(odd) > td, > 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 { .table-hover {
tbody { tbody {
tr:hover > td, tr:hover > td,

3
src/scss/_typography.scss
View File

@@ -1,5 +1,4 @@
// #Typography // #Typography
// ==================================================
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
font-weight: inherit; font-weight: inherit;
@@ -114,4 +113,4 @@ blockquote cite:before {
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { blockquote cite a, blockquote cite a:visited, blockquote cite a:visited {
color: $blockquote_cite_link_colour; color: $blockquote_cite_link_colour;
} }

27
src/scss/_variables.scss
View File

@@ -1,3 +1,4 @@
// #Grid System Variables
$gutter: 20px; $gutter: 20px;
$column-count: 16; $column-count: 16;
$desktop-container-width: 960px; $desktop-container-width: 960px;
@@ -6,8 +7,14 @@ $mobile-container-width: 90%;
$mobile-column-width: 100%; $mobile-column-width: 100%;
$base_font_size: 14px; $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; $form_element_font: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
// ##button
$form_button_border_radius: 3px; $form_button_border_radius: 3px;
$form_button_border_topleft: 1px solid #ccc; $form_button_border_topleft: 1px solid #ccc;
$form_button_border_rightbottom: 1px solid #aaa; $form_button_border_rightbottom: 1px solid #aaa;
@@ -19,16 +26,19 @@ $form_button_font_size: 11px;
$form_button_padding: 8px 10px; $form_button_padding: 8px 10px;
$form_button_line_height: normal; $form_button_line_height: normal;
// ##button hover
$form_button_hover_border_topleft: 1px solid #aaa; $form_button_hover_border_topleft: 1px solid #aaa;
$form_button_hover_border_rightbottom: 1px solid #888; $form_button_hover_border_rightbottom: 1px solid #888;
$form_button_hover_gradient_start: rgba(255, 255, 255, .3); $form_button_hover_gradient_start: rgba(255, 255, 255, .3);
$form_button_hover_gradient_end: rgba(0, 0, 0, .3); $form_button_hover_gradient_end: rgba(0, 0, 0, .3);
$form_button_hover_text_colour: #222; $form_button_hover_text_colour: #222;
// ##Button active
$form_button_active_border: 1px solid #666; $form_button_active_border: 1px solid #666;
$form_button_active_gradient_start: rgba(255, 255, 255, .2); $form_button_active_gradient_start: rgba(255, 255, 255, .2);
$form_button_active_gradient_end: rgba(0, 0, 0, .2); $form_button_active_gradient_end: rgba(0, 0, 0, .2);
// ##Form input
$form_input_border: 1px solid #ccc; $form_input_border: 1px solid #ccc;
$form_input_text_colour: #777; $form_input_text_colour: #777;
$form_input_background: #fff; $form_input_background: #fff;
@@ -40,8 +50,10 @@ $form_input_margin: 0 0 20px 0;
$form_input_font_size: 13px; $form_input_font_size: 13px;
$form_input_border_radius: 2px; $form_input_border_radius: 2px;
// ##Form checkbox
$form_input_checkbox_display: inline; $form_input_checkbox_display: inline;
// ##Form input focus
$form_input_focus_border: 1px solid #aaa; $form_input_focus_border: 1px solid #aaa;
$form_input_focus_text_colour: #444; $form_input_focus_text_colour: #444;
$form_input_focus_outline: none; $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_blur: 3px;
$form_input_focus_box_shadow_colour: rgba(0, 0, 0, .2); $form_input_focus_box_shadow_colour: rgba(0, 0, 0, .2);
// ##select
$form_input_select_padding: 10px; $form_input_select_padding: 10px;
// ##fieldset/label/legend
$form_label_legend_colour: #444; $form_label_legend_colour: #444;
$form_label_legend_font_weight: normal; $form_label_legend_font_weight: normal;
$form_fieldset_margin: 0 0 20px 0; $form_fieldset_margin: 0 0 20px 0;
@@ -59,14 +73,17 @@ $form_fieldset_margin: 0 0 20px 0;
$legend_font_weight: bold; $legend_font_weight: bold;
$legend_font_size: $form_input_font_size; $legend_font_size: $form_input_font_size;
// ##Textarea
$form_textarea_min_height: 60px; $form_textarea_min_height: 60px;
// #Links
$link_colour: #333; $link_colour: #333;
$link_decoration: underline; $link_decoration: underline;
$link_outline: 0; $link_outline: 0;
$link_hover_colour: #000; $link_hover_colour: #000;
$link_hover_decoration: none; $link_hover_decoration: none;
// #Headings
$heading_font: "Georgia", "Times New Roman", serif; $heading_font: "Georgia", "Times New Roman", serif;
$heading_font_weight: normal; $heading_font_weight: normal;
$heading_colour: #181818; $heading_colour: #181818;
@@ -93,8 +110,10 @@ $heading5_line_height: $heading5_font_size * 1.5;
$heading6_font_size: 14px; $heading6_font_size: 14px;
$heading6_line_height: $heading6_font_size * 1.5; $heading6_line_height: $heading6_font_size * 1.5;
// #Subheading
$subheader_colour: #777; $subheader_colour: #777;
// #Paragraphs
$paragraph_margin: 0 0 20px 0; $paragraph_margin: 0 0 20px 0;
$paragraph_image_margin: 0; $paragraph_image_margin: 0;
$paragraph_line_height: $base_font_size * 1.5; $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_line_height: $paragraph_lead_font_size * 1.5;
$paragraph_lead_colour: #777; $paragraph_lead_colour: #777;
// #General Text
$em_font_style: italic; $em_font_style: italic;
$small_font_size: 80%; $small_font_size: 80%;
$strong_colour: #333; $strong_colour: #333;
// #Blockquotes
$blockquote_colour: #777; $blockquote_colour: #777;
$blockquote_border_left: 1px solid #ddd; $blockquote_border_left: 1px solid #ddd;
$blockquote_cite_colour: #555; $blockquote_cite_colour: #555;
@@ -120,12 +141,15 @@ $blockquote_font_size: 17px;
$blockquote_line_height: 24px; $blockquote_line_height: 24px;
$blockquote_font_style: italic; $blockquote_font_style: italic;
// #Horizontal rules
$hr_border: solid #ddd; $hr_border: solid #ddd;
$hr_border_width: 1px 0 0; $hr_border_width: 1px 0 0;
$hr_margin: 10px 0 30px; $hr_margin: 10px 0 30px;
// #Main font
$body_font_family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; $body_font_family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
// #Lists
$list_margin: 0 0 20px 0; $list_margin: 0 0 20px 0;
$list_large_line_height: 21px; $list_large_line_height: 21px;
@@ -133,7 +157,7 @@ $ul_list_style: none outside;
$ol_list_style: decimal; $ol_list_style: decimal;
$list_styled_margin: 0 0 0 10px; // ul, ol with disc, square etc. $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_margin: 4px 0 5px 30px;
$nested_list_font_size: 90%; $nested_list_font_size: 90%;
@@ -144,6 +168,7 @@ $list_item_paragraph_line_height: 21px;
$fallback_hex_gradient_bg: #CCC; $fallback_hex_gradient_bg: #CCC;
// #Tables
$table_background: #FFF; $table_background: #FFF;
$table_margin: 10px 0; $table_margin: 10px 0;
$table_td_th_padding: 8px; $table_td_th_padding: 8px;