prelude-framework 0.7

data/scss/prelude/modules/_tables.scss

@@ -0,0 +1,160 @@
+// =============================================================================
+// Tables
+//
+// Base styles, modifiers and optional row classes inspired and adapted from
+// Twitter Bootstrap
+//
+// Table of contents:
+// 1. Base tables
+// 2. Baseline styles
+// 3. Condensed table
+// 4. Bordered modifier
+// 5. Striped
+// 6. Row hovers
+//
+// =============================================================================
+
+// =============================================================================
+// 1. Base tables
+// =============================================================================
+
+table {
+	max-width: 100%;
+	background-color: $table-background;
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+
+// =============================================================================
+// 2. Baseline styles
+// =============================================================================
+
+.table {
+	width: 100%;
+	margin-bottom: $base-line-height;
+
+	// Cells
+	th, td {
+		padding: 8px;
+		line-height: $base-line-height;
+		text-align: left;
+		vertical-align: top;
+		border-top: 1px solid $table-border;
+	}
+
+	th {
+		font-weight: bold;
+	}
+
+	// Bottom align for column headings
+	thead th {
+		vertical-align: bottom;
+	}
+
+	// Remove top border from thead by default
+	caption + thead tr:first-child th, caption + thead tr:first-child td,
+	colgroup + thead tr:first-child th, colgroup + thead tr:first-child td,
+	thead:first-child tr:first-child th, thead:first-child tr:first-child td {
+		border-top: 0;
+	}
+
+  // Account for multiple tbody instances
+	tbody + tbody {
+		border-top: 2px solid $table-border;
+	}
+}
+
+
+// =============================================================================
+// 3. Condensed table
+// =============================================================================
+
+// w/ half padding
+.table--condensed {
+	th, td {
+		padding: 4px 5px;
+	}
+}
+
+
+// =============================================================================
+// 4. Bordered modifier
+// =============================================================================
+
+.table--bordered {
+	border-radius: $default-border-radius;
+	border: 1px solid $table-border;
+	border-collapse: separate; // Done so we can round those corners!
+	border-left: 0;
+
+	th, td { border-left: 1px solid $table-border; }
+
+	// Prevent a double border
+	caption + thead tr:first-child th, caption + tbody tr:first-child th, caption + tbody tr:first-child td,
+	colgroup + thead tr:first-child th, colgroup + tbody tr:first-child th, colgroup + tbody tr:first-child td,
+	thead:first-child tr:first-child th, tbody:first-child tr:first-child th, tbody:first-child tr:first-child td {
+		border-top: 0;
+	}
+
+	// For first th or td in the first row in the first thead or tbody
+	thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {
+		@include border-top-left-radius($default-border-radius);
+	}
+
+	thead:first-child tr:first-child th:last-child, tbody:first-child tr:first-child td:last-child {
+		@include border-top-right-radius($default-border-radius);
+	}
+
+	// For first th or td in the first row in the first thead or tbody
+	thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {
+		@include border-bottom-left-radius($default-border-radius);
+	}
+
+	thead:last-child tr:last-child th:last-child, tbody:last-child tr:last-child td:last-child {
+		@include border-bottom-right-radius($default-border-radius);
+	}
+}
+
+
+// =============================================================================
+// 5. Striped
+// =============================================================================
+
+// Default zebra-stripe styles (alternating gray and transparent backgrounds)
+.table--striped {
+	tbody {
+		tr:nth-child(odd) td, tr:nth-child(odd) th {
+			background-color: $table-background-stripe;
+		}
+	}
+}
+
+
+// =============================================================================
+// 6. Row hovers
+// =============================================================================
+
+// Has to be placed after the Striped effect
+.table--hovered {
+	tbody tr:hover td, tbody tr:hover th {
+		background-color: $table-background-hover;
+	}
+}
+
+// Row contextual classes
+//  @to-do: Use more abstract class like Twitter Bootsrap does, so succes,
+//    error and info affect other kinds of elements
+// =============================================================================
+
+.table__row--success td {
+	background-color: fade-out($green, .75);
+}
+
+.table__row--error td {
+	background-color: fade-out($red, .75);
+}
+
+.table__row--info td {
+	background-color: fade-out($blue, .75);
+}

data/scss/prelude/typography/_base.scss

@@ -0,0 +1,16 @@
+// =============================================================================
+// Base
+// =============================================================================
+
+@import "../mixins/set-font-size";
+
+@include set-font-size();
+
+html {
+    font-family: $base-font-family;
+    font-style: normal;
+}
+
+body {
+    color: $base-text-color;
+}

data/scss/prelude/typography/_brand.scss

@@ -0,0 +1,19 @@
+// =============================================================================
+// Brand
+//
+// Helper classes to add your brand's face and/or color to any element
+//
+// =============================================================================
+
+.brand {
+    font-family: $brand-face +!important;
+    color: $brand-color +!important;
+}
+
+.brand-face {
+    font-family: $brand-face +!important;
+}
+
+.brand-color {
+    color: $brand-color +!important;
+}

data/scss/prelude/typography/_links.scss

@@ -0,0 +1,14 @@
+// =============================================================================
+// Anchor links
+// =============================================================================
+
+a {
+	color: $link-color;
+	text-decoration: none;
+	&:hover,
+	&:active,
+	&:focus {
+		color: $link-hover-color;
+		text-decoration: underline;
+	}
+}

data/scss/prelude/typography/_paragraphs.scss

@@ -0,0 +1,9 @@
+// =============================================================================
+// Paragraphs
+// =============================================================================
+
+p {
+    margin: 0 0 $base-spacing-unit;
+	hyphenate: auto;
+	hyphenate-lines: 3;
+}

data/scss/prelude/typography/_quotes.scss

@@ -0,0 +1,31 @@
+// =============================================================================
+// Quotes
+// =============================================================================
+
+q {
+  quotes: "‘" "’" "“" "”";
+
+  &:before  { content: "‘"; content: open-quote; }
+  &:after   { content: "’"; content: close-quote; }
+
+  q:before  { content: "“"; content: open-quote; }
+  q:after   { content: "”"; content: close-quote; }
+}
+
+blockquote {
+  quotes: "“" "”";
+  text-indent: -.4em;
+
+  p {
+    &:before              { content: "“"; content: open-quote; }
+    &:after               { content: ""; content: no-close-quote; }
+    &:last-of-type:after  { content: "”"; content: close-quote; margin-bottom: 0; }
+  }
+}
+
+.source {
+    display: block;
+    text-indent: 0;
+
+    &:before { content: "—"; }
+}

data/scss/prelude/typography/_sizes.scss

@@ -0,0 +1,63 @@
+// =============================================================================
+// Sizes
+//
+// @usage: Whenever you need to turn a heading (or any other element) up or down
+//     you just need to assing an abstract class to it. For example if you need
+//     a huge h4 you should do it like this:
+//     <h4 class="giga">Hello</h4> <!-- I'm a huge H4 -->
+//     <h2 class="delta">Hello</h2> <!-- I'm a little H2 -->
+//     <p class="gamma"> <!-- Yes, It also works for big paragraphs  -->
+//
+// =============================================================================
+
+@import "../mixins/rem";
+
+$mesure: $base-font-size * $base-line-height;
+$sizes: giga $giga, mega $mega, kilo $kilo, alpha $alpha, beta $beta, gamma $gamma, delta $delta, epsilon $epsilon, zeta $zeta, milli $milli, micro $micro, nano $nano;
+
+@each $size in $sizes {
+    .#{nth($size, 1)} {
+        @include rem(font-size, nth($size, 2));
+        @include rem(margin-bottom, ($mesure/nth($size, 2)));
+    }
+}
+
+
+// =============================================================================
+// Headings
+// =============================================================================
+
+%headings {
+    text-rendering: optimizeLegibility;
+    font-family: $headings-font-family;
+    // this fixes huge spaces when a heading wraps onto two lines
+    line-height: 1;
+    margin-top: 0;
+}
+
+h1 {
+    @extend .alpha;
+    @extend %headings;
+}
+
+h2 {
+    @extend .beta;
+    @extend %headings;
+}
+
+h3 {
+    @extend .gamma;
+    @extend %headings;
+}
+h4 {
+    @extend .delta;
+    @extend %headings;
+}
+h5 {
+    @extend .epsilon;
+    @extend %headings;
+}
+h6 {
+    @extend .zeta;
+    @extend %headings;
+}

data/scss/prelude.scss

@@ -0,0 +1,53 @@
+// =============================================================================
+// Prelude
+//
+// Available modules to import:
+//
+//  prelude/all
+//
+//      prelude/base
+//          prelude/base/helpers
+//
+//      prelude/mixins
+//          prelude/mixins/gradients
+//          prelude/mixins/rem
+//          prelude/mixins/set-font-size
+//          prelude/mixins/button-style
+//
+//      prelude/abstractions
+//          prelude/abstractions/media
+//          prelude/abstractions/nav
+//          prelude/abstractions/island
+//          prelude/abstractions/split
+//          prelude/abstractions/flexbox
+//          prelude/abstractions/flag
+//
+//      prelude/images
+//          prelude/images/cover-image
+//          prelude/images/thumbnails
+//
+//      prelude/typography
+//          prelude/typography/base
+//          prelude/typography/sizes
+//          prelude/typography/paragraphs
+//          prelude/typography/quotes
+//          prelude/typography/links
+//          prelude/typography/brand
+//
+//      prelude/modules
+//          prelude/modules/forms
+//          prelude/modules/tables
+//          prelude/modules/buttons
+//
+// =============================================================================
+
+// Prelude hates old IE
+$legacy-support-for-ie: false;
+
+@import "compass/css3",
+        "compass/utilities",
+        "compass/typography",
+        "prelude/defaults",
+        "prelude/core",
+        "prelude/functions",
+        "prelude/debug-mode";

data/test/config.rb

@@ -0,0 +1,9 @@
+require File.join(File.dirname(__FILE__),"../lib/prelude-framework")
+
+project_type = :stand_alone
+http_path = "/"
+sass_dir = "scss"
+css_dir = "css"
+images_dir = "img"
+
+relative_assets = true