user profile image

Design style tiles in the browser with SCSS! Fork this in CodePen and make your own tiles. 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. It's responsive, too. Get your in-browser design on.

On GitHub at

Like this? Follow me on CodePen ( and Twitter (

A brief explanation:

  • Start at the top for the most basic options, and move down for more fine-grained styling.
  • 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.
    • 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.

And don't forget -- SAVE OFTEN!

-- Based on Samantha Warren's Style Tiles:

Forked from Jerad Gallinger's Pen Style tiles with SCSS.

This Pen is a fork of Jerad Gallinger's Pen Style tiles with SCSS.


  1. No comments yet.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.