Build highly expressive and efficient CSS grids
CSS Ruby
Latest commit bd2c944 Nov 28, 2016 @djgrant 0.8.0
Failed to load latest commit information.
assets/stylesheets Import all dependencies into individual files Nov 25, 2016
docs Update Jan 21, 2016
lib 0.7.0 Jun 21, 2016
spec Add specs for compass? and sass? Mar 19, 2016
.gitignore Ignore sass cache files Feb 8, 2016
Gemfile install Rspec with basic config Mar 19, 2016
Gemfile.lock install Rspec with basic config Mar 19, 2016 fixed typo Jul 6, 2016
book.json Update docs config Jan 21, 2016
bower.json 0.7.0 Jun 21, 2016
chameleon-sass.gemspec install Rspec with basic config Mar 19, 2016


Chameleon is a Sass layout framework for responsive web sites and applications.

At the heart of Chameleon is the ability to "turn on" classes at different screen sizes:

<div class="padded padded-small-on-mobile"></div>

Out of the box Chameleon adds 0Kb to your project. Generate only the classes that you need for your project.

@include classes('padded', $on: 'base');
@include classes('padded-right', $on: 'base mobile');
.padded {
  padding: 20px;

.padded-right {
  padding-right: 20px;

@media screen and (max-width: 479px) {
  .padded-right-on-mobile {
    padding-right: 20px;

Chameleon selectors be used anywhere in your stylesheet - even if they weren't generated into classes.

.myModule {
  @extend %padded;
  @extend %padded-small-on-mobile;
  @extend %padded-on-tablet;
  border: 3px dashed red;

You can also create selectors of your own using Chameleon's core mixins.

@include placeholders('myHelper') {
  color: red;
@include classes('myHelper', $on: 'base mobile tablet-up');

Multi-element modifiers provide a powerful, concise and expressive way to compose modules.

<div class="row cols-spaced cols-to-rows-on-mobile">
  <div class="col-1-3"></div>
  <div class="col-1-3"></div>
  <div class="col-1-3"></div>