chameleon-sass - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

package.json

 {
   "name": "chameleon-sass",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "A styleless Sass framework for responsive user interfaces",
@@ -5,0 +5,0 @@ "repository": {

README.md

@@ -1,5 +0,62 @@
-## Documentation
+# Chameleon
 
-- [Installation](https://github.com/Lostmyname/lmn-gulp-tasks/blob/master/lib/sass-npm-importer.js)
-- [Generating a responsive grid system](https://github.com/djgrant/chameleon/wiki/Generating-a-responsive-grid-system)
-- [Grid composition](https://github.com/djgrant/chameleon/wiki/Grid-composition)
+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
+<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.
+
+```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 placeholder('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
+<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>
+```

No alert changes

Improved metrics

Lines of code

90

23.29%

Number of lines in readme file

62

933.33%

Worsened metrics

Total package byte prevSize

34231

-81.73%

Number of package files

45

-6.25%

No dependency changes