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

Finished SCSS conversion

Browse Source
This commit is contained in:
Nick Pack 2013-01-31 18:49:28 +00:00
parent 4294551c95
commit 0b1467d62c
13 changed files with 219 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README
View File

@ -1,6 +1,5 @@
Skeleton > SCSS
======================
I'll expand this and finish what I started when I have more time to spend on it.
Skeleton SCSS Conversion
============================
Compile with:
sass scss/style.scss:stylesheets/style.css

58
scss/forms.scss → scss/_forms.scss
View File

@ -1,33 +1,19 @@
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/
/* #Buttons
================================================== */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
@include button_bg;
border: 1px solid #aaa;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #444;
@include vertical-gradient($form_button_gradient_start, $form_button_gradient_end);
@include button_border($form_button_border_rightbottom, $form_button_border_topleft);
@include border-radius($form_button_border_radius);
color: $form_button_text_colour;
display: inline-block;
font-size: 11px;
font-weight: bold;
text-decoration: none;
text-shadow: 0 1px rgba(255, 255, 255, .75);
text-shadow: $form_button_text_shadow;
cursor: pointer;
margin-bottom: 20px;
line-height: normal;
@ -40,11 +26,9 @@ button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
@include button_hover_bg;
color: #222;
border: 1px solid #888;
border-top: 1px solid #aaa;
border-left: 1px solid #aaa;
@include vertical-gradient($form_button_hover_gradient_start, $form_button_hover_gradient_end);
color: $form_button_hover_text_colour;
@include button_border($form_button_hover_border_rightbottom, $form_button_hover_border_topleft);
}
.button:active,
@ -52,8 +36,8 @@ button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
@include button_active_bg;
border: 1px solid #666;
@include vertical-gradient($form_button_active_gradient_start, $form_button_active_gradient_end);
border: $form_button_active_border;
}
.button.full-width,
@ -90,20 +74,18 @@ input[type="password"],
input[type="email"],
textarea,
select {
border: 1px solid #ccc;
border: $form_input_border;
padding: 6px 4px;
outline: none;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #777;
@include border-radius(2px);
font: 13px $form_element_font;
color: $form_input_text_colour;
margin: 0;
width: 210px;
max-width: 100%;
display: block;
margin-bottom: 20px;
background: #fff;
background: $form_input_background;
}
select {
@ -114,11 +96,9 @@ input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
border: 1px solid #aaa;
color: #444;
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .2);
box-shadow: 0 0 3px rgba(0, 0, 0, .2);
border: $form_input_focus_border;
color: $form_input_focus_text_colour;
@include box-shadow(0, 0, 3px, rgba(0, 0, 0, .2))
}
textarea {
@ -144,5 +124,5 @@ label span,
legend span {
font-weight: normal;
font-size: 13px;
color: #444;
color: $form_label_legend_colour;
}

10
scss/grid.scss → scss/_grid.scss
View File

@ -1,12 +1,3 @@
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/
/* #Base 960 Grid
================================================== */
@ -194,7 +185,6 @@
.container .two-thirds.column { width: 420px; }
}
/* #Clearing
================================================== */

7
scss/_images.scss Normal file
View File

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

15
scss/_links.scss Normal file
View File

@ -0,0 +1,15 @@
/* #Links
================================================== */
a, a:visited {
color: $link_colour;
text-decoration: underline;
outline: 0;
}
a:hover, a:focus {
color: $link_hover_colour;
}
p a, p a:visited {
line-height: inherit;
}

9
scss/lists.scss → scss/_lists.scss
View File

@ -1,12 +1,3 @@
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/
/* #Lists
================================================== */
ul, ol {

112
scss/_mixins.scss Normal file
View File

@ -0,0 +1,112 @@
@mixin button_border($rightbottom, $topleft) {
border: $rightbottom;
border-top: $topleft;
border-left: $topleft;
}
@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;
}
@mixin size($height, $width) {
height: $height;
width: $width;
}
@mixin square($size) {
@include size($size, $size);
}
@mixin border-radius($radius) {
border-radius: $radius;
-webkit-border-radius: $radius;
-moz-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;
}
@mixin border-top-right-radius($radius) {
border-top-right-radius: $radius;
-webkit-border-top-right-radius: $radius;
-moz-border-radius-topright: $radius;
}
@mixin border-bottom-right-radius($radius) {
border-bottom-right-radius: $radius;
-webkit-border-bottom-right-radius: $radius;
-moz-border-radius-bottomright: $radius;
}
@mixin border-bottom-left-radius($radius) {
border-bottom-left-radius: $radius;
-webkit-border-bottom-left-radius: $radius;
-moz-border-radius-bottomleft: $radius;
}
@mixin border-top-radius($radius) {
@include border-top-right-radius($radius);
@include border-top-left-radius($radius);
}
@mixin border-right-radius($radius) {
@include border-top-right-radius($radius);
@include border-bottom-right-radius($radius);
}
@mixin border-bottom-radius($radius) {
@include border-bottom-right-radius($radius);
@include border-bottom-left-radius($radius);
}
@mixin border-left-radius($radius) {
@include border-top-left-radius($radius);
@include border-bottom-left-radius($radius);
}
@mixin background-size($size){
background-size: $size;
-webkit-background-size: $size;
-moz-background-size: $size;
-o-background-size: $size;
}
@mixin box-sizing($boxsize) {
box-sizing: $boxsize;
-webkit-box-sizing: $boxsize;
-moz-box-sizing: $boxsize;
}
@mixin horizontal-gradient($startColour, $endColour) {
background-color: $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-linear-gradient(left, $startColour, $endColour);
background-image: -moz-linear-gradient(left, $startColour, $endColour);
background-image: -o-linear-gradient(left, $startColour, $endColour);
background-repeat: repeat-x;
}
@mixin vertical-gradient($startColour, $endColour) {
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);
background-image: -moz-linear-gradient(top, $startColour, $endColour);
background-image: -o-linear-gradient(top, $startColour, $endColour);
background-image: linear-gradient(to bottom, $startColour, $endColour);
background-repeat: repeat-x;
}
@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;
}

9
scss/reset.scss → scss/_reset.scss
View File

@ -1,12 +1,3 @@
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/
/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {

24
scss/typography.scss → scss/_typography.scss
View File

@ -1,12 +1,3 @@
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/
/* #Typography
================================================== */
/* @font-face {
@ -21,8 +12,8 @@
*/
h1, h2, h3, h4, h5, h6 {
color: #181818;
font-family: "Georgia", "Times New Roman", serif;
color: $heading_colour;
font-family: $heading_font;
font-weight: normal;
}
@ -99,20 +90,20 @@ small {
blockquote, blockquote p {
font-size: 17px;
line-height: 24px;
color: #777;
color: $blockquote_colour;
font-style: italic;
}
blockquote {
margin: 0 0 20px;
padding: 9px 20px 0 19px;
border-left: 1px solid #ddd;
border-left: $blockquote_border_left;
}
blockquote cite {
display: block;
font-size: 12px;
color: #555;
color: $blockquote_cite_colour;
}
blockquote cite:before {
@ -120,11 +111,12 @@ blockquote cite:before {
}
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited {
color: #555;
color: $blockquote_cite_link_colour;
}
/* not really typographical, but I couldnt find anywhere else to put it */
hr {
border: solid #ddd;
border: $hr_border;
border-width: 1px 0 0;
clear: both;
margin: 10px 0 30px;

43
scss/_variables.scss Normal file
View File

@ -0,0 +1,43 @@
$form_element_font: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
$form_button_border_radius: 3px;
$form_button_border_topleft: 1px solid #ccc;
$form_button_border_rightbottom: 1px solid #aaa;
$form_button_text_colour: #444;
$form_button_text_shadow: 0 1px rgba(255, 255, 255, .75);
$form_button_gradient_start: rgba(255, 255, 255, .2);
$form_button_gradient_end: rgba(0, 0, 0, .2);
$form_button_hover_border_topleft: 1px solid #aaa;
$form_button_hover_border_rightbottom: 1px solid #888;
$form_button_hover_gradient_start: rgba(255, 255, 255, .3);
$form_button_hover_gradient_end: rgba(0, 0, 0, .3);
$form_button_hover_text_colour: #222;
$form_button_active_border: 1px solid #666;
$form_button_active_gradient_start: rgba(255, 255, 255, .2);
$form_button_active_gradient_end: rgba(0, 0, 0, .2);
$form_input_border: 1px solid #ccc;
$form_input_text_colour: #777;
$form_input_background: #fff;
$form_input_focus_border: 1px solid #aaa;
$form_input_focus_text_colour: #444;
$form_label_legend_colour: #444;
$link_colour: #333;
$link_hover_colour: #000;
$heading_font: "Georgia", "Times New Roman", serif;
$heading_colour: #181818;
$blockquote_colour: #777;
$blockquote_border_left: 1px solid #ddd;
$blockquote_cite_colour: #555;
$blockquote_cite_link_colour: #555;
$hr_border: solid #ddd;
$body_font_family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;

16
scss/images.scss
View File

@ -1,16 +0,0 @@
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/
/* #Images
================================================== */
img.scale-with-grid {
max-width: 100%;
height: auto;
}

24
scss/links.scss
View File

@ -1,24 +0,0 @@
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/
/* #Links
================================================== */
a, a:visited {
color: #333;
text-decoration: underline;
outline: 0;
}
a:hover, a:focus {
color: #000;
}
p a, p a:visited {
line-height: inherit;
}

51
scss/style.scss
View File

@ -1,19 +1,24 @@
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
*
* SCSS Conversion and Mixins by Nick Pack
*
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/
@import "reset.scss";
@import "_variables";
@import "_reset";
@import "_mixins";
/* #Basic Styles
================================================== */
body {
background: #fff;
font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
font: 14px/21px $body_font_family;
color: #444;
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
-webkit-text-size-adjust: 100%;
@ -21,44 +26,14 @@ body {
/* #Forms
================================================== */
$form_element_font: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
@mixin button_bg {
background: #eee; /* Old browsers */
background: #eee -moz-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(0, 0, 0, .2) 100%); /* FF3.6+ */
background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, .2)), color-stop(100%, rgba(0, 0, 0, .2))); /* Chrome,Safari4+ */
background: #eee -webkit-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(0, 0, 0, .2) 100%); /* Chrome10+,Safari5.1+ */
background: #eee -o-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(0, 0, 0, .2) 100%); /* Opera11.10+ */
background: #eee -ms-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(0, 0, 0, .2) 100%); /* IE10+ */
background: #eee linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(0, 0, 0, .2) 100%); /* W3C */
}
@mixin button_hover_bg {
background: #ddd; /* Old browsers */
background: #ddd -moz-linear-gradient(top, rgba(255, 255, 255, .3) 0%, rgba(0, 0, 0, .3) 100%); /* FF3.6+ */
background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, .3)), color-stop(100%, rgba(0, 0, 0, .3))); /* Chrome,Safari4+ */
background: #ddd -webkit-linear-gradient(top, rgba(255, 255, 255, .3) 0%, rgba(0, 0, 0, .3) 100%); /* Chrome10+,Safari5.1+ */
background: #ddd -o-linear-gradient(top, rgba(255, 255, 255, .3) 0%, rgba(0, 0, 0, .3) 100%); /* Opera11.10+ */
background: #ddd -ms-linear-gradient(top, rgba(255, 255, 255, .3) 0%, rgba(0, 0, 0, .3) 100%); /* IE10+ */
background: #ddd linear-gradient(top, rgba(255, 255, 255, .3) 0%, rgba(0, 0, 0, .3) 100%); /* W3C */
}
@mixin button_active_bg {
background: #ccc; /* Old browsers */
background: #ccc -moz-linear-gradient(top, rgba(255, 255, 255, .35) 0%, rgba(10, 10, 10, .4) 100%); /* FF3.6+ */
background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, .35)), color-stop(100%, rgba(10, 10, 10, .4))); /* Chrome,Safari4+ */
background: #ccc -webkit-linear-gradient(top, rgba(255, 255, 255, .35) 0%, rgba(10, 10, 10, .4) 100%); /* Chrome10+,Safari5.1+ */
background: #ccc -o-linear-gradient(top, rgba(255, 255, 255, .35) 0%, rgba(10, 10, 10, .4) 100%); /* Opera11.10+ */
background: #ccc -ms-linear-gradient(top, rgba(255, 255, 255, .35) 0%, rgba(10, 10, 10, .4) 100%); /* IE10+ */
background: #ccc linear-gradient(top, rgba(255, 255, 255, .35) 0%, rgba(10, 10, 10, .4) 100%); /* W3C */
}
@import "grid.scss";
@import "typography.scss";
@import "links.scss";
@import "lists.scss";
@import "forms.scss";
@import "images.scss";
@import "_grid";
@import "_typography";
@import "_links";
@import "_lists";
@import "_forms";
@import "_images";
/* #Media Queries
================================================== */