diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3ad75cd --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +/sass/.DS_Store + +/.sass-cache diff --git a/sass/README.md b/sass/README.md new file mode 100644 index 0000000..172dc84 --- /dev/null +++ b/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 + +sass --watch sass (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! diff --git a/sass/_button.scss b/sass/_button.scss new file mode 100644 index 0000000..170f1d6 --- /dev/null +++ b/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 +} diff --git a/sass/_general.scss b/sass/_general.scss new file mode 100644 index 0000000..42f4eb6 --- /dev/null +++ b/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; + } +} diff --git a/sass/_grid.scss b/sass/_grid.scss new file mode 100644 index 0000000..7e90e23 --- /dev/null +++ b/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 +} diff --git a/sass/_headings.scss b/sass/_headings.scss new file mode 100644 index 0000000..d3cd460 --- /dev/null +++ b/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 +} diff --git a/sass/_icons.scss b/sass/_icons.scss new file mode 100644 index 0000000..f074d07 --- /dev/null +++ b/sass/_icons.scss @@ -0,0 +1,13 @@ +@if $import-icons == true{ +//------------------------------------------------------------------- +// Icons +//------------------------------------------------------------------- + +ico { + font-size: 2.04em; +} + + +//------------------------------------------------------------------- +// End @if +} diff --git a/sass/_iehacks.scss b/sass/_iehacks.scss new file mode 100644 index 0000000..220dee6 --- /dev/null +++ b/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 +} diff --git a/sass/_inputs.scss b/sass/_inputs.scss new file mode 100644 index 0000000..678a7a5 --- /dev/null +++ b/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 +} diff --git a/sass/_messages.scss b/sass/_messages.scss new file mode 100644 index 0000000..32b77de --- /dev/null +++ b/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 +} diff --git a/sass/_navbar.scss b/sass/_navbar.scss new file mode 100644 index 0000000..0adf3ba --- /dev/null +++ b/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 +} diff --git a/sass/_table.scss b/sass/_table.scss new file mode 100644 index 0000000..9cc0ad5 --- /dev/null +++ b/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 +} diff --git a/sass/min-master.scss b/sass/min-master.scss new file mode 100644 index 0000000..58d0acc --- /dev/null +++ b/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';