compass-helium 0.0.1

data/stylesheets/compass-helium/type.scss

@@ -0,0 +1,150 @@
+// Body text
+// ---------
+
+html {
+	font-size: 100%;
+	-webkit-text-size-adjust: 100%;
+	-ms-text-size-adjust: 100%;
+}
+
+body {
+	color: $base-font-color;
+	font-family: $base-font-family;
+	font-size: $base-font-size;
+	font-size-adjust: none;
+	line-height: $base-line-height;
+}
+
+// Standard block-level elements
+// -----------------------------
+
+p,
+ol,
+ul,
+dl,
+table,
+figure,
+hgroup {
+	margin: 0 0 (4 * $tu);
+}
+
+// Headings
+// --------
+
+h1, h2, h3, h4, h5, h6 {	
+	margin: 0;
+	color: $heading-color;
+	font-family: $heading-font-family;
+	font-weight: $heading-font-weight;
+	line-height: 1;
+	text-rendering: optimizelegibility; // Fix the character spacing for headings
+	
+	a {
+		color: $gray-dark;
+	}
+}
+
+h1, h2 {
+	margin: 0 0 (6 * $tu);
+}
+
+h1 {
+	font-size: 36px;
+	letter-spacing: -1px;
+}
+
+h2 {
+	font-size: 24px;
+}
+
+h3 {
+	font-size: 16px;
+}
+
+h4, h5, h6 {
+	font-size: $base-font-size;
+}
+
+// Links
+// -----
+
+a {
+	color: $link-color;
+	text-decoration: none;
+	
+	&:hover {
+		color: lighten($link-color, 10%);
+		text-decoration: underline;		
+	}
+}
+
+p a {
+	text-decoration: underline;
+}
+
+// Lists
+// -----
+
+ul, ol {
+	padding: 0;
+	margin-left: $base-font-size;
+}
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+	margin-bottom: 0;
+}
+ul ul,
+ol ul {
+	list-style: circle;
+}
+ul {
+	list-style: disc;
+}
+ol {
+	list-style: decimal;
+}
+dl {
+	margin: 0 0 $base-font-size;
+}
+dt {
+	font-weight: bold;
+}
+dd {
+	margin: 0 0 $base-font-size;
+}
+
+// Tables
+// ------
+
+table {
+	width: 100%;
+	border-top: 1px solid $border-color;
+
+	th {
+		font-weight: bold;
+	}
+	th, td {
+		padding: $base-font-size / 2;
+		border-bottom: 1px solid $border-color;
+		text-align: left;
+		
+		&:first-child {
+			padding-left: 0;
+		}
+		&:last-child {
+			padding-right: 0;
+		}
+	}
+	.figure {
+		text-align: right;
+	}
+}
+
+// Code
+// ----
+
+code {
+	font-family: "Consolas", "Courier", monospace;
+}

data/stylesheets/compass-helium/utilities.scss

@@ -0,0 +1,272 @@
+// ! Type derivative variables
+// ---------------------------
+
+$tu: $base-font-size / 4;
+$base-line-height: $tu * 6;
+
+// ! Pseudo elements
+// -----------------
+
+@mixin pseudo() {
+	content: "";
+	display: block;
+	position: absolute;
+}
+
+// ! CSS triangles
+// ---------------
+
+@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {
+	
+	@include pseudo();
+	
+	width: 0;
+	height: 0;
+	border: solid $triangle-size;
+	
+	@if ($triangle-direction == top) {
+		border-color: $triangle-color transparent transparent transparent;
+	}
+	@if ($triangle-direction == bottom) {
+		border-color: transparent transparent $triangle-color transparent;
+	}
+	@if ($triangle-direction == left) {
+		border-color: transparent transparent transparent $triangle-color;
+	}
+	@if ($triangle-direction == right) {
+		border-color: transparent $triangle-color transparent transparent;
+	}
+}
+
+// ! List operations
+// -----------------
+
+@mixin list-reset {
+	margin-left: 0px;
+	
+	> li {
+		display: block;
+		list-style-type: none;	
+	}
+}
+
+@mixin list-horizontal {
+	@include clearfix();
+	
+	> li {
+		display: block;
+		float: left;
+		list-style-type: none;
+	}
+}
+
+// ! Floats
+// --------
+
+.float-left {
+	float: left;
+}
+.float-right {
+	float: right;
+}
+.float-none {
+	float: none;
+}
+.block {
+	display: block;
+}
+.nowrap {
+	overflow: hidden;
+}
+
+// ! Clearfix
+// ----------
+
+@mixin clearfix {
+    &:before,
+    &:after {
+        content:"";
+        display:table;
+    }
+    &:after {
+        clear:both;
+    }
+    zoom:1;
+}
+
+.clearfix {
+	@include clearfix();
+}
+
+// ! Type helper classes
+// ---------------------
+
+.bold, strong {
+	font-weight: bold;
+}
+
+.ellipsis {
+	display: block;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.italic, em {
+	font-style: italic;
+}
+
+.lh1 {
+	line-height: 1 !important;
+}
+
+.muted {
+	color: $muted-font-color;
+}
+
+.small {
+	font-family: $base-font-family;
+	font-size: $small-font-size;
+	font-weight: normal;
+	line-height: $small-line-height;
+}
+
+.text-left {
+	text-align: left;
+}
+
+.text-right {
+	text-align: right;
+}
+
+.text-centered {
+	text-align: center;
+}
+
+.underlined {
+	text-decoration: underline;
+}
+
+.uppercase {
+	text-transform: uppercase;
+}
+
+// ! Images
+// --------
+
+img {
+	display: block;
+	width: 100%;
+	max-width: 100%;
+	
+	&.native-width {
+		width: auto;
+	}
+}
+
+// ! Responsive helper variables
+// -----------------------------
+
+$devices: mobile, mobile-tablet, tablet, tablet-desktop, desktop;
+$mobile-end: $responsive-breakpoint;
+$tablet-start: $mobile-end + 1;
+$tablet-end: $page-width + ($column-gutter * 2);
+$desktop-start: $tablet-end + 1;
+
+// ! Respond to device mixins
+// --------------------------
+
+@mixin respond-to($device) {
+	
+	@if $device == "desktop" {
+		@media screen and (min-width: $desktop-start) { @content }
+	}
+	
+	@if $device == "tablet-desktop" {
+		@media screen and (min-width: $tablet-start) { @content }
+	}
+	
+	@if $device == "tablet" {
+		@media screen and (min-width: $tablet-start) and (max-width: $tablet-end) { @content }
+	}
+	
+	@if $device == "mobile-tablet" {
+		@media screen and (max-width: $tablet-end) { @content }
+	}
+	
+	@if $device == "mobile" {
+		@media screen and (max-width: $mobile-end) { @content }
+	}
+}
+
+// ! Show or hide on device
+// ------------------------
+
+.show-on-mobile,
+.show-on-mobile-tablet,
+.show-on-tablet,
+.show-on-tablet-desktop,
+.show-on-desktop {
+	display: none !important;
+}
+
+@each $device in $devices {
+	@include respond-to($device) {
+		.show-on-#{$device} { display: inherit !important; }
+		.hide-on-#{$device} { display: none !important; }
+	}
+}
+
+// ! Box model helpers
+// -------------------
+
+$x-sides: (l left), (r right);
+$y-sides: (t top), (b bottom);
+$spacing-types: (m margin), (p padding);
+
+// ! Margin and padding
+// --------------------
+
+@each $spacing-type in $spacing-types {
+	@for $i from 0 through 10 {
+		@each $side in join($x-sides, $y-sides) {
+			.#{nth($spacing-type, 1)}#{nth($side, 1)}#{$i} {
+				#{nth($spacing-type, 2)}-#{nth($side, 2)}: $tu * $i !important;
+			}
+		}
+	}
+}
+
+// ! Borders
+// ---------
+
+@each $side in join($x-sides, $y-sides) {
+	.b#{nth($side, 1)} {
+		border-#{nth($side, 2)}: 1px solid $border-color;
+	}
+}
+
+// ! Sticky footer
+// ---------------
+
+.sticky-footer {
+	#footer-pusher {
+		height: auto;
+		min-height: 100%;	
+	}
+	
+	#page-footer {
+		position: relative;
+	}
+}
+
+// ! Max widths
+// ------------
+
+@include respond-to(mobile-tablet) {
+	$i: 50;
+	@while $i > 0 {
+		.max-#{$i} { max-width: 1% * $i; }
+		$i: $i - 10;
+	}
+}

data/stylesheets/compass-helium/webfonts.scss

@@ -0,0 +1,8 @@
+@font-face {
+  font-family: 'Entypo';
+  src:  font-url('entypo.eot');
+  src:	font-url('entypo.woff') format('woff'),
+  		font-url('entypo.ttf') format('truetype'),
+  		font-url('entypo.svg') format('svg');
+  		font-weight: 400;
+}

data/templates/project/config.rb

@@ -0,0 +1,12 @@
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "css"
+images_dir = "images"
+javascripts_dir = "js"
+output_style = :expanded
+environment = :development
+relative_assets = true
+line_comments = false
+color_output = false

data/templates/project/fonts/entypo.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" > <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
+<defs >
+<font id="entypo" horiz-adv-x="508" ><font-face
+    font-family="Entypo"
+    units-per-em="1000"
+    panose-1="0 0 0 0 0 0 0 0 0 0"
+    ascent="750"
+    descent="-250"
+    alphabetic="0" />
+<missing-glyph horiz-adv-x="500" />
+</font>
+</defs>
+</svg>