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

Grid push and pull, tidied up css and gruntfile, addded more form variables

Browse Source
This commit is contained in:
Nick Pack
2013-07-21 21:49:03 +01:00
parent 4f1d9febce
commit aa2f2231f0
9 changed files with 222 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Gruntfile.js
View File

@@ -34,7 +34,7 @@ module.exports = function(grunt) {
}, },
watch: { watch: {
files: 'src/scss/**/*', files: 'src/scss/**/*',
tasks: ['sass', 'csslint', 'cssmin'] tasks: ['sass', 'csslint:scssoutput', 'cssmin']
} }
}); });

139
build/css/Ribs.css
View File

@@ -455,6 +455,66 @@ hr {
padding-left: 840px; } padding-left: 840px; }
.container .offset-by-fifteen { .container .offset-by-fifteen {
padding-left: 900px; } padding-left: 900px; }
.container .pull-by-one {
left: -60px; }
.container .pull-by-two {
left: -120px; }
.container .pull-by-three {
left: -180px; }
.container .pull-by-four {
left: -240px; }
.container .pull-by-five {
left: -300px; }
.container .pull-by-six {
left: -360px; }
.container .pull-by-seven {
left: -420px; }
.container .pull-by-eight {
left: -480px; }
.container .pull-by-nine {
left: -540px; }
.container .pull-by-ten {
left: -600px; }
.container .pull-by-eleven {
left: -660px; }
.container .pull-by-twelve {
left: -720px; }
.container .pull-by-thirteen {
left: -780px; }
.container .pull-by-fourteen {
left: -840px; }
.container .pull-by-fifteen {
left: -900px; }
.container .push-by-one {
left: 60px; }
.container .push-by-two {
left: 120px; }
.container .push-by-three {
left: 180px; }
.container .push-by-four {
left: 240px; }
.container .push-by-five {
left: 300px; }
.container .push-by-six {
left: 360px; }
.container .push-by-seven {
left: 420px; }
.container .push-by-eight {
left: 480px; }
.container .push-by-nine {
left: 540px; }
.container .push-by-ten {
left: 600px; }
.container .push-by-eleven {
left: 660px; }
.container .push-by-twelve {
left: 720px; }
.container .push-by-thirteen {
left: 780px; }
.container .push-by-fourteen {
left: 840px; }
.container .push-by-fifteen {
left: 900px; }
@media only screen and (max-width: 959px) { @media only screen and (max-width: 959px) {
.container { .container {
@@ -531,6 +591,66 @@ hr {
padding-left: 672px; } padding-left: 672px; }
.container .offset-by-fifteen { .container .offset-by-fifteen {
padding-left: 720px; } padding-left: 720px; }
.container .pull-by-one {
left: -48px; }
.container .pull-by-two {
left: -96px; }
.container .pull-by-three {
left: -144px; }
.container .pull-by-four {
left: -192px; }
.container .pull-by-five {
left: -240px; }
.container .pull-by-six {
left: -288px; }
.container .pull-by-seven {
left: -336px; }
.container .pull-by-eight {
left: -384px; }
.container .pull-by-nine {
left: -432px; }
.container .pull-by-ten {
left: -480px; }
.container .pull-by-eleven {
left: -528px; }
.container .pull-by-twelve {
left: -576px; }
.container .pull-by-thirteen {
left: -624px; }
.container .pull-by-fourteen {
left: -672px; }
.container .pull-by-fifteen {
left: -720px; }
.container .push-by-one {
left: 48px; }
.container .push-by-two {
left: 96px; }
.container .push-by-three {
left: 144px; }
.container .push-by-four {
left: 192px; }
.container .push-by-five {
left: 240px; }
.container .push-by-six {
left: 288px; }
.container .push-by-seven {
left: 336px; }
.container .push-by-eight {
left: 384px; }
.container .push-by-nine {
left: 432px; }
.container .push-by-ten {
left: 480px; }
.container .push-by-eleven {
left: 528px; }
.container .push-by-twelve {
left: 576px; }
.container .push-by-thirteen {
left: 624px; }
.container .push-by-fourteen {
left: 672px; }
.container .push-by-fifteen {
left: 720px; }
.container { .container {
width: 768px; } width: 768px; }
@@ -583,8 +703,7 @@ hr {
.clearfix:after { .clearfix:after {
clear: both; } clear: both; }
.row, .row, .clearfix {
.clearfix {
zoom: 1; } zoom: 1; }
.clear { .clear {
@@ -713,7 +832,7 @@ ol {
list-style: decimal; } list-style: decimal; }
ol, ul.square, ul.circle, ul.disc { ol, ul.square, ul.circle, ul.disc {
margin: 0 0 0 30px; } margin: 0 0 0 10px; }
ul.square { ul.square {
list-style: square outside; } list-style: square outside; }
@@ -852,7 +971,8 @@ select {
background: white; } background: white; }
select { select {
padding: 10px; } padding: 10px;
width: 220px; }
input[type="text"]:focus, input[type="text"]:focus,
input[type="password"]:focus, input[type="password"]:focus,
@@ -878,9 +998,6 @@ legend {
font-weight: bold; font-weight: bold;
font-size: 13px; } font-size: 13px; }
select {
width: 220px; }
input[type="checkbox"] { input[type="checkbox"] {
display: inline; } display: inline; }
@@ -991,10 +1108,10 @@ table {
-webkit-border-top-left-radius: 3px; -webkit-border-top-left-radius: 3px;
-moz-border-radius-topleft: 3px; -moz-border-radius-topleft: 3px;
border-top-left-radius: 3px; } border-top-left-radius: 3px; }
.table-bordered caption + thead tr:first-child th:last-child, .table-bordered caption thead tr:first-child th:last-child,
.table-bordered caption + tbody tr:first-child td:last-child, .table-bordered caption tbody tr:first-child td:last-child,
.table-bordered colgroup + thead tr:first-child th:last-child, .table-bordered colgroup thead tr:first-child th:last-child,
.table-bordered colgroup + tbody tr:first-child td:last-child { .table-bordered colgroup tbody tr:first-child td:last-child {
-webkit-border-top-right-radius: 3px; -webkit-border-top-right-radius: 3px;
-moz-border-radius-topright: 3px; -moz-border-radius-topright: 3px;
border-top-right-radius: 3px; } border-top-right-radius: 3px; }

4
build/css/Ribs.min.css vendored
View File

File diff suppressed because one or more lines are too long

9
src/scss/_forms.scss
View File

@@ -90,7 +90,7 @@ select {
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;
max-width: 100%; max-width: $form_input_max_width;
display: block; display: block;
margin: $form_input_margin; margin: $form_input_margin;
background: $form_input_background; background: $form_input_background;
@@ -98,6 +98,7 @@ select {
select { select {
padding: $form_input_select_padding; padding: $form_input_select_padding;
width: $form_input_select_width;
} }
input[type="text"]:focus, input[type="text"]:focus,
@@ -125,17 +126,13 @@ legend {
font-size: $legend_font_size; font-size: $legend_font_size;
} }
select {
width: $form_input_select_width;
}
input[type="checkbox"] { input[type="checkbox"] {
display: $form_input_checkbox_display; display: $form_input_checkbox_display;
} }
label span, label span,
legend span { legend span {
font-weight: normal; 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;
} }

46
src/scss/_grid.scss
View File

@@ -2,8 +2,12 @@
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
padding: 0; padding: 0;
& .alpha { margin-left: 0; } & .alpha {
& .omega { margin-right: 0; } margin-left: 0;
}
& .omega {
margin-right: 0;
}
} }
.column, .columns { .column, .columns {
@@ -17,7 +21,9 @@
margin-left: 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);
@@ -28,8 +34,12 @@
.container { .container {
width: $tablet-container-width; width: $tablet-container-width;
& .alpha { margin-right: 10px; } & .alpha {
& .omega { margin-left: 10px; } margin-right: 10px;
}
& .omega {
margin-left: 10px;
}
} }
} }
//-------------------------------------------------------------------- //--------------------------------------------------------------------
@@ -85,7 +95,13 @@
// #Clearing // #Clearing
// ================================================== // ==================================================
.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">
@@ -98,13 +114,17 @@
overflow: hidden; overflow: hidden;
visibility: hidden; visibility: hidden;
width: 0; width: 0;
height: 0; } height: 0;
.row:after, }
.clearfix:after {
clear: both; } .row:after,
.row, .clearfix:after {
.clearfix { clear: both;
zoom: 1; } }
.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 {

42
src/scss/_mixins.scss
View File

@@ -159,6 +159,38 @@
.offset-by-thirteen { padding-left: $grid-column-width*13; } .offset-by-thirteen { padding-left: $grid-column-width*13; }
.offset-by-fourteen { padding-left: $grid-column-width*14; } .offset-by-fourteen { padding-left: $grid-column-width*14; }
.offset-by-fifteen { padding-left: $grid-column-width*15; } .offset-by-fifteen { padding-left: $grid-column-width*15; }
.pull-by-one { left: -$grid-column-width; }
.pull-by-two { left: -$grid-column-width*2; }
.pull-by-three { left: -$grid-column-width*3; }
.pull-by-four { left: -$grid-column-width*4; }
.pull-by-five { left: -$grid-column-width*5; }
.pull-by-six { left: -$grid-column-width*6; }
.pull-by-seven { left: -$grid-column-width*7; }
.pull-by-eight { left: -$grid-column-width*8; }
.pull-by-nine { left: -$grid-column-width*9; }
.pull-by-ten { left: -$grid-column-width*10; }
.pull-by-eleven { left: -$grid-column-width*11; }
.pull-by-twelve { left: -$grid-column-width*12; }
.pull-by-thirteen { left: -$grid-column-width*13; }
.pull-by-fourteen { left: -$grid-column-width*14; }
.pull-by-fifteen { left: -$grid-column-width*15; }
.push-by-one { left: $grid-column-width; }
.push-by-two { left: $grid-column-width*2; }
.push-by-three { left: $grid-column-width*3; }
.push-by-four { left: $grid-column-width*4; }
.push-by-five { left: $grid-column-width*5; }
.push-by-six { left: $grid-column-width*6; }
.push-by-seven { left: $grid-column-width*7; }
.push-by-eight { left: $grid-column-width*8; }
.push-by-nine { left: $grid-column-width*9; }
.push-by-ten { left: $grid-column-width*10; }
.push-by-eleven { left: $grid-column-width*11; }
.push-by-twelve { left: $grid-column-width*12; }
.push-by-thirteen { left: $grid-column-width*13; }
.push-by-fourteen { left: $grid-column-width*14; }
.push-by-fifteen { left: $grid-column-width*15; }
} }
} }
@@ -170,3 +202,13 @@
width: 0; width: 0;
height: 0; height: 0;
} }
@mixin visible {
display: block !important;
visibility: visible;
}
@mixin hidden {
display: none !important;
visibility: hidden;
}

8
src/scss/_tables.scss
View File

@@ -115,10 +115,10 @@ table {
colgroup tbody tr:first-child td:first-child { colgroup tbody tr:first-child td:first-child {
@include border-top-left-radius($table_border_radius); @include border-top-left-radius($table_border_radius);
} }
caption + thead tr:first-child th:last-child, caption thead tr:first-child th:last-child,
caption + tbody tr:first-child td:last-child, caption tbody tr:first-child td:last-child,
colgroup + thead tr:first-child th:last-child, colgroup thead tr:first-child th:last-child,
colgroup + tbody tr:first-child td:last-child { colgroup tbody tr:first-child td:last-child {
@include border-top-right-radius($table_border_radius); @include border-top-right-radius($table_border_radius);
} }

4
src/scss/_typography.scss
View File

@@ -77,7 +77,7 @@ p img {
} }
em { em {
font-style: italic; font-style: $em_font_style;
} }
strong { strong {
@@ -86,7 +86,7 @@ strong {
} }
small { small {
font-size: 80%; font-size: $small_font_size;
} }
blockquote, blockquote p { blockquote, blockquote p {

8
src/scss/_variables.scss
View File

@@ -34,6 +34,7 @@ $form_input_text_colour: #777;
$form_input_background: #fff; $form_input_background: #fff;
$form_input_padding: 6px 4px; $form_input_padding: 6px 4px;
$form_input_width: 210px; $form_input_width: 210px;
$form_input_max_width: 100%;
$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;
@@ -52,6 +53,7 @@ $form_input_focus_box_shadow_colour: rgba(0, 0, 0, .2);
$form_input_select_padding: 10px; $form_input_select_padding: 10px;
$form_label_legend_colour: #444; $form_label_legend_colour: #444;
$form_label_legend_font_weight: normal;
$form_fieldset_margin: 0 0 20px 0; $form_fieldset_margin: 0 0 20px 0;
$legend_font_weight: bold; $legend_font_weight: bold;
@@ -101,6 +103,10 @@ $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;
$em_font_style: italic;
$small_font_size: 80%;
$strong_colour: #333; $strong_colour: #333;
$blockquote_colour: #777; $blockquote_colour: #777;
@@ -126,7 +132,7 @@ $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 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;