Yet more variables, and a fair bit of housekeeping
This commit is contained in:
Nick Pack
parent
89832d4052
commit
0fcf83793e
@ -22,7 +22,7 @@ module.exports = function(grunt) {
|
||||
cssmin: {
|
||||
compress: {
|
||||
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: {
|
||||
'css/Ribs.min.css': 'css/Ribs.css'
|
||||
|
||||
71
css/Ribs.css
71
css/Ribs.css
@ -1,13 +1,11 @@
|
||||
/*
|
||||
* Ribs V1.0.2
|
||||
* Ribs
|
||||
* Skeleton is Copyright 2011, Dave Gamache
|
||||
*
|
||||
* Ribs is the evolution of Skeleton by Nick Pack
|
||||
* Free to use under the MIT license.
|
||||
* 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 */
|
||||
/* ==========================================================================
|
||||
HTML5 display definitions
|
||||
@ -348,8 +346,6 @@ table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0; }
|
||||
|
||||
/* #Basic Styles
|
||||
================================================== */
|
||||
body {
|
||||
background: #fff;
|
||||
font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
@ -357,6 +353,13 @@ body {
|
||||
-webkit-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 {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
@ -371,6 +374,10 @@ body {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px; }
|
||||
|
||||
.alpha-omega {
|
||||
margin-right: 0;
|
||||
margin-left: 0; }
|
||||
|
||||
.row {
|
||||
margin-bottom: 20px; }
|
||||
|
||||
@ -530,11 +537,7 @@ body {
|
||||
.container .alpha {
|
||||
margin-right: 10px; }
|
||||
.container .omega {
|
||||
margin-left: 10px; }
|
||||
|
||||
.alpha-omega {
|
||||
margin-right: 0;
|
||||
margin-left: 0; } }
|
||||
margin-left: 10px; } }
|
||||
@media only screen and (max-width: 767px) {
|
||||
.container {
|
||||
width: 90%; }
|
||||
@ -558,9 +561,6 @@ body {
|
||||
.container .offset-by-fourteen,
|
||||
.container .offset-by-fifteen {
|
||||
padding-left: 0; } }
|
||||
/* #Clearing
|
||||
================================================== */
|
||||
/* Self Clearing Goodness */
|
||||
.container:after {
|
||||
content: "\0020";
|
||||
display: block;
|
||||
@ -568,8 +568,6 @@ body {
|
||||
clear: both;
|
||||
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:after,
|
||||
.row:before,
|
||||
@ -589,7 +587,6 @@ or wrap each row of columns in a <div class="row"> */
|
||||
.clearfix {
|
||||
zoom: 1; }
|
||||
|
||||
/* You can also use a <br class="clear" /> to clear columns */
|
||||
.clear {
|
||||
clear: both;
|
||||
display: block;
|
||||
@ -598,18 +595,6 @@ or wrap each row of columns in a <div class="row"> */
|
||||
width: 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 {
|
||||
font-weight: inherit; }
|
||||
|
||||
@ -684,7 +669,6 @@ strong {
|
||||
small {
|
||||
font-size: 80%; }
|
||||
|
||||
/* Blockquotes */
|
||||
blockquote, blockquote p {
|
||||
font-size: 17px;
|
||||
line-height: 24px;
|
||||
@ -707,16 +691,6 @@ blockquote cite:before {
|
||||
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited {
|
||||
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 {
|
||||
color: #333333;
|
||||
text-decoration: underline; }
|
||||
@ -729,8 +703,6 @@ a:hover, a:focus {
|
||||
p a, p a:visited {
|
||||
line-height: inherit; }
|
||||
|
||||
/* #Lists
|
||||
================================================== */
|
||||
ul, ol {
|
||||
margin: 0 0 20px 0; }
|
||||
|
||||
@ -767,8 +739,6 @@ li {
|
||||
li p {
|
||||
line-height: 21px; }
|
||||
|
||||
/* #Buttons
|
||||
================================================== */
|
||||
.button,
|
||||
button,
|
||||
input[type="submit"],
|
||||
@ -843,14 +813,11 @@ input[type="button"].full-width {
|
||||
padding-right: 0;
|
||||
text-align: center; }
|
||||
|
||||
/* Fix for odd Mozilla border & padding issues */
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0; }
|
||||
|
||||
/* #Forms
|
||||
================================================== */
|
||||
form {
|
||||
margin: 0 0 20px 0; }
|
||||
|
||||
@ -885,7 +852,7 @@ select {
|
||||
background: white; }
|
||||
|
||||
select {
|
||||
padding: 0; }
|
||||
padding: 10px; }
|
||||
|
||||
input[type="text"]:focus,
|
||||
input[type="password"]:focus,
|
||||
@ -923,16 +890,6 @@ legend span {
|
||||
font-size: 13px;
|
||||
color: #444444; }
|
||||
|
||||
/* #Images
|
||||
================================================== */
|
||||
.scale-with-grid {
|
||||
max-width: 100%;
|
||||
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
4
css/Ribs.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1,19 +1,16 @@
|
||||
/*
|
||||
* Ribs V1.0.2
|
||||
* Ribs
|
||||
* Skeleton is Copyright 2011, Dave Gamache
|
||||
*
|
||||
* Ribs is the evolution of Skeleton by Nick Pack
|
||||
* Free to use under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
* 28/05/2013
|
||||
*/
|
||||
|
||||
@import "_variables";
|
||||
@import "normalize/_normalize";
|
||||
@import "_mixins";
|
||||
|
||||
/* #Basic Styles
|
||||
================================================== */
|
||||
body {
|
||||
background: #fff;
|
||||
font: 14px/21px $body_font_family;
|
||||
@ -22,6 +19,14 @@ body {
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: $hr_border;
|
||||
border-width: $hr_border_width;
|
||||
clear: both;
|
||||
margin: $hr_margin;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
@import "_grid";
|
||||
@import "_typography";
|
||||
@import "_links";
|
||||
@ -29,20 +34,17 @@ body {
|
||||
@import "_forms";
|
||||
@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) {}
|
||||
|
||||
/* 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) {}
|
||||
|
||||
/* All Mobile Sizes (devices and browser) */
|
||||
// All Mobile Sizes (devices and browser)
|
||||
@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) {}
|
||||
|
||||
/* 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) {}
|
||||
@ -1,5 +1,5 @@
|
||||
/* #Buttons
|
||||
================================================== */
|
||||
// #Buttons
|
||||
// ==================================================
|
||||
.button,
|
||||
button,
|
||||
input[type="submit"],
|
||||
@ -51,15 +51,15 @@ 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;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* #Forms
|
||||
================================================== */
|
||||
// #Forms
|
||||
// ==================================================
|
||||
|
||||
form {
|
||||
margin: $form_fieldset_margin;
|
||||
@ -86,7 +86,7 @@ textarea,
|
||||
select {
|
||||
border: $form_input_border;
|
||||
padding: $form_input_padding;
|
||||
@include border-radius(2px);
|
||||
@include border-radius($form_input_border_radius);
|
||||
font: $form_input_font_size $form_element_font;
|
||||
color: $form_input_text_colour;
|
||||
width: $form_input_width;
|
||||
@ -97,7 +97,7 @@ select {
|
||||
}
|
||||
|
||||
select {
|
||||
padding: 0;
|
||||
padding: $form_input_select_padding;
|
||||
}
|
||||
|
||||
input[type="text"]:focus,
|
||||
@ -110,12 +110,12 @@ input[type="tel"]:focus,
|
||||
textarea:focus {
|
||||
border: $form_input_focus_border;
|
||||
color: $form_input_focus_text_colour;
|
||||
outline: none;
|
||||
@include box-shadow(0, 0, 3px, rgba(0, 0, 0, .2))
|
||||
outline: $form_input_focus_outline;
|
||||
@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: 60px;
|
||||
min-height: $form_textarea_min_height;
|
||||
}
|
||||
|
||||
label,
|
||||
@ -130,7 +130,7 @@ select {
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
display: inline;
|
||||
display: $form_input_checkbox_display;
|
||||
}
|
||||
|
||||
label span,
|
||||
|
||||
@ -12,6 +12,11 @@
|
||||
margin-right: $gutter/2;
|
||||
}
|
||||
|
||||
.alpha-omega {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.row { margin-bottom: $gutter; }
|
||||
|
||||
@include grid($desktop-container-width, $column-count, $gutter);
|
||||
@ -26,10 +31,6 @@
|
||||
& .alpha { margin-right: 10px; }
|
||||
& .omega { margin-left: 10px; }
|
||||
}
|
||||
|
||||
.alpha-omega {
|
||||
margin-right: 0;
|
||||
margin-left: 0; }
|
||||
}
|
||||
//--------------------------------------------------------------------
|
||||
// #Mobile
|
||||
@ -81,14 +82,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* #Clearing
|
||||
================================================== */
|
||||
// #Clearing
|
||||
// ==================================================
|
||||
|
||||
/* Self Clearing Goodness */
|
||||
.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"> */
|
||||
// Use clearfix class on parent to clear nested columns,
|
||||
// or wrap each row of columns in a <div class="row">
|
||||
.clearfix:before,
|
||||
.clearfix:after,
|
||||
.row:before,
|
||||
@ -106,7 +106,7 @@ or wrap each row of columns in a <div class="row"> */
|
||||
.clearfix {
|
||||
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: both;
|
||||
display: block;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/* #Images
|
||||
================================================== */
|
||||
// #Images
|
||||
// ==================================================
|
||||
|
||||
.scale-with-grid {
|
||||
max-width: 100%;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/* #Links
|
||||
================================================== */
|
||||
// #Links
|
||||
// ==================================================
|
||||
a, a:visited {
|
||||
color: $link_colour;
|
||||
text-decoration: $link_decoration;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
/* #Lists
|
||||
================================================== */
|
||||
// #Lists
|
||||
// ==================================================
|
||||
ul, ol {
|
||||
margin: $list_margin;
|
||||
}
|
||||
@ -17,15 +17,15 @@ ol, ul.square, ul.circle, ul.disc {
|
||||
}
|
||||
|
||||
ul.square {
|
||||
list-style: square outside;
|
||||
list-style: square $list_styled_position;
|
||||
}
|
||||
|
||||
ul.circle {
|
||||
list-style: circle outside;
|
||||
list-style: circle $list_styled_position;
|
||||
}
|
||||
|
||||
ul.disc {
|
||||
list-style: disc outside;
|
||||
list-style: disc $list_styled_position;
|
||||
}
|
||||
|
||||
ul ul, ul ol,
|
||||
|
||||
@ -112,7 +112,7 @@
|
||||
@mixin box-shadow($a, $b, $c, $colour) {
|
||||
-moz-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) {
|
||||
@ -142,10 +142,9 @@
|
||||
.two-thirds { width: (($grid-container-width/3)*2) - $grid-gutter; }
|
||||
.one-half { width: ($grid-container-width/2) - $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-three { padding-left: $grid-column-width*3; }
|
||||
.offset-by-four { padding-left: $grid-column-width*4; }
|
||||
|
||||
@ -1,15 +1,5 @@
|
||||
/* #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; }
|
||||
*/
|
||||
// #Typography
|
||||
// ==================================================
|
||||
|
||||
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
|
||||
font-weight: inherit;
|
||||
@ -99,12 +89,11 @@ small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/* Blockquotes */
|
||||
blockquote, blockquote p {
|
||||
font-size: 17px;
|
||||
line-height: 24px;
|
||||
font-size: $blockquote_font_size;
|
||||
line-height: $blockquote_line_height;
|
||||
color: $blockquote_colour;
|
||||
font-style: italic;
|
||||
font-style: $blockquote_font_style;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
@ -125,13 +114,4 @@ blockquote cite:before {
|
||||
|
||||
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited {
|
||||
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;
|
||||
}
|
||||
@ -37,9 +37,19 @@ $form_input_width: 210px;
|
||||
$form_input_select_width: 220px;
|
||||
$form_input_margin: 0 0 20px 0;
|
||||
$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_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_fieldset_margin: 0 0 20px 0;
|
||||
@ -47,6 +57,8 @@ $form_fieldset_margin: 0 0 20px 0;
|
||||
$legend_font_weight: bold;
|
||||
$legend_font_size: $form_input_font_size;
|
||||
|
||||
$form_textarea_min_height: 60px;
|
||||
|
||||
$link_colour: #333;
|
||||
$link_decoration: underline;
|
||||
$link_outline: 0;
|
||||
@ -98,6 +110,9 @@ $blockquote_cite_link_colour: #555;
|
||||
$blockquote_cite_font_size: 12px;
|
||||
$blockquote_margin: 0 0 20px;
|
||||
$blockquote_padding: 9px 20px 0 19px;
|
||||
$blockquote_font_size: 17px;
|
||||
$blockquote_line_height: 24px;
|
||||
$blockquote_font_style: italic;
|
||||
|
||||
$hr_border: solid #ddd;
|
||||
$hr_border_width: 1px 0 0;
|
||||
@ -111,7 +126,8 @@ $list_large_line_height: 21px;
|
||||
$ul_list_style: none outside;
|
||||
$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_font_size: 90%;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user