compass_unstyled 0.3.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 4bd95597fb33326e9b19a705e97b02e9eed05761
+  data.tar.gz: 721835773243051959dbb794ae1c501de47e8225
+SHA512:
+  metadata.gz: ba9a4941da3cb45c3745657f925ed65d1e458bc191ce870f93a681d92d2da38f61ec1b9511d1da27d7acd092260e327542c23f56c7909d7b264b89c3473ff5e4
+  data.tar.gz: 18ab8703b3c11223d9fd70f5c5be0d2746f83d69d4b43b0407669062aa6e42ef83a34522ea4d851a1337733a814fe4920efdea15eba1a1419eb293ac8d7bd8ef

data/README.md

@@ -0,0 +1,2 @@
+Compass Unstyled
+==========================

data/lib/compass_unstyled.rb

@@ -0,0 +1,30 @@
+# All gems that are required for this extension to work should go here.
+# These are the requires you would normally put in your config.rb file
+# By default, you should always included Compass. Do not include your
+#  extension.
+require 'compass'
+
+# This tells Compass what your Compass extension is called, and where to find
+#  its files
+# Replace 'extension' with the name of your extension. Spaces allowed.
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('compass_unstyled', :path => extension_path)
+
+# Version and date of version for your Compass extension.
+# Replace Extension with the name of your extension
+#  Letters, numbers, and underscores only
+#  Version is a number. If a version contains alphas, it will be created as
+#    a prerelease version
+#  Date is in the form of YYYY-MM-DD
+# module compass_unstyled
+#   VERSION = "1.0"
+#   DATE = "2014-02-09"
+# end
+
+# This is where any custom SassScript should be placed. The functions will be
+#  available on require of your extension without the need for users to import
+#  any partials. Uncomment below.
+
+# module Sass::Script::Functions
+#
+# end

data/stylesheets/_compass_unstyled.scss

@@ -0,0 +1,26 @@
+/*------------------------------------*\
+    $UNSTYLED
+\*------------------------------------*/
+
+@import "compass";
+@import "compass_unstyled/variables";
+
+
+/**
+ * Importing Generic Items: normalize, reset, etc.
+ */
+@import "compass_unstyled/normalize";
+@import "compass_unstyled/reset";
+@import "compass_unstyled/clearfix";
+
+
+/**
+ * Unstyled Specific Styles
+ */
+@import "compass_unstyled/typography";
+@import "compass_unstyled/lists";
+@import "compass_unstyled/navigation";
+@import "compass_unstyled/tables";
+@import "compass_unstyled/buttons";
+@import "compass_unstyled/form";
+@import "compass_unstyled/alerts";

data/stylesheets/compass_unstyled/_alerts.scss

@@ -0,0 +1,38 @@
+/*------------------------------------*\
+    $ALERTS
+\*------------------------------------*/
+
+.message {
+    margin-bottom: 20px;
+    padding: 15px;
+    font-weight: bold;
+    @include border-radius(3px);
+    display: table;
+    width: 100%;
+}
+
+    .message__content, .message__close {
+        display: table-cell;
+    }
+
+    .message__close {
+        @extend .icon-close;
+        font-size: 12px;
+        vertical-align: middle;
+        text-align: right;
+    }
+
+    .message--success {
+        background-color: lighten($green, 15%);
+        color: darken($green, 30%);
+    }
+
+    .message--error {
+        background-color: lighten($red, 15%);
+        color: darken($red, 30%);
+    }
+
+    .message--notice {
+        background-color: lighten($blue, 20%);
+        color: darken($blue, 30%);
+    }

data/stylesheets/compass_unstyled/_buttons.scss

@@ -0,0 +1,23 @@
+/*------------------------------------*\
+    $BUTTONS
+\*------------------------------------*/
+
+button, input[type="submit"] {
+    font-family: $base-font-family;
+    padding: 0 20px;
+    background-color: $accent-color;
+    border: 1px solid transparent;
+    color: $white;
+    font-size: 14px;
+    line-height: 40px;
+    @include border-radius(3px);
+
+
+    &:active {
+        @include box-shadow(rgba(0,0,0,0.2) 1px 1px 5px inset);
+    }
+
+    &:focus {
+        outline: 0;
+    }
+}

data/stylesheets/compass_unstyled/_clearfix.scss

@@ -0,0 +1,15 @@
+/*------------------------------------*\
+    $CLEARFIX
+\*------------------------------------*/
+/**
+ * Micro clearfix, as per: css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
+ * Extend the clearfix class with Sass to avoid the `.cf` class appearing over
+ * and over in your markup.
+ */
+.cf{
+    &:after{
+        content:"";
+        display:table;
+        clear:both;
+    }
+}

data/stylesheets/compass_unstyled/_form.scss

@@ -0,0 +1,40 @@
+/*------------------------------------*\
+    $FORMS
+\*------------------------------------*/
+fieldset {
+    margin-bottom: 20px;
+    border: none;
+}
+
+label {
+    margin-bottom: 5px;
+    font-weight: bold;
+    display: block;
+}
+
+input[type="text"], textarea {
+    width: 100%;
+    min-height: 35px;
+    padding: 0 10px;
+    border: 1px solid $light-gray;
+    background-color: $white;
+    font-size: $base-font-size;
+    color: $dark-gray;
+    display: block;
+    @include box-sizing(border-box);
+    @include box-shadow(rgba(0,0,0,0.06) 0 1px 3px inset);
+    @include border-radius(5px);
+
+    &:focus {
+        border-color: $accent-color;
+        @include box-shadow(rgba(0,0,0,0.075) 0 1px 1px inset, rgba($accent-color, 0.6) 0 0 8px)
+    }
+}
+
+textarea {
+    padding: 10px;
+}
+
+select {
+    font-size: $base-font-size;
+}

data/stylesheets/compass_unstyled/_lists.scss

@@ -0,0 +1,10 @@
+/*------------------------------------*\
+    $LISTS
+\*------------------------------------*/
+ul, ol {
+    margin: 0 0 1em 1em;
+}
+
+ul {
+    list-style: square;
+}

data/stylesheets/compass_unstyled/_navigation.scss

@@ -0,0 +1,86 @@
+/*------------------------------------*\
+    $NAVIGATION
+\*------------------------------------*/
+/**
+ * Nav abstraction as per: csswizardry.com/2011/09/the-nav-abstraction
+ * When used on an `ol` or `ul`, this class throws the list into horizontal mode
+ * e.g.:
+ *
+   <ul class=nav>
+       <li><a href=#>Home</a></li>
+       <li><a href=#>About</a></li>
+       <li><a href=#>Portfolio</a></li>
+       <li><a href=#>Contact</a></li>
+   </ul>
+ *
+ * Demo: jsfiddle.net/inuitcss/Vnph4
+ *
+ */
+.nav{
+    list-style:none;
+    margin-left:0;
+    @extend .cf;
+
+    > li{
+
+        &,
+        > a{
+            display:inline-block;
+           *display:inline;
+            zoom:1;
+        }
+    }
+}
+
+
+/**
+ * `.nav--stacked` extends `.nav` and throws the list into vertical mode, e.g.:
+ *
+   <ul class="nav  nav--stacked">
+       <li><a href=#>Home</a></li>
+       <li><a href=#>About</a></li>
+       <li><a href=#>Portfolio</a></li>
+       <li><a href=#>Contact</a></li>
+   </ul>
+ *
+ */
+.nav--stacked{
+
+    > li{
+        display:list-item;
+
+        > a{
+            display:block;
+        }
+    }
+}
+
+/**
+ * Give nav links a big, blocky hit area. Extends `.nav`, e.g.:
+ *
+   <ul class="nav  nav--block">
+       <li><a href=#>Home</a></li>
+       <li><a href=#>About</a></li>
+       <li><a href=#>Portfolio</a></li>
+       <li><a href=#>Contact</a></li>
+   </ul>
+ *
+ */
+.nav--block{
+    line-height:1;
+    /**
+     * Remove whitespace caused by `inline-block`.
+     */
+    letter-spacing:-0.31em;
+    word-spacing:-0.43em;
+    white-space:nowrap;
+
+    > li{
+        letter-spacing:normal;
+        word-spacing:normal;
+
+        > a{
+            padding:20px;
+        }
+    }
+}

data/stylesheets/compass_unstyled/_normalize.scss

@@ -0,0 +1,423 @@
+/*! normalize.css v3.0.0 | MIT License | git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined in IE 8/9.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9.
+ * Hide the `template` element in IE, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+  background: transparent;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9, Safari 5, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari 5 and Chrome.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari 5, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * Correct overflow displayed oddly in IE 9.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari 5.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+  overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10.
+ */
+
+button {
+  overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8+, and Opera
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; /* 2 */
+  box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}

data/stylesheets/compass_unstyled/_reset.scss

@@ -0,0 +1,79 @@
+/*------------------------------------*\
+    $RESET
+\*------------------------------------*/
+/**
+ * A more considered reset; more of a restart...
+ * As per: csswizardry.com/2011/10/reset-restarted
+ */
+
+/**
+ * Let’s make the box model all nice, shall we...?
+ */
+*{
+    &,
+    &:before,
+    &:after{
+        @include box-sizing(border-box);
+    }
+}
+
+ body {
+    margin: 0;
+ }
+
+h1,h2,h3,h4,h5,h6,
+p,blockquote,pre,
+dl,dd,ol,ul,
+form,fieldset,legend,
+table,th,td,caption,
+hr{
+    margin:0;
+    padding:0;
+}
+
+/**
+ * Give a help cursor to elements that give extra info on `:hover`.
+ */
+abbr[title],dfn[title]{
+    cursor:help;
+}
+
+/**
+ * Remove underlines from potentially troublesome elements.
+ */
+u,ins{
+    text-decoration:none;
+}
+
+/**
+ * Apply faux underline via `border-bottom`.
+ */
+ins{
+    border-bottom:1px solid;
+}
+
+/**
+ * So that `alt` text is visually offset if images don’t load.
+ */
+img{
+    font-style:italic;
+}
+
+/**
+ * Give form elements some cursor interactions...
+ */
+label,
+input,
+textarea,
+button,
+select,
+option{
+    cursor:pointer;
+}
+    .form-control:active,
+    .form-control:focus,
+    textarea:active,
+    textarea:focus{
+        cursor:text;
+        outline:none;
+    }

data/stylesheets/compass_unstyled/_tables.scss

@@ -0,0 +1,22 @@
+/*------------------------------------*\
+    $TABLES
+\*------------------------------------*/
+table {
+    border-collapse: collapse;
+    table-layout: fixed;
+    width: 100%;
+}
+
+th, td {
+    padding: 0 10px;
+    text-align: left;
+    line-height: 2.5em;
+}
+
+th {
+    border-bottom: 2px solid $gray;
+}
+
+td {
+    border-bottom: 1px solid $light-gray;
+}

data/stylesheets/compass_unstyled/_typography.scss

@@ -0,0 +1,39 @@
+/*------------------------------------*\
+    $TYPOGRAPHY
+\*------------------------------------*/
+body {
+    font:#{($base-font-size/16px)*1em}/#{$line-height-ratio} $base-font-family;
+    color: $dark-gray;
+    -webkit-font-smoothing: antialiased;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    text-rendering: optimizeLegibility;
+    margin-bottom: 0.5em;
+    line-height: 1em;
+}
+
+h1 { font-size: 36px/$base-font-size*1em; }
+h2 { font-size: 30px/$base-font-size*1em; }
+h3 { font-size: 24px/$base-font-size*1em; }
+h4 { font-size: 18px/$base-font-size*1em; }
+h5 { font-size: 14px/$base-font-size*1em; }
+h6 { font-size: 12px/$base-font-size*1em; }
+
+p {
+    margin-bottom: 1em;
+}
+
+a, a:visited {
+    color: $accent-color;
+    text-decoration: none;
+    @include transition(all .3s ease-in-out);
+}
+
+a:hover {
+    color: darken($accent-color, 15%);
+}
+
+hr {
+    margin: 30px 0;
+}

data/stylesheets/compass_unstyled/_variables.scss

@@ -0,0 +1,38 @@
+/*------------------------------------*\
+    $VARIABLES
+\*------------------------------------*/
+
+/**
+ * Typography
+ */
+$sans-serif: "Helvetica Neue", "Helvetica", Arial, sans-serif !default;
+$serif:      "Georgia", serif !default;
+
+
+/**
+ * Font Sizing
+ */
+$base-font-size:   16px  !default;
+$line-height-ratio: 1.5em !default;
+
+
+/**
+ * Colors
+ */
+$dark-gray:     #333333 !default;
+$gray:          #aaaaaa !default;
+$light-gray:    #dadada !default;
+$white:         #ffffff !default;
+
+$blue:          #477DCA !default;
+$green:         #9ED54F !default;
+$red:           #e46a6e !default;
+$yellow:        #ffc72a !default;
+
+
+/**
+ * Base Values
+ */
+$base-font-family: $sans-serif;
+$font-color: $dark-gray;
+$accent-color: $blue;

data/templates/project/index.html

@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Unstyled: Sensible Project Defaults</title>
+    <link rel="stylesheet" href="css/defaults.css">
+</head>
+<body>
+
+<div style="max-width: 80%;">
+    <h1>Unstyled: Sensible Project Defaults</h1>
+
+    <h2>Headings</h2>
+    <h1>h1. Heading</h1>
+    <h2>h2. Heading</h2>
+    <h3>h3. Heading</h3>
+    <h4>h4. Heading</h4>
+    <h5>h5. Heading</h5>
+    <h6>h6. Heading</h6>
+
+    <hr>
+
+    <h1>Paragraph</h1>
+    <p>Curabitur blandit <a href="#">Test Link</a> tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.</p>
+
+    <p>Nulla vitae elit libero, a pharetra augue. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+
+    <hr>
+
+    <h1>Lists</h1>
+
+    <h2>Unordered List</h2>
+    <ul>
+        <li>Item 1</li>
+        <li>Item 2</li>
+        <li>Item 3</li>
+    </ul>
+
+    <h2>Ordered List</h2>
+    <ol>
+        <li>Item 1</li>
+        <li>Item 2</li>
+        <li>Item 3</li>
+    </ol>
+
+    <hr>
+
+    <h1>Navigation</h1>
+
+    <h2>Inline (Base) Nav</h2>
+    <ul class="nav" style="margin-bottom: 20px;">
+        <li><a href="#">Nav Item</a></li>
+        <li><a href="#">Nav Item</a></li>
+        <li><a href="#">Nav Item</a></li>
+    </ul>
+
+    <h2>Inline Block Nav</h2>
+    <ul class="nav  nav--block">
+        <li><a href="#">Nav Item</a></li>
+        <li><a href="#">Nav Item</a></li>
+        <li><a href="#">Nav Item</a></li>
+    </ul>
+
+    <h2>Stacked Nav</h2>
+    <ul class="nav  nav--stacked">
+        <li><a href="#">Nav Item</a></li>
+        <li><a href="#">Nav Item</a></li>
+        <li><a href="#">Nav Item</a></li>
+    </ul>
+
+    <hr>
+
+    <h1>Forms</h1>
+    <fieldset>
+        <label>Text Input</label>
+        <input type="text" placeholder="Text Input" />
+    </fieldset>
+
+    <fieldset>
+        <label>Textarea</label>
+        <textarea rows="5"></textarea>
+    </fieldset>
+
+    <fieldset>
+        <label>Dropdown</label>
+        <select>
+            <option>Option 1</option>
+            <option>Option 2</option>
+            <option>Option 3</option>
+        </select>
+    </fieldset>
+
+    <hr>
+
+    <h1>Tables</h1>
+
+    <table>
+        <thead>
+            <th>Header 1</th>
+            <th>Header 2</th>
+            <th>Header 2</th>
+        </thead>
+        <tbody>
+            <tr>
+                <td>Item 1</td>
+                <td>Item 2</td>
+                <td>Item 3</td>
+            </tr>
+            <tr>
+                <td>Item 1</td>
+                <td>Item 2</td>
+                <td>Item 3</td>
+            </tr>
+            <tr>
+                <td>Item 1</td>
+                <td>Item 2</td>
+                <td>Item 3</td>
+            </tr>
+        </tbody>
+    </table>
+
+    <hr>
+
+    <h1>Buttons</h1>
+    <button>Simple Button</button>
+
+    <hr>
+
+    <h1>Messaging</h1>
+
+    <div class="message  message--success">
+        <span class="message__content">This is a successful message.</span>
+    </div>
+
+    <div class="message  message--error">
+        <span class="message__content">This is an error message.</span>
+    </div>
+
+    <div class="message  message--notice">
+        <span class="message__content">This is a notice.</span>
+    </div>
+</div>
+</body>
+</html>

data/templates/project/manifest.rb

@@ -0,0 +1,19 @@
+# Description
+description "A sensible default stylesheet for Compass projects."
+
+# Stylesheet Import
+file 'unstyled.scss', :like => :stylesheet, :media => 'screen, projection'
+
+# Compass Extension Help
+help %Q{
+  Documentation is available at http://github.com/marcelosomers/unstyled
+}
+
+# Compass Extension Welcome Message
+#  Users will see this when they create a new project using this template.
+welcome_message %Q{
+  This is Compass Unstyled: Sensible defaults for a Compass project.
+  It is meant to be removed once styling is being applied.
+
+  More documentation is available at http://github.com/marcelosomers/unstyled
+}

data/templates/project/unstyled.scss

@@ -0,0 +1 @@
+@import "compass_unstyled";

metadata

@@ -0,0 +1,88 @@
+--- !ruby/object:Gem::Specification
+name: compass_unstyled
+version: !ruby/object:Gem::Version
+  version: 0.3.0
+platform: ruby
+authors:
+- Marcelo Somers
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2014-02-10 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.2.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.2.0
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.12.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.12.1
+description: Sensible default styles for your Compass project.
+email:
+- msomers@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- lib/compass_unstyled.rb
+- stylesheets/_compass_unstyled.scss
+- stylesheets/compass_unstyled/_alerts.scss
+- stylesheets/compass_unstyled/_buttons.scss
+- stylesheets/compass_unstyled/_clearfix.scss
+- stylesheets/compass_unstyled/_form.scss
+- stylesheets/compass_unstyled/_lists.scss
+- stylesheets/compass_unstyled/_navigation.scss
+- stylesheets/compass_unstyled/_normalize.scss
+- stylesheets/compass_unstyled/_reset.scss
+- stylesheets/compass_unstyled/_tables.scss
+- stylesheets/compass_unstyled/_typography.scss
+- stylesheets/compass_unstyled/_variables.scss
+- templates/project/index.html
+- templates/project/manifest.rb
+- templates/project/unstyled.scss
+homepage: http://github.com/marcelosomers/unstyled
+licenses: []
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 1.3.6
+requirements: []
+rubyforge_project: compass_unstyled
+rubygems_version: 2.2.1
+signing_key: 
+specification_version: 4
+summary: Styles to get you started, but meant to be removed once design is applied.
+test_files: []