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

Wherever possible fixed CSSLint warnings.

Browse Source 
Had to exclude some unfeasible rules however.
This commit is contained in:
Nick Pack 2013-05-17 13:01:58 +01:00
parent 9db2cff433
commit 26b0b91551
14 changed files with 184 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.csslintrc Normal file
View File

@ -0,0 +1,5 @@
{
"unique-headings": false,
"box-model": false,
"font-sizes": false
}

3
Gruntfile.js
View File

@ -13,7 +13,8 @@ module.exports = function(grunt) {
csslint: {
scssoutput: {
options: {
import: false
import: false,
csslintrc: '.csslintrc'
},
src: ['css/skeleton.css']
}

153
css/skeleton.css vendored
View File

@ -1,5 +1,5 @@
/*
* Skeleton SCSS V1.0
* Skeleton SCSS V1.0.1
* Skeleton is Copyright 2011, Dave Gamache
*
* SCSS Conversion and Mixins by Nick Pack
@ -44,13 +44,13 @@ table {
/* #Misc
================================================== */
.remove-bottom {
margin-bottom: 0 !important; }
margin-bottom: 0; }
.half-bottom {
margin-bottom: 10px !important; }
margin-bottom: 10px; }
.add-bottom {
margin-bottom: 20px !important; }
margin-bottom: 20px; }
/* #Basic Styles
================================================== */
@ -58,7 +58,8 @@ body {
background: #fff;
font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
-webkit-text-size-adjust: 100%; }
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; }
/* #Forms
================================================== */
@ -66,57 +67,56 @@ body {
position: relative;
margin: 0 auto;
padding: 0; }
.container .alpha {
margin-left: 0; }
.container .omega {
margin-right: 0; }
.column, .columns {
float: left;
display: inline;
margin-left: 10px;
margin-right: 10px; }
.column.alpha, .columns.alpha {
margin-left: 0; }
.column.omega, .columns.omega {
margin-right: 0; }
.row {
margin-bottom: 20px; }
.container {
width: 960px; }
.container .columns.one, .container .column.one {
.container .one {
width: 40px; }
.container .columns.two, .container .column.two {
.container .two {
width: 100px; }
.container .columns.three, .container .column.three {
.container .three {
width: 160px; }
.container .columns.four, .container .column.four {
.container .four {
width: 220px; }
.container .columns.five, .container .column.five {
.container .five {
width: 280px; }
.container .columns.six, .container .column.six {
.container .six {
width: 340px; }
.container .columns.seven, .container .column.seven {
.container .seven {
width: 400px; }
.container .columns.eight, .container .column.eight {
.container .eight {
width: 460px; }
.container .columns.nine, .container .column.nine {
.container .nine {
width: 520px; }
.container .columns.ten, .container .column.ten {
.container .ten {
width: 580px; }
.container .columns.eleven, .container .column.eleven {
.container .eleven {
width: 640px; }
.container .columns.twelve, .container .column.twelve {
.container .twelve {
width: 700px; }
.container .columns.thirteen, .container .column.thirteen {
.container .thirteen {
width: 760px; }
.container .columns.fourteen, .container .column.fourteen {
.container .fourteen {
width: 820px; }
.container .columns.fifteen, .container .column.fifteen {
.container .fifteen {
width: 880px; }
.container .columns.sixteen, .container .column.sixteen {
.container .sixteen {
width: 940px; }
.container .columns.one-third, .container .column.one-third {
.container .one-third {
width: 300px; }
.container .columns.two-thirds, .container .column.two-thirds {
.container .two-thirds {
width: 620px; }
.container .offset-by-one {
padding-left: 60px; }
@ -152,41 +152,41 @@ body {
@media only screen and (max-width: 959px) {
.container {
width: 768px; }
.container .columns.one, .container .column.one {
.container .one {
width: 28px; }
.container .columns.two, .container .column.two {
.container .two {
width: 76px; }
.container .columns.three, .container .column.three {
.container .three {
width: 124px; }
.container .columns.four, .container .column.four {
.container .four {
width: 172px; }
.container .columns.five, .container .column.five {
.container .five {
width: 220px; }
.container .columns.six, .container .column.six {
.container .six {
width: 268px; }
.container .columns.seven, .container .column.seven {
.container .seven {
width: 316px; }
.container .columns.eight, .container .column.eight {
.container .eight {
width: 364px; }
.container .columns.nine, .container .column.nine {
.container .nine {
width: 412px; }
.container .columns.ten, .container .column.ten {
.container .ten {
width: 460px; }
.container .columns.eleven, .container .column.eleven {
.container .eleven {
width: 508px; }
.container .columns.twelve, .container .column.twelve {
.container .twelve {
width: 556px; }
.container .columns.thirteen, .container .column.thirteen {
.container .thirteen {
width: 604px; }
.container .columns.fourteen, .container .column.fourteen {
.container .fourteen {
width: 652px; }
.container .columns.fifteen, .container .column.fifteen {
.container .fifteen {
width: 700px; }
.container .columns.sixteen, .container .column.sixteen {
.container .sixteen {
width: 748px; }
.container .columns.one-third, .container .column.one-third {
.container .one-third {
width: 236px; }
.container .columns.two-thirds, .container .column.two-thirds {
.container .two-thirds {
width: 492px; }
.container .offset-by-one {
padding-left: 48px; }
@ -221,22 +221,21 @@ body {
.container {
width: 768px; }
.column.alpha, .columns.alpha {
.container .alpha {
margin-right: 10px; }
.column.omega, .columns.omega {
.container .omega {
margin-left: 10px; }
.alpha.omega {
.alpha, .omega {
margin-right: 0;
margin-left: 0; } }
@media only screen and (max-width: 767px) {
.container {
width: 90%; }
.container .one, .container .two, .container .three, .container .four, .container .five, .container .six, .container .seven, .container .eight, .container .nine, .container .ten, .container .eleven, .container .twelve, .container .thirteen, .container .fourteen, .container .fifteen, .container .sixteen, .container .one-third, .container .two-thirds {
width: 100%; }
.container .column, .container .columns {
margin: 0; }
.container .column.one, .container .column.two, .container .column.three, .container .column.four, .container .column.five, .container .column.six, .container .column.seven, .container .column.eight, .container .column.nine, .container .column.ten, .container .column.eleven, .container .column.twelve, .container .column.thirteen, .container .column.fourteen, .container .column.fifteen, .container .column.sixteen, .container .column.one-third, .container .column.two-thirds, .container .columns.one, .container .columns.two, .container .columns.three, .container .columns.four, .container .columns.five, .container .columns.six, .container .columns.seven, .container .columns.eight, .container .columns.nine, .container .columns.ten, .container .columns.eleven, .container .columns.twelve, .container .columns.thirteen, .container .columns.fourteen, .container .columns.fifteen, .container .columns.sixteen, .container .columns.one-third, .container .columns.two-thirds {
width: 100%; }
.container .offset-by-one,
.container .offset-by-two,
.container .offset-by-three,
@ -305,39 +304,52 @@ or wrap each row of columns in a <div class="row"> */
font-weight: normal;
font-style: normal; }
*/
h1, h2, h3, h4, h5, h6 {
color: #181818;
font-family: "Georgia", "Times New Roman", serif;
font-weight: normal; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
font-weight: inherit; }
h1 {
color: #181818;
font-family: "Georgia", "Times New Roman", serif;
font-weight: normal;
font-size: 46px;
line-height: 50px;
margin: 0 0 14px 0; }
h2 {
color: #181818;
font-family: "Georgia", "Times New Roman", serif;
font-weight: normal;
font-size: 35px;
line-height: 40px;
margin: 0 0 10px 0; }
h3 {
color: #181818;
font-family: "Georgia", "Times New Roman", serif;
font-weight: normal;
font-size: 28px;
line-height: 34px;
margin: 0 0 8px 0; }
h4 {
color: #181818;
font-family: "Georgia", "Times New Roman", serif;
font-weight: normal;
font-size: 21px;
line-height: 30px;
margin: 0 0 4px 0; }
h5 {
color: #181818;
font-family: "Georgia", "Times New Roman", serif;
font-weight: normal;
font-size: 17px;
line-height: 24px; }
h6 {
color: #181818;
font-family: "Georgia", "Times New Roman", serif;
font-weight: normal;
font-size: 14px;
line-height: 21px; }
@ -350,7 +362,7 @@ p {
p img {
margin: 0; }
p.lead {
.lead {
font-size: 21px;
line-height: 27px;
color: #777777; }
@ -400,12 +412,12 @@ hr {
================================================== */
a, a:visited {
color: #333333;
text-decoration: underline;
outline: 0; }
text-decoration: underline; }
a:hover, a:focus {
color: black;
text-decoration: none; }
text-decoration: none;
outline: 0; }
p a, p a:visited {
line-height: inherit; }
@ -442,7 +454,7 @@ li {
line-height: 18px;
margin: 0 0 12px 0; }
ul.large li {
.large li {
line-height: 21px; }
li p {
@ -455,6 +467,7 @@ button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
background-color: #cccccc;
background-color: rgba(153, 153, 153, 0.2);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.2)), to(rgba(0, 0, 0, 0.2)));
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
@ -465,9 +478,9 @@ input[type="button"] {
border: 1px solid #aaaaaa;
border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #444444;
display: inline-block;
font-size: 11px;
@ -485,6 +498,7 @@ button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
background-color: #cccccc;
background-color: rgba(153, 153, 153, 0.3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.3)), to(rgba(0, 0, 0, 0.3)));
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3));
@ -502,6 +516,7 @@ button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
background-color: #cccccc;
background-color: rgba(153, 153, 153, 0.2);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.2)), to(rgba(0, 0, 0, 0.2)));
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
@ -511,14 +526,14 @@ input[type="button"]:active {
background-repeat: repeat-x;
border: 1px solid #666666; }
.button.full-width,
.button .full-width,
button.full-width,
input[type="submit"].full-width,
input[type="reset"].full-width,
input[type="button"].full-width {
width: 100%;
padding-left: 0 !important;
padding-right: 0 !important;
padding-left: 0;
padding-right: 0;
text-align: center; }
/* Fix for odd Mozilla border & padding issues */
@ -551,10 +566,9 @@ textarea,
select {
border: 1px solid #cccccc;
padding: 6px 4px;
outline: none;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #777777;
width: 210px;
@ -576,6 +590,7 @@ input[type="tel"]:focus,
textarea:focus {
border: 1px solid #aaaaaa;
color: #444444;
outline: none;
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); }
@ -603,7 +618,7 @@ legend span {
/* #Images
================================================== */
img.scale-with-grid {
.scale-with-grid {
max-width: 100%;
height: auto; }

4
css/skeleton.min.css vendored
View File

File diff suppressed because one or more lines are too long

8
scss/_forms.scss
View File

@ -40,14 +40,14 @@ input[type="button"]:active {
border: $form_button_active_border;
}
.button.full-width,
.button .full-width,
button.full-width,
input[type="submit"].full-width,
input[type="reset"].full-width,
input[type="button"].full-width {
width: 100%;
padding-left: 0 !important;
padding-right: 0 !important;
padding-left: 0;
padding-right: 0;
text-align: center;
}
@ -86,7 +86,6 @@ textarea,
select {
border: $form_input_border;
padding: $form_input_padding;
outline: none;
@include border-radius(2px);
font: $form_input_font_size $form_element_font;
color: $form_input_text_colour;
@ -111,6 +110,7 @@ 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))
}

53
scss/_grid.scss
View File

@ -2,15 +2,14 @@
position: relative;
margin: 0 auto;
padding: 0;
& .alpha { margin-left: 0; }
& .omega { margin-right: 0; }
}
.column, .columns {
float: left;
display: inline;
margin-left: $gutter/2;
margin-right: $gutter/2;
&.alpha { margin-left: 0; }
&.omega { margin-right: 0; }
}
.row { margin-bottom: $gutter; }
@ -22,13 +21,13 @@
@media only screen and (max-width: 959px) {
@include grid($tablet-container-width, $column-count, $gutter);
.container { width: $tablet-container-width; }
.container {
width: $tablet-container-width;
& .alpha { margin-right: 10px; }
& .omega { margin-left: 10px; }
}
.column, .columns {
&.alpha { margin-right: 10px; }
&.omega { margin-left: 10px; } }
.alpha.omega {
.alpha, .omega {
margin-right: 0;
margin-left: 0; }
}
@ -37,27 +36,27 @@
@media only screen and (max-width: 767px) {
.container {
width: $mobile-container-width;
& .one,
& .two,
& .three,
& .four,
& .five,
& .six,
& .seven,
& .eight,
& .nine,
& .ten,
& .eleven,
& .twelve,
& .thirteen,
& .fourteen,
& .fifteen,
& .sixteen,
& .one-third,
& .two-thirds { width: $mobile-column-width; }
.column, .columns {
margin: 0;
&.one,
&.two,
&.three,
&.four,
&.five,
&.six,
&.seven,
&.eight,
&.nine,
&.ten,
&.eleven,
&.twelve,
&.thirteen,
&.fourteen,
&.fifteen,
&.sixteen,
&.one-third,
&.two-thirds { width: $mobile-column-width; }
}
.offset-by-one,

2
scss/_images.scss
View File

@ -1,7 +1,7 @@
/* #Images
================================================== */
img.scale-with-grid {
.scale-with-grid {
max-width: 100%;
height: auto;
}

2
scss/_links.scss
View File

@ -3,12 +3,12 @@
a, a:visited {
color: $link_colour;
text-decoration: $link_decoration;
outline: $link_outline;
}
a:hover, a:focus {
color: $link_hover_colour;
text-decoration: $link_hover_decoration;
outline: $link_outline;
}
p a, p a:visited {

2
scss/_lists.scss
View File

@ -39,7 +39,7 @@ li {
margin: $list_item_margin;
}
ul.large li {
.large li {
line-height: $list_large_line_height;
}

61
scss/_mixins.scss
View File

@ -5,12 +5,12 @@
}
@mixin col-count($colCount, $colSpacing) {
column-count: $colCount;
column-gap: $colSpacing;
-webkit-column-count: $colCount;
-webkit-column-gap: $colSpacing;
-moz-column-count: $colCount;
-moz-column-gap: $colSpacing;
column-count: $colCount;
column-gap: $colSpacing;
}
@mixin size($height, $width) {
@ -23,33 +23,33 @@
}
@mixin border-radius($radius) {
border-radius: $radius;
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
@mixin border-top-left-radius($radius) {
border-top-left-radius: $radius;
-webkit-border-top-left-radius: $radius;
-moz-border-radius-topleft: $radius;
border-top-left-radius: $radius;
}
@mixin border-top-right-radius($radius) {
border-top-right-radius: $radius;
-webkit-border-top-right-radius: $radius;
-moz-border-radius-topright: $radius;
border-top-right-radius: $radius;
}
@mixin border-bottom-right-radius($radius) {
border-bottom-right-radius: $radius;
-webkit-border-bottom-right-radius: $radius;
-moz-border-radius-bottomright: $radius;
border-bottom-right-radius: $radius;
}
@mixin border-bottom-left-radius($radius) {
border-bottom-left-radius: $radius;
-webkit-border-bottom-left-radius: $radius;
-moz-border-radius-bottomleft: $radius;
border-bottom-left-radius: $radius;
}
@mixin border-top-radius($radius) {
@ -73,23 +73,23 @@
}
@mixin background-size($size){
background-size: $size;
-webkit-background-size: $size;
-moz-background-size: $size;
-o-background-size: $size;
background-size: $size;
}
@mixin box-sizing($boxsize) {
box-sizing: $boxsize;
-webkit-box-sizing: $boxsize;
-moz-box-sizing: $boxsize;
-ms-box-sizing: $boxsize;
-o-box-sizing: $boxsize;
-khtml-box-sizing: $boxsize;
box-sizing: $boxsize;
}
@mixin horizontal-gradient($startColour, $endColour) {
background-color: $endColour;
background-color: $fallback_hex_gradient_bg;
background-image: linear-gradient(to right, $startColour, $endColour);
background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColour), to($endColour));
background-image: -webkit-linear-gradient(left, $startColour, $endColour);
@ -99,6 +99,7 @@
}
@mixin vertical-gradient($startColour, $endColour) {
background-color: $fallback_hex_gradient_bg;
background-color: mix($startColour, $endColour, 60%);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColour), to($endColour));
background-image: -webkit-linear-gradient(top, $startColour, $endColour);
@ -120,26 +121,26 @@
.container {
width: $grid-container-width;
.columns, .column {
&.one { width: (1*$grid-column-width - $grid-gutter); }
&.two { width: (2*$grid-column-width - $grid-gutter); }
&.three { width: (3*$grid-column-width - $grid-gutter); }
&.four { width: (4*$grid-column-width - $grid-gutter); }
&.five { width: (5*$grid-column-width - $grid-gutter); }
&.six { width: (6*$grid-column-width - $grid-gutter); }
&.seven { width: (7*$grid-column-width - $grid-gutter); }
&.eight { width: (8*$grid-column-width - $grid-gutter); }
&.nine { width: (9*$grid-column-width - $grid-gutter); }
&.ten { width: (10*$grid-column-width - $grid-gutter); }
&.eleven { width: (11*$grid-column-width - $grid-gutter); }
&.twelve { width: (12*$grid-column-width - $grid-gutter); }
&.thirteen { width: (13*$grid-column-width - $grid-gutter); }
&.fourteen { width: (14*$grid-column-width - $grid-gutter); }
&.fifteen { width: (15*$grid-column-width - $grid-gutter); }
&.sixteen { width: (16*$grid-column-width - $grid-gutter); }
&.one-third { width: ($grid-container-width/3) - $grid-gutter; }
&.two-thirds { width: (($grid-container-width/3)*2) - $grid-gutter; }
}
.one { width: (1*$grid-column-width - $grid-gutter); }
.two { width: (2*$grid-column-width - $grid-gutter); }
.three { width: (3*$grid-column-width - $grid-gutter); }
.four { width: (4*$grid-column-width - $grid-gutter); }
.five { width: (5*$grid-column-width - $grid-gutter); }
.six { width: (6*$grid-column-width - $grid-gutter); }
.seven { width: (7*$grid-column-width - $grid-gutter); }
.eight { width: (8*$grid-column-width - $grid-gutter); }
.nine { width: (9*$grid-column-width - $grid-gutter); }
.ten { width: (10*$grid-column-width - $grid-gutter); }
.eleven { width: (11*$grid-column-width - $grid-gutter); }
.twelve { width: (12*$grid-column-width - $grid-gutter); }
.thirteen { width: (13*$grid-column-width - $grid-gutter); }
.fourteen { width: (14*$grid-column-width - $grid-gutter); }
.fifteen { width: (15*$grid-column-width - $grid-gutter); }
.sixteen { width: (16*$grid-column-width - $grid-gutter); }
.one-third { width: ($grid-container-width/3) - $grid-gutter; }
.two-thirds { width: (($grid-container-width/3)*2) - $grid-gutter; }
.offset-by-one { padding-left: $grid-column-width; }
.offset-by-two { padding-left: $grid-column-width*2; }

6
scss/_reset.scss
View File

@ -39,13 +39,13 @@ table {
/* #Misc
================================================== */
.remove-bottom {
margin-bottom: 0 !important;
margin-bottom: 0;
}
.half-bottom {
margin-bottom: 10px !important;
margin-bottom: 10px;
}
.add-bottom {
margin-bottom: 20px !important;
margin-bottom: 20px;
}

26
scss/_typography.scss
View File

@ -11,46 +11,58 @@
font-style: normal; }
*/
h1, h2, h3, h4, h5, h6 {
color: $heading_colour;
font-family: $heading_font;
font-weight: $heading_font_weight;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
font-weight: inherit;
}
h1 {
color: $heading_colour;
font-family: $heading_font;
font-weight: $heading_font_weight;
font-size: $heading1_font_size;
line-height: $heading1_line_height;
margin: $heading1_margin;
}
h2 {
color: $heading_colour;
font-family: $heading_font;
font-weight: $heading_font_weight;
font-size: $heading2_font_size;
line-height: $heading2_line_height;
margin: $heading2_margin;
}
h3 {
color: $heading_colour;
font-family: $heading_font;
font-weight: $heading_font_weight;
font-size: $heading3_font_size;
line-height: $heading3_line_height;
margin: $heading3_margin;
}
h4 {
color: $heading_colour;
font-family: $heading_font;
font-weight: $heading_font_weight;
font-size: $heading4_font_size;
line-height: $heading4_line_height;
margin: $heading4_margin;
}
h5 {
color: $heading_colour;
font-family: $heading_font;
font-weight: $heading_font_weight;
font-size: $heading5_font_size;
line-height: $heading5_line_height;
}
h6 {
color: $heading_colour;
font-family: $heading_font;
font-weight: $heading_font_weight;
font-size: $heading6_font_size;
line-height: $heading6_line_height;
}
@ -67,7 +79,7 @@ p img {
margin: $paragraph_image_margin;
}
p.lead {
.lead {
font-size: $paragraph_lead_font_size;
line-height: $paragraph_lead_line_height;
color: $paragraph_lead_colour;

2
scss/_variables.scss
View File

@ -117,3 +117,5 @@ $list_item_line_height: 18px;
$list_item_margin: 0 0 12px 0;
$list_item_paragraph_line_height: 21px;
$fallback_hex_gradient_bg: #CCC;

1
scss/skeleton.scss vendored
View File

@ -21,6 +21,7 @@ body {
font: 14px/21px $body_font_family;
color: #444;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/* #Forms