Merge pull request #13 from scottaohara/sass_branch

Sass branch initial commit

.gitignore

@@ -0,0 +1,3 @@
+/sass/.DS_Store
+
+/.sass-cache

sass/README.md

@@ -0,0 +1,35 @@
+min sass
+========
+
+a tiny framework that makes websites pretty
+
+To download Min, go [here](http://minfwk.com/download.html).
+
+
+###Tiny
+995 bytes (or smaller) minified and gzipped.
+
+
+###Compatible
+Works with IE5 and onward. Yes, min is even responsive in IE5.
+
+Of course, modern browsers give you pretty transitions.
+
+
+###Sass Specific Instructions
+For those that haven't used Sass before, you'll need to install it:
+
+Install SASS: http://sass-lang.com/install
+
+Then simply navigate to the min folder via the command line, and run
+
+<code>sass --watch sass</code> (or whatever you've renamed the sass folder to)
+
+
+###License
+MIT licensed.
+
+
+###Contributing
+
+See the main min ReadME on how you can contribute to min Sass or Less or Both!

sass/_button.scss

@@ -0,0 +1,60 @@
+//-------------------------------------------------------------------
+// Mixin to set btn background for inactive, active & hover states
+//-------------------------------------------------------------------
+
+@mixin btn-style($bg, $bg-hover, $bg-active) {
+  background: $bg;
+
+  &:hover {
+    background: $bg-hover;
+  }
+
+  &:active {
+    background: $bg-active;
+  }
+}
+
+
+
+@if $import-buttons == true{
+//-------------------------------------------------------------------
+// Button Styles & Classes
+//-------------------------------------------------------------------
+
+ico, button, .btn {
+  font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
+}
+
+button, .btn {
+  background: #aaa;
+  border: none;
+  box-shadow: 3px 3px #000; // unshortenable
+  color: #fff;
+  cursor: pointer;
+  font-size: 2.5em;
+  margin: .3em .7em;
+  padding: 15px 40px 16px;
+  text-decoration: none;
+}
+
+.btn-a {
+  @include btn-style(#0ae, #09d, #08b);
+}
+
+.btn-b {
+  @include btn-style(#3c5, #2b4, #2a4);
+}
+
+.btn-c {
+  @include btn-style(#d33, #c22, #b22);
+}
+
+.btn-small {
+  padding: 7px 19px;
+  font-size: 16px;
+}
+
+
+//-------------------------------------------------------------------
+// End @if
+}

sass/_general.scss

@@ -0,0 +1,54 @@
+//-------------------------------------------------------------------
+//  General Min Styling
+//-------------------------------------------------------------------
+
+body {
+  font: 16px sans-serif;
+  margin: 0;
+  text-align: center;
+}
+
+.smooth {
+  transition: all .2s;
+}
+
+hr {
+  margin: 2.5em auto;
+
+  &.mediumwidth {
+    margin: 2.5em auto;
+  }
+}
+
+.mediumwidth {
+  font-size: 16px;
+  margin-bottom: .3em;
+  margin-left: 30%;
+  margin-top: .3em;
+  width: 40%;
+}
+
+@media (max-width:870px) {
+  .mediumwidth {
+    margin-left: 15%;
+    width: 70%;
+  }
+  .row [class*='c']{
+    display: block;
+    margin: 1% auto;
+    width: 100%;
+  }
+  .row:last-child column {
+    margin-bottom: 2.5em;
+  }
+}
+
+@media (max-width:520px) {
+  .mediumwidth {
+    margin-left: 0;
+    width: 100%;
+  }
+  hr.mediumwidth {
+    width: auto;
+  }
+}

sass/_grid.scss

@@ -0,0 +1,61 @@
+@if $import-grid == true{
+//-------------------------------------------------------------------
+//  Grid system responsive code is in _general.scss
+//  A hack for the grid system is located in _iehacks.scss
+//-------------------------------------------------------------------
+
+.row {
+  line-height: 2em;
+  margin-top: 2%;
+  overflow: auto;
+}
+
+column {
+  float: left;
+  margin: auto 1%;
+}
+
+.c10 {
+  width: 98%;
+}
+
+.c9 {
+  width: 88%;
+}
+
+.c8 {
+  width: 78%;
+}
+
+.c7 {
+  width: 68%;
+}
+
+.c6 {
+  width: 58%;
+}
+
+.c5 {
+  width: 48%
+}
+
+.c4 {
+  width: 38%;
+}
+
+.c3 {
+  width: 28%;
+}
+
+.c2 {
+  width: 18%;
+}
+
+.c1 {
+  width: 8%;
+}
+
+
+//-------------------------------------------------------------------
+// End @if
+}

sass/_headings.scss

@@ -0,0 +1,23 @@
+@if $import-headings == true{
+//-------------------------------------------------------------------
+//  Headings
+//-------------------------------------------------------------------
+
+.title {
+  font-size: 7em;
+  margin: 0;
+}
+
+h1 {
+  font-size: 4em;
+  margin: 0;
+}
+
+h2 {
+  font-size: 2em;
+}
+
+
+//-------------------------------------------------------------------
+// End @if
+}

sass/_icons.scss

@@ -0,0 +1,13 @@
+@if $import-icons == true{
+//-------------------------------------------------------------------
+//  Icons
+//-------------------------------------------------------------------
+
+ico {
+  font-size: 2.04em;
+}
+
+
+//-------------------------------------------------------------------
+// End @if
+}

sass/_iehacks.scss

@@ -0,0 +1,25 @@
+@if $import-ie-hacks == true{
+//-------------------------------------------------------------------
+//  Internet Explorer Hacks
+//-------------------------------------------------------------------
+
+// IE Medium Width
+.ie .mediumwidth {
+  margin-left: 0;
+  width: 70%;
+
+  hr {
+    margin: 100px auto;
+    padding-left: 200px;
+  }
+}
+
+
+// IE Grid System
+.ie column {
+  margin: auto .7%;
+}
+
+//-------------------------------------------------------------------
+// End @if
+}

sass/_inputs.scss

@@ -0,0 +1,40 @@
+@if $import-inputs == true{
+//-------------------------------------------------------------------
+//  Inputs
+//-------------------------------------------------------------------
+
+// Styles to extend to all inputs
+%global-inputs {
+  border: 1px solid #ccc;
+  font-size: .8em;
+}
+
+
+textarea, input {
+  @extend %global-inputs;
+  font-family: sans-serif;
+  outline: none;
+  padding: 6px;
+
+  &:focus {
+    border: 1px solid #5ab;
+  }
+}
+
+
+textarea, input[type='text'] {
+  width: 13em;
+}
+
+
+.addon-front {
+  @extend %global-inputs;
+  border-right: 0;
+  margin-right: -2px;
+  padding: 6px 11px 6px 10px;
+}
+
+
+//-------------------------------------------------------------------
+// End @if
+}

sass/_messages.scss

@@ -0,0 +1,23 @@
+@if $import-messages == true{
+//-------------------------------------------------------------------
+//  Messages
+//-------------------------------------------------------------------
+
+message {
+  background: #ACE;
+  display: block;
+  padding: 2em 0;
+
+  &.warning {
+    background: #D99;
+  }
+
+  &.great {
+    background: #9D9;
+  }
+}
+
+
+//-------------------------------------------------------------------
+// End @if
+}

sass/_navbar.scss

@@ -0,0 +1,57 @@
+@if $import-navbar == true{
+//-------------------------------------------------------------------
+//  Navigation Bar
+//-------------------------------------------------------------------
+
+.navbar {
+  background: #000;
+  color: #fff;
+  height: 1.5em;
+  padding: 1em 0 .6em;
+  text-align: left;
+  width: 100%;
+
+  a {
+    text-decoration: none;
+  }
+
+  input, button, .btn {
+    margin-top: -20px;
+    // This ensures that any buttons and inputs in the
+    // navbar will not mess up its vertical alignment
+  }
+}
+
+
+.pagename {
+  color: #fff;
+  padding: 0 1em 0 2em;
+  font-weight: bold;
+}
+
+
+.navbar-link {
+  color: #aaa;
+  padding: .5em;
+
+  &:hover {
+    color: #fff;
+  }
+}
+
+
+@media(max-width:500px) {
+  .navbar {
+    height: 7.5em;
+
+    a {
+      display: block;
+      text-align: center;
+    }
+  }
+}
+
+
+//-------------------------------------------------------------------
+// End @if
+}

sass/_table.scss

@@ -0,0 +1,26 @@
+@if $import-tables == true{
+//-------------------------------------------------------------------
+//  Tables
+//-------------------------------------------------------------------
+
+table {
+  border-spacing: 0;
+  width: 100%;
+}
+
+tbody tr:nth-child(2n-1) {
+  background: #ccc;
+}
+
+.table {
+  th, td {
+    line-height: 1.4em;
+    padding: .5em;
+    text-align: left;
+  }
+}
+
+
+//-------------------------------------------------------------------
+// End @if
+}

sass/min-master.scss

@@ -0,0 +1,46 @@
+// ------------------------------------------------------------------
+//  Core Styles of Min
+// ------------------------------------------------------------------
+
+@import 'general.scss';
+
+
+// ------------------------------------------------------------------
+//  Customize Optional Components
+//
+//  Set undesired components to false to exclude them from
+//  the final Min CSS output.
+// ------------------------------------------------------------------
+
+$import-headings:                         true!default;
+
+$import-buttons:                          true!default;
+
+$import-inputs:                           true!default;
+
+$import-navbar:                           true!default;
+
+$import-tables:                           true!default;
+
+$import-messages:                         true!default;
+
+$import-icons:                            true!default;
+
+$import-grid:                             true!default;
+
+$import-ie-hacks:                         true!default;
+
+
+// ------------------------------------------------------------------
+//  Import Components based on above customization
+// ------------------------------------------------------------------
+
+@import 'button.scss';
+@import 'grid.scss';
+@import 'headings.scss';
+@import 'icons.scss';
+@import 'inputs.scss';
+@import 'messages.scss';
+@import 'navbar.scss';
+@import 'table.scss';
+@import 'iehacks.scss';