Repo restructure

This commit is contained in:
Nick Pack
2013-07-15 10:28:06 +01:00
parent 0fcf83793e
commit d8d6f54b67
19 changed files with 6 additions and 6 deletions

View File

@ -1,50 +0,0 @@
/*
* 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
*/
@import "_variables";
@import "normalize/_normalize";
@import "_mixins";
body {
background: #fff;
font: 14px/21px $body_font_family;
color: #444;
-webkit-text-size-adjust: 100%;
-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";
@import "_lists";
@import "_forms";
@import "_images";
// Smaller than standard 960 (devices and browsers)
@media only screen and (max-width: 959px) {}
// 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)
@media only screen and (max-width: 767px) {}
// 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)
@media only screen and (max-width: 479px) {}

View File

@ -1,141 +0,0 @@
// #Buttons
// ==================================================
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
@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: $form_button_font_size;
font-weight: bold;
text-decoration: none;
text-shadow: $form_button_text_shadow;
cursor: pointer;
margin: $form_input_margin;
line-height: $form_button_line_height;
padding: $form_button_padding;
font-family: $form_element_font;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
@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,
button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
@include vertical-gradient($form_button_active_gradient_start, $form_button_active_gradient_end);
border: $form_button_active_border;
}
.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;
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: $form_fieldset_margin;
}
fieldset {
margin: $form_fieldset_margin;
}
input[type="search"],
input[type="url"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="tel"],
textarea,
select {
border: $form_input_border;
padding: $form_input_padding;
@include border-radius($form_input_border_radius);
font: $form_input_font_size $form_element_font;
color: $form_input_text_colour;
width: $form_input_width;
max-width: 100%;
display: block;
margin: $form_input_margin;
background: $form_input_background;
}
select {
padding: $form_input_select_padding;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus {
border: $form_input_focus_border;
color: $form_input_focus_text_colour;
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: $form_textarea_min_height;
}
label,
legend {
display: block;
font-weight: $legend_font_weight;
font-size: $legend_font_size;
}
select {
width: $form_input_select_width;
}
input[type="checkbox"] {
display: $form_input_checkbox_display;
}
label span,
legend span {
font-weight: normal;
font-size: $form_input_font_size;
color: $form_label_legend_colour;
}

View File

@ -1,117 +0,0 @@
.container {
position: relative;
margin: 0 auto;
padding: 0;
& .alpha { margin-left: 0; }
& .omega { margin-right: 0; }
}
.column, .columns {
float: left;
margin-left: $gutter/2;
margin-right: $gutter/2;
}
.alpha-omega {
margin-right: 0;
margin-left: 0;
}
.row { margin-bottom: $gutter; }
@include grid($desktop-container-width, $column-count, $gutter);
//-----------------------------------------------------------------------
// #Tablet
@media only screen and (max-width: 959px) {
@include grid($tablet-container-width, $column-count, $gutter);
.container {
width: $tablet-container-width;
& .alpha { margin-right: 10px; }
& .omega { margin-left: 10px; }
}
}
//--------------------------------------------------------------------
// #Mobile
@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,
& .one-half,
& .one-quarter,
& .three-quarters
{ width: $mobile-column-width; }
.column, .columns {
margin: 0;
}
.offset-by-one,
.offset-by-two,
.offset-by-three,
.offset-by-four,
.offset-by-five,
.offset-by-six,
.offset-by-seven,
.offset-by-eight,
.offset-by-nine,
.offset-by-ten,
.offset-by-eleven,
.offset-by-twelve,
.offset-by-thirteen,
.offset-by-fourteen,
.offset-by-fifteen { padding-left: 0; }
}
}
// #Clearing
// ==================================================
.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">
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.row:after,
.clearfix:after {
clear: both; }
.row,
.clearfix {
zoom: 1; }
// You can also use a <br class="clear" /> to clear columns
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}

View File

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

View File

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

View File

@ -1,48 +0,0 @@
// #Lists
// ==================================================
ul, ol {
margin: $list_margin;
}
ul {
list-style: $ul_list_style;
}
ol {
list-style: $ol_list_style;
}
ol, ul.square, ul.circle, ul.disc {
margin: $list_styled_margin;
}
ul.square {
list-style: square $list_styled_position;
}
ul.circle {
list-style: circle $list_styled_position;
}
ul.disc {
list-style: disc $list_styled_position;
}
ul ul, ul ol,
ol ol, ol ul {
margin: $nested_list_margin;
font-size: $nested_list_font_size;
}
li {
line-height: $list_item_line_height;
margin: $list_item_margin;
}
.large li {
line-height: $list_large_line_height;
}
li p {
line-height: $list_item_paragraph_line_height;
}

View File

@ -1,172 +0,0 @@
@mixin button_border($rightbottom, $topleft) {
border: $rightbottom;
border-top: $topleft;
border-left: $topleft;
}
@mixin col-count($colCount, $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) {
height: $height;
width: $width;
}
@mixin square($size) {
@include size($size, $size);
}
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
@mixin 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) {
-webkit-border-top-right-radius: $radius;
-moz-border-radius-topright: $radius;
border-top-right-radius: $radius;
}
@mixin 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) {
-webkit-border-bottom-left-radius: $radius;
-moz-border-radius-bottomleft: $radius;
border-bottom-left-radius: $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){
-webkit-background-size: $size;
-moz-background-size: $size;
-o-background-size: $size;
background-size: $size;
}
@mixin 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: $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);
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: $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);
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;
}
@mixin grid($grid-container-width, $grid-column-count:$column-count, $grid-gutter:$gutter) {
$grid-column-width: $grid-container-width/$grid-column-count;
.container {
width: $grid-container-width;
.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-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; }
.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; }
.offset-by-five { padding-left: $grid-column-width*5; }
.offset-by-six { padding-left: $grid-column-width*6; }
.offset-by-seven { padding-left: $grid-column-width*7; }
.offset-by-eight { padding-left: $grid-column-width*8; }
.offset-by-nine { padding-left: $grid-column-width*9; }
.offset-by-ten { padding-left: $grid-column-width*10; }
.offset-by-eleven { padding-left: $grid-column-width*11; }
.offset-by-twelve { padding-left: $grid-column-width*12; }
.offset-by-thirteen { padding-left: $grid-column-width*13; }
.offset-by-fourteen { padding-left: $grid-column-width*14; }
.offset-by-fifteen { padding-left: $grid-column-width*15; }
}
}
@mixin clearfix {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}

View File

@ -1,117 +0,0 @@
// #Typography
// ==================================================
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;
}
.subheader {
color: $subheader_colour;
}
p {
margin: $paragraph_margin;
line-height: $paragraph_line_height;
}
p img {
margin: $paragraph_image_margin;
}
.lead {
font-size: $paragraph_lead_font_size;
line-height: $paragraph_lead_line_height;
color: $paragraph_lead_colour;
}
em {
font-style: italic;
}
strong {
font-weight: bold;
color: $strong_colour;
}
small {
font-size: 80%;
}
blockquote, blockquote p {
font-size: $blockquote_font_size;
line-height: $blockquote_line_height;
color: $blockquote_colour;
font-style: $blockquote_font_style;
}
blockquote {
margin: $blockquote_margin;
padding: $blockquote_padding;
border-left: $blockquote_border_left;
}
blockquote cite {
display: block;
font-size: $blockquote_cite_font_size;
color: $blockquote_cite_colour;
}
blockquote cite:before {
content: "\2014 \0020";
}
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited {
color: $blockquote_cite_link_colour;
}

View File

@ -1,140 +0,0 @@
$gutter: 20px;
$column-count: 16;
$desktop-container-width: 960px;
$tablet-container-width: 768px;
$mobile-container-width: 90%;
$mobile-column-width: 100%;
$base_font_size: 14px;
$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_font_size: 11px;
$form_button_padding: 8px 10px;
$form_button_line_height: normal;
$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_padding: 6px 4px;
$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;
$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;
$link_hover_colour: #000;
$link_hover_decoration: none;
$heading_font: "Georgia", "Times New Roman", serif;
$heading_font_weight: normal;
$heading_colour: #181818;
$heading1_font_size: 46px;
$heading1_line_height: $heading1_font_size * 1.5;
$heading1_margin: 0 0 14px 0;
$heading2_font_size: 35px;
$heading2_line_height: $heading2_font_size * 1.5;
$heading2_margin: 0 0 10px 0;
$heading3_font_size: 28px;
$heading3_line_height: $heading3_font_size * 1.5;
$heading3_margin: 0 0 8px 0;
$heading4_font_size: 21px;
$heading4_line_height: $heading4_font_size * 1.5;
$heading4_margin: 0 0 4px 0;
$heading5_font_size: 17px;
$heading5_line_height: $heading5_font_size * 1.5;
$heading6_font_size: 14px;
$heading6_line_height: $heading6_font_size * 1.5;
$subheader_colour: #777;
$paragraph_margin: 0 0 20px 0;
$paragraph_image_margin: 0;
$paragraph_line_height: $base_font_size * 1.5;
$paragraph_lead_font_size: 21px;
$paragraph_lead_line_height: $paragraph_lead_font_size * 1.5;
$paragraph_lead_colour: #777;
$strong_colour: #333;
$blockquote_colour: #777;
$blockquote_border_left: 1px solid #ddd;
$blockquote_cite_colour: #555;
$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;
$hr_margin: 10px 0 30px;
$body_font_family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
$list_margin: 0 0 20px 0;
$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_position: outside; // List item bullet position
$nested_list_margin: 4px 0 5px 30px;
$nested_list_font_size: 90%;
$list_item_line_height: 18px;
$list_item_margin: 0 0 12px 0;
$list_item_paragraph_line_height: 21px;
$fallback_hex_gradient_bg: #CCC;