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

Yet more variables, and a fair bit of housekeeping

Browse Source
This commit is contained in:
Nick Pack 2013-07-15 10:19:46 +01:00
parent 89832d4052
commit 0fcf83793e
12 changed files with 86 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Gruntfile.js
View File

@ -22,7 +22,7 @@ module.exports = function(grunt) {
cssmin: { cssmin: {
compress: { compress: {
options: { options: {
banner: '/* <%= pkg.name %> <%= pkg.version %> <%= grunt.template.today("dd-mm-yyyy") %> */' banner: '/* <%= pkg.name %> <%= pkg.version %> - https://github.com/nickpack/Ribs - <%= grunt.template.today("dd-mm-yyyy") %> */'
}, },
files: { files: {
'css/Ribs.min.css': 'css/Ribs.css' 'css/Ribs.min.css': 'css/Ribs.css'

71
css/Ribs.css
View File

@ -1,13 +1,11 @@
/* /*
* Ribs V1.0.2 * Ribs
* Skeleton is Copyright 2011, Dave Gamache * Skeleton is Copyright 2011, Dave Gamache
* *
* Ribs is the evolution of Skeleton by Nick Pack * Ribs is the evolution of Skeleton by Nick Pack
* Free to use under the MIT license. * Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php * http://www.opensource.org/licenses/mit-license.php
* 28/05/2013
*/ */
/* ul, ol with disc, square etc. */
/* normalize.css v2.1.2 | MIT License | git.io/normalize */ /* normalize.css v2.1.2 | MIT License | git.io/normalize */
/* ========================================================================== /* ==========================================================================
HTML5 display definitions HTML5 display definitions
@ -348,8 +346,6 @@ table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; } border-spacing: 0; }
/* #Basic Styles
================================================== */
body { body {
background: #fff; background: #fff;
font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
@ -357,6 +353,13 @@ body {
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; } -ms-text-size-adjust: 100%; }
hr {
border: solid #dddddd;
border-width: 1px 0 0;
clear: both;
margin: 10px 0 30px;
height: 0; }
.container { .container {
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
@ -371,6 +374,10 @@ body {
margin-left: 10px; margin-left: 10px;
margin-right: 10px; } margin-right: 10px; }
.alpha-omega {
margin-right: 0;
margin-left: 0; }
.row { .row {
margin-bottom: 20px; } margin-bottom: 20px; }
@ -530,11 +537,7 @@ body {
.container .alpha { .container .alpha {
margin-right: 10px; } margin-right: 10px; }
.container .omega { .container .omega {
margin-left: 10px; } margin-left: 10px; } }
.alpha-omega {
margin-right: 0;
margin-left: 0; } }
@media only screen and (max-width: 767px) { @media only screen and (max-width: 767px) {
.container { .container {
width: 90%; } width: 90%; }
@ -558,9 +561,6 @@ body {
.container .offset-by-fourteen, .container .offset-by-fourteen,
.container .offset-by-fifteen { .container .offset-by-fifteen {
padding-left: 0; } } padding-left: 0; } }
/* #Clearing
================================================== */
/* Self Clearing Goodness */
.container:after { .container:after {
content: "\0020"; content: "\0020";
display: block; display: block;
@ -568,8 +568,6 @@ body {
clear: both; clear: both;
visibility: hidden; } visibility: hidden; }
/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */
.clearfix:before, .clearfix:before,
.clearfix:after, .clearfix:after,
.row:before, .row:before,
@ -589,7 +587,6 @@ or wrap each row of columns in a <div class="row"> */
.clearfix { .clearfix {
zoom: 1; } zoom: 1; }
/* You can also use a <br class="clear" /> to clear columns */
.clear { .clear {
clear: both; clear: both;
display: block; display: block;
@ -598,18 +595,6 @@ or wrap each row of columns in a <div class="row"> */
width: 0; width: 0;
height: 0; } height: 0; }
/* #Typography
================================================== */
/* @font-face {
font-family: 'FontName';
src: url('../fonts/FontName.eot');
src: url('../fonts/FontName.eot?iefix') format('eot'),
url('../fonts/FontName.woff') format('woff'),
url('../fonts/FontName.ttf') format('truetype'),
url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
font-weight: normal;
font-style: normal; }
*/
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; }
@ -684,7 +669,6 @@ strong {
small { small {
font-size: 80%; } font-size: 80%; }
/* Blockquotes */
blockquote, blockquote p { blockquote, blockquote p {
font-size: 17px; font-size: 17px;
line-height: 24px; line-height: 24px;
@ -707,16 +691,6 @@ 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: #555555; } color: #555555; }
/* not really typographical, but I couldnt find anywhere else to put it */
hr {
border: solid #dddddd;
border-width: 1px 0 0;
clear: both;
margin: 10px 0 30px;
height: 0; }
/* #Links
================================================== */
a, a:visited { a, a:visited {
color: #333333; color: #333333;
text-decoration: underline; } text-decoration: underline; }
@ -729,8 +703,6 @@ a:hover, a:focus {
p a, p a:visited { p a, p a:visited {
line-height: inherit; } line-height: inherit; }
/* #Lists
================================================== */
ul, ol { ul, ol {
margin: 0 0 20px 0; } margin: 0 0 20px 0; }
@ -767,8 +739,6 @@ li {
li p { li p {
line-height: 21px; } line-height: 21px; }
/* #Buttons
================================================== */
.button, .button,
button, button,
input[type="submit"], input[type="submit"],
@ -843,14 +813,11 @@ input[type="button"].full-width {
padding-right: 0; padding-right: 0;
text-align: center; } text-align: center; }
/* 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;
padding: 0; } padding: 0; }
/* #Forms
================================================== */
form { form {
margin: 0 0 20px 0; } margin: 0 0 20px 0; }
@ -885,7 +852,7 @@ select {
background: white; } background: white; }
select { select {
padding: 0; } padding: 10px; }
input[type="text"]:focus, input[type="text"]:focus,
input[type="password"]:focus, input[type="password"]:focus,
@ -923,16 +890,6 @@ legend span {
font-size: 13px; font-size: 13px;
color: #444444; } color: #444444; }
/* #Images
================================================== */
.scale-with-grid { .scale-with-grid {
max-width: 100%; max-width: 100%;
height: auto; } height: auto; }
/* #Example Media Queries
================================================== */
/* Smaller than standard 960 (devices and browsers) */
/* Tablet Portrait size to standard 960 (devices and browsers) */
/* All Mobile Sizes (devices and browser) */
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */

4
css/Ribs.min.css vendored
View File

File diff suppressed because one or more lines are too long

26
scss/Ribs.scss
View File

@ -1,19 +1,16 @@
/* /*
* Ribs V1.0.2 * Ribs
* Skeleton is Copyright 2011, Dave Gamache * Skeleton is Copyright 2011, Dave Gamache
* *
* Ribs is the evolution of Skeleton by Nick Pack * Ribs is the evolution of Skeleton by Nick Pack
* Free to use under the MIT license. * Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php * http://www.opensource.org/licenses/mit-license.php
* 28/05/2013
*/ */
@import "_variables"; @import "_variables";
@import "normalize/_normalize"; @import "normalize/_normalize";
@import "_mixins"; @import "_mixins";
/* #Basic Styles
================================================== */
body { body {
background: #fff; background: #fff;
font: 14px/21px $body_font_family; font: 14px/21px $body_font_family;
@ -22,6 +19,14 @@ body {
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
} }
hr {
border: $hr_border;
border-width: $hr_border_width;
clear: both;
margin: $hr_margin;
height: 0;
}
@import "_grid"; @import "_grid";
@import "_typography"; @import "_typography";
@import "_links"; @import "_links";
@ -29,20 +34,17 @@ body {
@import "_forms"; @import "_forms";
@import "_images"; @import "_images";
/* #Example Media Queries // Smaller than standard 960 (devices and browsers)
================================================== */
/* 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) */ // 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) */ // 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) */ // 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) */ // Mobile Portrait Size to Mobile Landscape Size (devices and browsers)
@media only screen and (max-width: 479px) {} @media only screen and (max-width: 479px) {}

22
scss/_forms.scss
View File

@ -1,5 +1,5 @@
/* #Buttons // #Buttons
================================================== */ // ==================================================
.button, .button,
button, button,
input[type="submit"], input[type="submit"],
@ -51,15 +51,15 @@ 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;
padding: 0; padding: 0;
} }
/* #Forms // #Forms
================================================== */ // ==================================================
form { form {
margin: $form_fieldset_margin; margin: $form_fieldset_margin;
@ -86,7 +86,7 @@ textarea,
select { select {
border: $form_input_border; border: $form_input_border;
padding: $form_input_padding; padding: $form_input_padding;
@include border-radius(2px); @include border-radius($form_input_border_radius);
font: $form_input_font_size $form_element_font; font: $form_input_font_size $form_element_font;
color: $form_input_text_colour; color: $form_input_text_colour;
width: $form_input_width; width: $form_input_width;
@ -97,7 +97,7 @@ select {
} }
select { select {
padding: 0; padding: $form_input_select_padding;
} }
input[type="text"]:focus, input[type="text"]:focus,
@ -110,12 +110,12 @@ input[type="tel"]:focus,
textarea:focus { textarea:focus {
border: $form_input_focus_border; border: $form_input_focus_border;
color: $form_input_focus_text_colour; color: $form_input_focus_text_colour;
outline: none; outline: $form_input_focus_outline;
@include box-shadow(0, 0, 3px, rgba(0, 0, 0, .2)) @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 { textarea {
min-height: 60px; min-height: $form_textarea_min_height;
} }
label, label,
@ -130,7 +130,7 @@ select {
} }
input[type="checkbox"] { input[type="checkbox"] {
display: inline; display: $form_input_checkbox_display;
} }
label span, label span,

20
scss/_grid.scss
View File

@ -12,6 +12,11 @@
margin-right: $gutter/2; margin-right: $gutter/2;
} }
.alpha-omega {
margin-right: 0;
margin-left: 0;
}
.row { margin-bottom: $gutter; } .row { margin-bottom: $gutter; }
@include grid($desktop-container-width, $column-count, $gutter); @include grid($desktop-container-width, $column-count, $gutter);
@ -26,10 +31,6 @@
& .alpha { margin-right: 10px; } & .alpha { margin-right: 10px; }
& .omega { margin-left: 10px; } & .omega { margin-left: 10px; }
} }
.alpha-omega {
margin-right: 0;
margin-left: 0; }
} }
//-------------------------------------------------------------------- //--------------------------------------------------------------------
// #Mobile // #Mobile
@ -81,14 +82,13 @@
} }
} }
/* #Clearing // #Clearing
================================================== */ // ==================================================
/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
/* Use clearfix class on parent to clear nested columns, // Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */ // or wrap each row of columns in a <div class="row">
.clearfix:before, .clearfix:before,
.clearfix:after, .clearfix:after,
.row:before, .row:before,
@ -106,7 +106,7 @@ or wrap each row of columns in a <div class="row"> */
.clearfix { .clearfix {
zoom: 1; } zoom: 1; }
/* You can also use a <br class="clear" /> to clear columns */ // You can also use a <br class="clear" /> to clear columns
.clear { .clear {
clear: both; clear: both;
display: block; display: block;

4
scss/_images.scss
View File

@ -1,5 +1,5 @@
/* #Images // #Images
================================================== */ // ==================================================
.scale-with-grid { .scale-with-grid {
max-width: 100%; max-width: 100%;

4
scss/_links.scss
View File

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

10
scss/_lists.scss
View File

@ -1,5 +1,5 @@
/* #Lists // #Lists
================================================== */ // ==================================================
ul, ol { ul, ol {
margin: $list_margin; margin: $list_margin;
} }
@ -17,15 +17,15 @@ ol, ul.square, ul.circle, ul.disc {
} }
ul.square { ul.square {
list-style: square outside; list-style: square $list_styled_position;
} }
ul.circle { ul.circle {
list-style: circle outside; list-style: circle $list_styled_position;
} }
ul.disc { ul.disc {
list-style: disc outside; list-style: disc $list_styled_position;
} }
ul ul, ul ol, ul ul, ul ol,

7
scss/_mixins.scss
View File

@ -112,7 +112,7 @@
@mixin box-shadow($a, $b, $c, $colour) { @mixin box-shadow($a, $b, $c, $colour) {
-moz-box-shadow: $a $b $c $colour; -moz-box-shadow: $a $b $c $colour;
-webkit-box-shadow: $a $b $c $colour; -webkit-box-shadow: $a $b $c $colour;
box-shadow: $a $b $c $colour; box-shadow: $a $b $c $colour;
} }
@mixin grid($grid-container-width, $grid-column-count:$column-count, $grid-gutter:$gutter) { @mixin grid($grid-container-width, $grid-column-count:$column-count, $grid-gutter:$gutter) {
@ -142,10 +142,9 @@
.two-thirds { width: (($grid-container-width/3)*2) - $grid-gutter; } .two-thirds { width: (($grid-container-width/3)*2) - $grid-gutter; }
.one-half { width: ($grid-container-width/2) - $grid-gutter; } .one-half { width: ($grid-container-width/2) - $grid-gutter; }
.one-quarter { width: ($grid-container-width/4) - $grid-gutter; } .one-quarter { width: ($grid-container-width/4) - $grid-gutter; }
.three-quarters {width: (($grid-container-width/4)*3) - $grid-gutter;} .three-quarters { width: (($grid-container-width/4)*3) - $grid-gutter; }
.offset-by-one { padding-left: $grid-column-width; }
.offset-by-one { padding-left: $grid-column-width; }
.offset-by-two { padding-left: $grid-column-width*2; } .offset-by-two { padding-left: $grid-column-width*2; }
.offset-by-three { padding-left: $grid-column-width*3; } .offset-by-three { padding-left: $grid-column-width*3; }
.offset-by-four { padding-left: $grid-column-width*4; } .offset-by-four { padding-left: $grid-column-width*4; }

30
scss/_typography.scss
View File

@ -1,15 +1,5 @@
/* #Typography // #Typography
================================================== */ // ==================================================
/* @font-face {
font-family: 'FontName';
src: url('../fonts/FontName.eot');
src: url('../fonts/FontName.eot?iefix') format('eot'),
url('../fonts/FontName.woff') format('woff'),
url('../fonts/FontName.ttf') format('truetype'),
url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
font-weight: normal;
font-style: normal; }
*/
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;
@ -99,12 +89,11 @@ small {
font-size: 80%; font-size: 80%;
} }
/* Blockquotes */
blockquote, blockquote p { blockquote, blockquote p {
font-size: 17px; font-size: $blockquote_font_size;
line-height: 24px; line-height: $blockquote_line_height;
color: $blockquote_colour; color: $blockquote_colour;
font-style: italic; font-style: $blockquote_font_style;
} }
blockquote { blockquote {
@ -125,13 +114,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;
}
/* not really typographical, but I couldnt find anywhere else to put it */
hr {
border: $hr_border;
border-width: $hr_border_width;
clear: both;
margin: $hr_margin;
height: 0;
} }

18
scss/_variables.scss
View File

@ -37,9 +37,19 @@ $form_input_width: 210px;
$form_input_select_width: 220px; $form_input_select_width: 220px;
$form_input_margin: 0 0 20px 0; $form_input_margin: 0 0 20px 0;
$form_input_font_size: 13px; $form_input_font_size: 13px;
$form_input_border_radius: 2px;
$form_input_checkbox_display: inline;
$form_input_focus_border: 1px solid #aaa; $form_input_focus_border: 1px solid #aaa;
$form_input_focus_text_colour: #444; $form_input_focus_text_colour: #444;
$form_input_focus_outline: none;
$form_input_focus_box_shadow_x: 0;
$form_input_focus_box_shadow_y: 0;
$form_input_focus_box_shadow_blur: 3px;
$form_input_focus_box_shadow_colour: rgba(0, 0, 0, .2);
$form_input_select_padding: 10px;
$form_label_legend_colour: #444; $form_label_legend_colour: #444;
$form_fieldset_margin: 0 0 20px 0; $form_fieldset_margin: 0 0 20px 0;
@ -47,6 +57,8 @@ $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;
$form_textarea_min_height: 60px;
$link_colour: #333; $link_colour: #333;
$link_decoration: underline; $link_decoration: underline;
$link_outline: 0; $link_outline: 0;
@ -98,6 +110,9 @@ $blockquote_cite_link_colour: #555;
$blockquote_cite_font_size: 12px; $blockquote_cite_font_size: 12px;
$blockquote_margin: 0 0 20px; $blockquote_margin: 0 0 20px;
$blockquote_padding: 9px 20px 0 19px; $blockquote_padding: 9px 20px 0 19px;
$blockquote_font_size: 17px;
$blockquote_line_height: 24px;
$blockquote_font_style: italic;
$hr_border: solid #ddd; $hr_border: solid #ddd;
$hr_border_width: 1px 0 0; $hr_border_width: 1px 0 0;
@ -111,7 +126,8 @@ $list_large_line_height: 21px;
$ul_list_style: none outside; $ul_list_style: none outside;
$ol_list_style: decimal; $ol_list_style: decimal;
$list_styled_margin: 0 0 0 30px; /* ul, ol with disc, square etc. */ $list_styled_margin: 0 0 0 30px; // ul, ol with disc, square etc.
$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%;