Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Added test code for all included extensions. Updated README.

  • Loading branch information...
commit 8ee93ed4173c17e39b6cef67dd54b4603c7be62f 1 parent 59c6eef
@jedfoster authored
Showing with 130 additions and 1 deletion.
  1. +19 −1 README.md
  2. +111 −0 TESTS.md
View
20 README.md
@@ -1,6 +1,6 @@
# SassMeister #
-Become a Sass Master with SassMeister, the Sass playground.
+Become a Sass master with SassMeister, the Sass playground.
git clone https://github.com/jedfoster/SassMeister.git
cd SassMeister
@@ -9,6 +9,24 @@ Become a Sass Master with SassMeister, the Sass playground.
Go to [127.0.0.1:3000](http://127.0.0.1:3000) and start playing with Sass!
+## Contents Enclosed ##
+
+SassMeister includes these fine Sass libraries:
+
+- [Bourbon](http://thoughtbot.com/bourbon/)
+- [Breakpoint](https://github.com/canarymason/breakpoint)
+- [Compass](http://compass-style.org)
+- [Sassy Buttons](http://jaredhardy.com/sassy-buttons/)
+- [Singularity.gs](https://github.com/scottkellum/singularity)
+- [Stipe](https://github.com/Anotheruiguy/stipe)
+- [Susy](http://susy.oddbird.net)
+
+Try your own Sass against one of these libraries and see what the compiled CSS would look like.
+
+## Tests ##
+
+Test code for each of the included Sass libraries can be found [here](https://github.com/jedfoster/SassMeister/blob/master/TESTS.md).
+
## Caveats ##
@imports will probably not work the way you'd expect. Spriting with Compass will definitely not work.
View
111 TESTS.md
@@ -0,0 +1,111 @@
+# SassMeister Tests #
+
+Each block of SCSS should return valid CSS with no warnings or errors when tested against it's respective extension.
+
+
+## Bourbon ##
+
+ box:hover {
+ @include animation-name(scale, slide);
+ @include animation-duration(2s);
+ @include animation-timing-function(ease);
+ @include animation-iteration-count(infinite);
+
+ // Animation shorthand works the same as the CSS3 animation shorthand
+ @include animation(scale 1.0s ease-in, slide 2.0s ease);
+ }
+
+
+## Breakpoint ##
+
+ // create $breakpoint variables like so
+ // assume min-width (by default) if only a number
+ $breakpoint-medium-width: 500px;
+ $breakpoint-medium-width-em: 30em;
+
+ .foo {
+ @include breakpoint($breakpoint-medium-width) {
+ content: 'medium widths';
+ }
+ }
+ .bar {
+ @include breakpoint($breakpoint-medium-width-em) {
+ content: 'medium widths measured in ems';
+ }
+ }
+
+ // You can use breakpoint without variables too.
+ .rhcp {
+ @include breakpoint(30em 40em) {
+ content: 'between 30 and 40ems';
+ }
+ }
+
+
+## Compass ##
+
+ #wrapper {
+ @include columns(20em 2);
+ }
+
+
+## Sassy Buttons ##
+
+ .red { @include sassy-button-gradient("matte", #e86a43); }
+
+ .blue { @include sassy-button-gradient("simple", #4d8ccd); }
+
+ .green { @include sassy-button-gradient("glass", #8cbe5f); }
+
+
+## Singularity.gs ##
+
+ $grids: 3, (3, 5, 7, 5) 500px, ratio(1.75, 7) 900px;
+ $grids-mobile-first: true;
+ $gutters: .25, .3, .4;
+ $paddings: 0, .5em;
+
+ #bar {
+ @include grid-span(2, 2);
+
+ @include breakpoint(500px) {
+ @include grid-span(2, 3);
+ }
+
+ @include breakpoint(900px) {
+ @include grid-span(4, 1);
+ }
+ }
+
+
+## Stipe ##
+
+ .form_control {
+ @include grid(4);
+
+ &:last-child {
+ @include grid(4.125, omega);
+ }
+ &:first-child {
+ @include grid(4.125, alpha);
+ }
+
+ & button[type=submit] {
+ display:block;
+ margin: 1.2em auto;
+ }
+ }
+
+
+## Susy ##
+
+ .ag1 { @include span-columns(2,10); }
+ .ag2 { @include span-columns(6,10); }
+ .ag3 { @include span-columns(2 omega, 10); }
+ .ag4 { @include span-columns(3,6); }
+ .ag5 { @include span-columns(3 omega,6); }
+ .ag6 { @include span-columns(2,6); }
+ .ag7 { @include span-columns(4 omega,6); }
+ .ag8 { @include span-columns(2,4); }
+ .ag9 { @include span-columns(2 omega,4); }
+ .ag10 { clear: both; }
Please sign in to comment.
Something went wrong with that request. Please try again.