#Style Tiles with SCSS
##What's this, then? Design style tiles with SCSS! Unchain your design ideas from Photoshop and jump straight into code. Upload to your server and share tiles with clients. It's responsive, too.
###Originally designed for and in CodePen Fork this in CodePen and make your own tiles: http://codepen.io/jeradg/pen/rFqat. Share your tiles with clients with the Full Page link. Go CodePen Pro and update styles on the fly in Live View in a meeting with your client. Get your in-browser design on.
##A brief explanation Start at the top of the SCSS for the most basic options, and move down for more fine-grained styling. (For simplicity, the SCSS is all kept in a single file. If you'd prefer to use partials, that works too.)
The SCSS is sectioned into (from top -> bottom):
- Basic styling
- Main colors, basic typography, textures, and button styling.
- Advanced styling
- Advanced options for the above items. If you want to make fancy buttons, do cool things with the texture boxes, or have fine-grained control over the typography samples and adjectives, do it here.
- Settings
- Below the settings, everything comes together in the proper order to be compiled.
Play around! Use SCSS and Compass's colour functions to create colour schemes, try to do fancy stuff in the texture boxes, mess about with floats and margins to customize the layout -- make it your own.
##Compass Style Tiles with SCSS is set up for use with Compass (http://compass-style.org), but does not require it.
##What are Style Tiles? For more on Samantha Warren's awesome Style Tiles, check out http://styletil.es/ and http://www.alistapart.com/articles/style-tiles-and-how-they-work/.