https://github.com/djgrant/chameleon

Build highly expressive and efficient CSS grids
https://github.com/djgrant/chameleon

css framework grid sass

Last synced: 12 days ago
JSON representation

Build highly expressive and efficient CSS grids

• Host: GitHub
• URL: https://github.com/djgrant/chameleon
• Owner: djgrant
• Created: 2014-08-05T23:10:11.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2017-01-10T16:16:39.000Z (almost 8 years ago)
• Last Synced: 2024-03-23T11:01:05.133Z (8 months ago)
• Topics: css, framework, grid, sass
• Language: CSS
• Homepage:
• Size: 73.2 KB
• Stars: 6
• Watchers: 2
• Forks: 7
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Chameleon

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:

```html



```


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

```scss

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

```scss

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

```scss

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

```html



  


  


  




```