Skip to content

Commit

Permalink
Adding Sass source to full code base
Browse files Browse the repository at this point in the history
  • Loading branch information
@justinhough
justinhough committed Dec 24, 2012
1 parent f016a19 commit afdecf1
Show file tree
Hide file tree
Showing 19 changed files with 1,011 additions and 0 deletions.
83 changes: 83 additions & 0 deletions sass/centurion.scss
View file
@@ -0,0 +1,83 @@
@import "core/base";

/* -------------------------------------------------------
Centurion Framework
Centurion Framework v 3.0
Created by: Justin Hough
Documentation: http://www.justinhough.com/centurion
GPL license:
http://www.gnu.org/licenses/gpl.html
-------------------------------------------------------- */
.hide-desktop { display: none; }
.hide-mobile { display: none; }
//.show-desktop { display: block; }
//.show-mobile { display: block; }

/* ======================================================
GRID
========================================================= */

/* Desktop Fixed Grid Layout - 960px */
@include fixed;

/* Tablet Fluid Grid Layout - 92% */
@media only screen and (max-width: 920px) {
@include fluid;
}

/* Mobile Grid Layout - 320px and 480px */
@media screen and (min-width: 320px) and (max-width: 768px) {
@include mobile;
@include navigation-mobile;
.hide-desktop { display: block; }
.hide-mobile { display: none; }
}


/* Centering Grid */
@include centerGrid;

/* Clearfix */
@include clearfix;


/* ======================================================
Features
========================================================= */

/* Breadrumbs */
@include breadcrumbs;

/* Buttons */
@include buttons;

/* Images */
@include images;

/* Navigation */
@include navigation-slim;

/* Panels */
@include panels;


/* Tables */
@include tables;
// Table Color Generator
// #1 - class
// #2 - header color
// #3 - even row color
// #4 - odd row color
//@include table-color-generator(__#1__ , __#2__, __#3__, __#4__);


/* Typography */
@include typography;

/* Print */
@media print { }
37 changes: 37 additions & 0 deletions sass/core/_base.scss
View file
@@ -0,0 +1,37 @@
@import "buttons"; // sizes and options

@import "colors"; // gradients, color values, text colors
@import "forms"; // input fields
@import "grid"; // grid system

@import "images"; // sprites, responsive
@import "navigation"; // sidebar, dropdown, list menu, mobile menu

@import "print"; // only included for print stylesheet

@import "breadcrumbs";
@import "panels";
@import "tables";
@import "typography"; // lists, blockquotes, captions, text, fonts
@import "various";
@import "images";


// Center a sized element
@mixin auto-center {
margin-left: auto;
margin-right: auto;
}

// Float - Left
// @include left(10px);
@mixin left($dist:10px) {
float: left;
margin-left: $dist;
}
@mixin float-left {
float: left;
}
@mixin float-right {
float: right;
}
Empty file added sass/core/_blank.scss
View file
Empty file.
34 changes: 34 additions & 0 deletions sass/core/_breadcrumbs.scss
View file
@@ -0,0 +1,34 @@
@import "compass/css3/border-radius";

// Breacrumbs
@mixin breadcrumbs {
ul {
&.cCrumbs {
display: block;
background: #F9F9F9;
padding: 7px 10px;
border: 1px solid #DDD;
border-radius: 2px;
overflow: hidden;
li {
margin: 0;
padding: 0 10px 0 0;
display: inline-block;
a,
span {
text-transform: uppercase;
font-size: 12px;
padding-right: 10px;
}
&:after {
content: ">";
color: #ccc;
}
&:last-child:after {
content: "";
}
}
}
}
}

166 changes: 166 additions & 0 deletions sass/core/_buttons.scss
View file
@@ -0,0 +1,166 @@
@import "compass/css3/border-radius";

// Buttons
// @include default-button;
@mixin default-button {
border: none;
@include border-radius(5px, 5px);
@include box-shadow(0, 1px, 2px);
@include gradient-two(#7d7e7d, #0e0e0e);
color: $white;
cursor: pointer;
display: inline-block;
font-family: $text-font;
@include text($white);
margin: 5px 0 10px 0;
outline: 0;
padding: 10px 22px;
text-decoration: none;
vertical-align: middle;
zoom: 1;
}

// @include default-button-hover;
@mixin default-button-hover {
color: $white;
@include gradient-two(#9b9b9b, #3d3d3d);
}


// COLOR TOP BOTTOM

// Black - #7d7e7d #0e0e0e
// Black:hover - #9b9b9b #3d3d3d

// grey - #ffffff #e5e5e5
// grey:hover - #ffffff #b7b7b7

// blue - #a7cfdf #23538a
// blue:hover - #a7cfdf #004089

// red - #ff3019 #cf0404
// red:hover - #ff3819 #aa0303

// yellow - #fced62 #febf04
// yellow:hover - #fced62 #ffaa00

// orange - #ffa84c #ff7b0d
// orange:hover - #ffa84c #fc6000

// green - #a4b357 #75890c
// green:hover - #a4b357 #5b7a00


@mixin buttons {
.button {
@include default-button;

&:hover,
&:active,
&:visited {
@include default-button-hover;
}

/* Button - Grey */
&.grey {
color: $text-color;
@include gradient-two(#ffffff, #e5e5e5);

&:hover,
&:active,
&:visited {
color: $text-color;
@include gradient-two(#ffffff, #b7b7b7);
}
}

/* Button - Blue */
&.blue {
@include gradient-two(#a7cfdf, #23538a);

&:hover,
&:active,
&:visited {
@include gradient-two(#a7cfdf, #004089);
}
}

/* Button - Red */
&.red {
@include gradient-two(#ff3019, #cf0404);

&:hover,
&:active,
&:visited {
@include gradient-two(#ff3819, #aa0303);
}
}

/* Button - Yellow */
&.yellow {
color: $text-color;
@include gradient-two(#fced62, #febf04);

&:hover,
&:active,
&:visited {
color: $text-color;
@include gradient-two(#fced62, #ffaa00);
}
}

/* Button - Orange */
&.orange {
@include gradient-two(#ffa84c, #ff7b0d);

&:hover,
&:active,
&:visited {
@include gradient-two(#ffa84c, #fc6000);
}
}

/* Button - Green */
&.green {
@include gradient-two(#a4b357, #75890c);

&:hover,
&:active,
&:visited {
@include gradient-two(#a4b357, #5b7a00);
}
}


/* Different Button Sizes */
&.small {
@include border-radius(4px, 4px);
font-size: 13px;
padding: 8px 18px;
}
&.large {
@include border-radius(6px, 6px);
font-size: ($text-size)+1;
font-weight: bold;
padding: 8px 28px;
}

/* Full Width Buttons - Needs work on this implementation for the grid system */
&.full {
padding: 10px 0;
text-align: center;
width: 100%;
}

}

/* Link reset for underline and color */
a.button {
color: $white;
text-decoration: none;

&:visited {
color: $white;
}
}
}
52 changes: 52 additions & 0 deletions sass/core/_colors.scss
View file
@@ -0,0 +1,52 @@
//@import "compass/css3/gradients";
@import "compass/css3/images";
@import "compass/utilities/general/hacks";
@import "compass/css3/images";

// Default Colors
$default: rgba(#333333, 1.0);
$text-color: rgba(#555555, 1.0);

// Links - RBGA
$link-color: rgba(#ffa84c, 1.0);
$link-hover-color: rgba(#000000, 1.0);

// Default color values - RGBA
$white: rgba(#FFFFFF, 1.0);
$black: rgba(#000000, 1.0);

// Border - RGBA
$border-color: rgba(#CCCCCC, 1.0);

// Two color gradient - supplied by compass
// @include gradient-two(#1, #2);
@mixin gradient-two($start, $end) {
$experimental-support-for-svg: true;
@include background-image(linear-gradient($start, $end));
//@include linear-gradient($end, $start);
}


// Three color gradient - custom
// @include gradient-three(#1, #2, #3);
@mixin gradient-three($start, $middle, $end) {
background: $start;
background: -moz-linear-gradient(top, $start 0%, $middle 40%, $end 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$start), color-stop(40%,$middle), color-stop(100%,$end));
background: -webkit-linear-gradient(top, $start 0%,$middle 40%,$end 100%);
background: -o-linear-gradient(top, $start 0%,$middle 40%,$end 100%);
background: -ms-linear-gradient(top, $start 0%,$middle 40%,$end 100%);
background: linear-gradient(top, $start 0%,$middle 40%,$end 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start', endColorstr='$end',GradientType=0 );
}


// Box Shadow - custom with defaults (4 values)
// @include box-shadow;
@mixin box-shadow($top: 0, $bottom: 0, $spread: 5px, $color: rgba(#000, .4)) {
-moz-box-shadow: $top $bottom $spread $color;
-webkit-box-shadow: $top $bottom $spread $color;
-ms-box-shadow: $top $bottom $spread $color;
-o-box-shadow: $top $bottom $spread $color;
box-shadow: $top $bottom $spread $color;
}
Empty file added sass/core/_forms.scss
View file
Empty file.

0 comments on commit afdecf1

Please sign in to comment.