Skip to content
Design style tiles with SCSS! Unchain your design ideas from Photoshop and jump straight into code. Put your tiles online and share with clients. It's responsive, too.
CSS JavaScript Ruby
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
img
js
sass
stylesheets
.gitignore
LICENSE.md
README.md
config.rb
index.html

README.md

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/.

Something went wrong with that request. Please try again.