Merge branch 'release/1.0.8'
This commit is contained in:
Nick Pack
20
Gruntfile.js
20
Gruntfile.js
@@ -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']);
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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; }
|
||||
|
||||
@@ -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
46
docs/Ribs.html
Normal file
File diff suppressed because one or more lines are too long
153
docs/forms.html
Normal file
153
docs/forms.html
Normal file
File diff suppressed because one or more lines are too long
164
docs/grid.html
Normal file
164
docs/grid.html
Normal file
File diff suppressed because one or more lines are too long
8
docs/images.html
Normal file
8
docs/images.html
Normal file
File diff suppressed because one or more lines are too long
71
docs/index.html
Normal file
71
docs/index.html
Normal file
File diff suppressed because one or more lines are too long
16
docs/links.html
Normal file
16
docs/links.html
Normal file
File diff suppressed because one or more lines are too long
48
docs/lists.html
Normal file
48
docs/lists.html
Normal file
File diff suppressed because one or more lines are too long
216
docs/mixins.html
Normal file
216
docs/mixins.html
Normal file
File diff suppressed because one or more lines are too long
332
docs/normalize-normalize.html
Normal file
332
docs/normalize-normalize.html
Normal file
File diff suppressed because one or more lines are too long
241
docs/tables.html
Normal file
241
docs/tables.html
Normal file
File diff suppressed because one or more lines are too long
116
docs/typography.html
Normal file
116
docs/typography.html
Normal file
File diff suppressed because one or more lines are too long
157
docs/variables.html
Normal file
157
docs/variables.html
Normal file
File diff suppressed because one or more lines are too long
@@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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) {}
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
// #Links
|
||||
// ==================================================
|
||||
a, a:visited {
|
||||
color: $link_colour;
|
||||
text-decoration: $link_decoration;
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
// #Lists
|
||||
// ==================================================
|
||||
ul, ol {
|
||||
margin: $list_margin;
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
// #Typography
|
||||
// ==================================================
|
||||
|
||||
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
|
||||
font-weight: inherit;
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user