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

Merge branch 'release/1.0.2'

Browse Source
This commit is contained in:
Nick Pack
2013-05-17 13:10:43 +01:00
parent 9db2cff433 5a76c0c8c6
commit f1ee798ae4
17 changed files with 193 additions and 151 deletions
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: { csslint: {
scssoutput: { scssoutput: {
options: { options: {
import: false import: false,
csslintrc: '.csslintrc'
}, },
src: ['css/skeleton.css'] src: ['css/skeleton.css']
} }

6
README.md
View File

@@ -14,6 +14,11 @@ Either clone this repository and drop in manually, or install from bower:
bower install --save Skeleton-SCSS bower install --save Skeleton-SCSS
``` ```
## Build status
The project is set up to build and run csslint on Travis:
Master: [![Build Status](https://travis-ci.org/nickpack/Skeleton-SCSS.png)](https://travis-ci.org/nickpack/Skeleton-SCSS)
Development: [![Build Status](https://travis-ci.org/nickpack/Skeleton-SCSS.png?branch=develop)](https://travis-ci.org/nickpack/Skeleton-SCSS)
## Building ## Building
I've added grunt configuration to the repository for those of you that use it. I've added grunt configuration to the repository for those of you that use it.
@@ -30,6 +35,7 @@ Then following that, from the root dir of this project, run `npm install` which
You should be good to go. You should be good to go.
## Changelog ## Changelog
* May 17, 2013 - (v1.0.2) Travis CI build configuration, and minor refactor to remove as many of the warnings from CSSLint as was feasible to do - MAY CAUSE REGRESSIONS.
* May 17, 2013 - (v1.0.1) Added grunt build tools * May 17, 2013 - (v1.0.1) Added grunt build tools
* Apr 23, 2013 - (v1.0.0) Skeleton SCSS v1.0 - Additional variable conversions, changes based on feedback to the original project and bower submission. * Apr 23, 2013 - (v1.0.0) Skeleton SCSS v1.0 - Additional variable conversions, changes based on feedback to the original project and bower submission.
* Jan 31, 2013 - Completed SCSS conversion of Skeleton 1.2. * Jan 31, 2013 - Completed SCSS conversion of Skeleton 1.2.

2
component.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "Skeleton-SCSS", "name": "Skeleton-SCSS",
"version": "1.0.1", "version": "1.0.2",
"main": "css/skeleton.css", "main": "css/skeleton.css",
"ignore": [ "ignore": [
"**/.*", "**/.*",

151
css/skeleton.css vendored
View File

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

4
css/skeleton.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@@ -2,7 +2,7 @@
"name": "Skeleton-SCSS", "name": "Skeleton-SCSS",
"title": "Skeleton SCSS", "title": "Skeleton SCSS",
"description": "Skeleton: A Beautiful Boilerplate for Responsive, Mobile-Friendly Development.", "description": "Skeleton: A Beautiful Boilerplate for Responsive, Mobile-Friendly Development.",
"version": "1.0.1", "version": "1.0.2",
"homepage": "https://github.com/nickpack/Skeleton-SCSS", "homepage": "https://github.com/nickpack/Skeleton-SCSS",
"author": { "author": {
"name": "Nick Pack", "name": "Nick Pack",

6
scss/_forms.scss
View File

@@ -46,8 +46,8 @@ input[type="submit"].full-width,
input[type="reset"].full-width, input[type="reset"].full-width,
input[type="button"].full-width { input[type="button"].full-width {
width: 100%; width: 100%;
padding-left: 0 !important; padding-left: 0;
padding-right: 0 !important; padding-right: 0;
text-align: center; text-align: center;
} }
@@ -86,7 +86,6 @@ textarea,
select { select {
border: $form_input_border; border: $form_input_border;
padding: $form_input_padding; padding: $form_input_padding;
outline: none;
@include border-radius(2px); @include border-radius(2px);
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;
@@ -111,6 +110,7 @@ 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;
@include box-shadow(0, 0, 3px, rgba(0, 0, 0, .2)) @include box-shadow(0, 0, 3px, rgba(0, 0, 0, .2))
} }

21
scss/_grid.scss
View File

@@ -2,15 +2,14 @@
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
padding: 0; padding: 0;
& .alpha { margin-left: 0; }
& .omega { margin-right: 0; }
} }
.column, .columns { .column, .columns {
float: left; float: left;
display: inline;
margin-left: $gutter/2; margin-left: $gutter/2;
margin-right: $gutter/2; margin-right: $gutter/2;
&.alpha { margin-left: 0; }
&.omega { margin-right: 0; }
} }
.row { margin-bottom: $gutter; } .row { margin-bottom: $gutter; }
@@ -22,13 +21,13 @@
@media only screen and (max-width: 959px) { @media only screen and (max-width: 959px) {
@include grid($tablet-container-width, $column-count, $gutter); @include grid($tablet-container-width, $column-count, $gutter);
.container { width: $tablet-container-width; } .container {
width: $tablet-container-width;
.column, .columns {
& .alpha { margin-right: 10px; } & .alpha { margin-right: 10px; }
&.omega { margin-left: 10px; } } & .omega { margin-left: 10px; }
}
.alpha.omega { .alpha, .omega {
margin-right: 0; margin-right: 0;
margin-left: 0; } margin-left: 0; }
} }
@@ -37,9 +36,6 @@
@media only screen and (max-width: 767px) { @media only screen and (max-width: 767px) {
.container { .container {
width: $mobile-container-width; width: $mobile-container-width;
.column, .columns {
margin: 0;
& .one, & .one,
& .two, & .two,
& .three, & .three,
@@ -58,6 +54,9 @@
& .sixteen, & .sixteen,
& .one-third, & .one-third,
& .two-thirds { width: $mobile-column-width; } & .two-thirds { width: $mobile-column-width; }
.column, .columns {
margin: 0;
} }
.offset-by-one, .offset-by-one,

2
scss/_images.scss
View File

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

2
scss/_links.scss
View File

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

2
scss/_lists.scss
View File

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

61
scss/_mixins.scss
View File

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

6
scss/_reset.scss
View File

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

26
scss/_typography.scss
View File

@@ -11,46 +11,58 @@
font-style: normal; } 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 { h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
font-weight: inherit; font-weight: inherit;
} }
h1 { h1 {
color: $heading_colour;
font-family: $heading_font;
font-weight: $heading_font_weight;
font-size: $heading1_font_size; font-size: $heading1_font_size;
line-height: $heading1_line_height; line-height: $heading1_line_height;
margin: $heading1_margin; margin: $heading1_margin;
} }
h2 { h2 {
color: $heading_colour;
font-family: $heading_font;
font-weight: $heading_font_weight;
font-size: $heading2_font_size; font-size: $heading2_font_size;
line-height: $heading2_line_height; line-height: $heading2_line_height;
margin: $heading2_margin; margin: $heading2_margin;
} }
h3 { h3 {
color: $heading_colour;
font-family: $heading_font;
font-weight: $heading_font_weight;
font-size: $heading3_font_size; font-size: $heading3_font_size;
line-height: $heading3_line_height; line-height: $heading3_line_height;
margin: $heading3_margin; margin: $heading3_margin;
} }
h4 { h4 {
color: $heading_colour;
font-family: $heading_font;
font-weight: $heading_font_weight;
font-size: $heading4_font_size; font-size: $heading4_font_size;
line-height: $heading4_line_height; line-height: $heading4_line_height;
margin: $heading4_margin; margin: $heading4_margin;
} }
h5 { h5 {
color: $heading_colour;
font-family: $heading_font;
font-weight: $heading_font_weight;
font-size: $heading5_font_size; font-size: $heading5_font_size;
line-height: $heading5_line_height; line-height: $heading5_line_height;
} }
h6 { h6 {
color: $heading_colour;
font-family: $heading_font;
font-weight: $heading_font_weight;
font-size: $heading6_font_size; font-size: $heading6_font_size;
line-height: $heading6_line_height; line-height: $heading6_line_height;
} }
@@ -67,7 +79,7 @@ p img {
margin: $paragraph_image_margin; margin: $paragraph_image_margin;
} }
p.lead { .lead {
font-size: $paragraph_lead_font_size; font-size: $paragraph_lead_font_size;
line-height: $paragraph_lead_line_height; line-height: $paragraph_lead_line_height;
color: $paragraph_lead_colour; 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_margin: 0 0 12px 0;
$list_item_paragraph_line_height: 21px; $list_item_paragraph_line_height: 21px;
$fallback_hex_gradient_bg: #CCC;

3
scss/skeleton.scss vendored
View File

@@ -1,5 +1,5 @@
/* /*
* Skeleton SCSS V1.0.1 * Skeleton SCSS V1.0.2
* Skeleton is Copyright 2011, Dave Gamache * Skeleton is Copyright 2011, Dave Gamache
* *
* SCSS Conversion and Mixins by Nick Pack * SCSS Conversion and Mixins by Nick Pack
@@ -21,6 +21,7 @@ body {
font: 14px/21px $body_font_family; font: 14px/21px $body_font_family;
color: #444; color: #444;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
} }
/* #Forms /* #Forms