@lostmyname/chameleon-sass

    0.8.0 • Public • Published

    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:

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

    Install

    npm i @lostmyname/chameleon-sass

    DownloadsWeekly Downloads

    2

    Version

    0.8.0

    License

    MIT

    Unpacked Size

    38.2 kB

    Total Files

    48

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar