chameleon-sass 0.0.12 → 0.5.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: a06f632f0013b7dd31c565146f82c0edaa334a9c
-  data.tar.gz: d62cab8df34e253809817074975df07b5258cc42
+  metadata.gz: 7365ad7febbe90e97219559e6e9d1c1ceead9f72
+  data.tar.gz: 788b22068a222ee198929c5e9b0c216110f54c0b
 SHA512:
-  metadata.gz: e373b52851238af9bb3b0ae7d70e7881c9d8273a429dad3f08598b4cb7b2d6ccd68c204906da2011108498e7c2eff8c08301c204471ebed6e459c475da906e1b
-  data.tar.gz: f19ec85354cf69d6539b00c092d099a29c350d7a093550bbaa033c2cdb427b1781cab241cf1371f733d63476a58363432f7e9b4e62a2f2c5daec58c25f2ace8d
+  metadata.gz: 33b84678c8f5730eac1148e6ffe3936c68a33d791be8f69074e37d37da712ee6b7210e4883a4d0c97765e62a6391d6aa698d7f79d425a53e04a7afa56f604f17
+  data.tar.gz: 00daff8a9dae07e8b621bc6e01941c6aea5fe313c38aa55ac5b186111a24b9d2ad73990a8a4350b4af9b30a1ecc2e1e3bde5e587ae96a3dc3d6fb44995b2d9af

data/README.md

@@ -1,87 +1,62 @@
-Chameleon
-=========
+# Chameleon
 
+Chameleon is a Sass layout framework for responsive web sites and applications.
 
-## Getting started
+At the heart of Chameleon is the ability to "turn on" classes at different screen sizes:
 
-### Installing in a Rails project
-
-Add to your Gemfile:
-
-`gem 'chameleon-sass'`
-
-Add to your main Sass stylesheet:
-
-`@import "chameleon";`
-
-
-### Installing in a Compass project
-
-From the command line:
-
-`gem install chameleon-sass`
-
-Add to the top of your Compass config file (usually config.rb):
-
-`require 'chameleon-sass'`
-
-Add to your main Sass stylesheet:
-
-`@import "chameleon"`
-
-
-### Installing in a Bower project
-
-From the command line:
-
-`bower install chameleon-sass`
-
-If you are using Compass you can add the import path to your Compass config file (usually config.rb):
-
-`add_import_path "bower_components/chameleon-sass/assets/stylesheets/"`
-
-Otherwise, you will need to manually add the above path to your @import.
-
-Add to your main Sass stylesheet:
-
-`@import "chameleon";`
-
-
-### Generating a responsive grid
+```html
+<div class="padded padded-small-on-mobile"></div>
+```
 
-One of the defining feature of Chameleon is that no CSS is generated until you explictly declare the generation of some classes.
+Out of the box Chameleon adds 0Kb to your project. Generate only the classes that you need for your project.
 
-Let's get started by adding some building blocks of a responsive grid:
+```scss
+@include classes('padded', $on: 'base');
+@include classes('padded-right', $on: 'base mobile');
+```
 
 ```
-@import "chameleon";
+.padded {
+  padding: 20px;
+}
+
+.padded-right {
+  padding-right: 20px;
+}
+
+@media screen and (max-width: 479px) {
+  .padded-right-on-mobile {
+    padding-right: 20px;
+  }
+}
+```
 
-@include defaults();
-@include grid-defaults();
+Chameleon selectors be used anywhere in your stylesheet  - even if they weren't generated into classes.
 
-@include classes("cols-spaced", $on: ("base" "fablet-up" "tablet-up" "desktop-up"));
-@include classes("cols-to-rows", $on: ("base" "mobile" "fablet-down" "tablet-down"));
+```scss
+.myModule {
+  @extend %padded;
+  @extend %padded-small-on-mobile;
+  @extend %padded-on-tablet;
+  border: 3px dashed red;
+}
+```
 
-@include classes("col-1-2", $on: "base");
-@include classes("col-1-3", $on: "base");
-@include classes("col-1-4", $on: "base");
+You can also create selectors of your own using Chameleon's core mixins.
 
-@include classes("rows-spaced", $on: "base");
-@include classes("cols-spaced", $on: "base");
+```scss
+@include placeholder('myHelper') {
+  color: red;
+}
+@include classes('myHelper', $on: 'base mobile tablet-up');
 ```
-Here we use the default breakpoint expressions defined by Chameleon to generate classes that work for different viewport sizes.
 
-Now, import your stylesheet into your page and add some markup:
+Multi-element modifiers provide a powerful, concise and expressive way to compose modules.
 
-```
-<div class="row cols-spaced">
-  <div class="col-1-2">
-    <div class="panel">Half</div>
-  </div>
-  <div class="col-1-2">
-    <div class="panel">Half</div>
-  </div>
+```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>
-```
-
-Congrats! You just generated a super easy to use, easily customisable, responsive grid system.
+```

data/assets/stylesheets/_chameleon.sass

@@ -1,7 +1,2 @@
-@import "functions"
-@import "config"
-@import "mixins"
-@import "config/units"
-@import "objects"
-@import "helpers"
-@import "defaults"
+@import "core"
+@import "library"

data/assets/stylesheets/_config.sass

@@ -1,3 +1,3 @@
 @import "config/base-sizing"
 @import "config/breakpoints"
-@import "config/units"
+@import "config/sizing"

data/assets/stylesheets/_core.sass

@@ -0,0 +1,3 @@
+@import "functions"
+@import "config"
+@import "mixins"

data/assets/stylesheets/_defaults.sass

@@ -1,4 +1,3 @@
 =defaults
   *
-    position: relative
     box-sizing: border-box

data/assets/stylesheets/_helpers.sass

@@ -1,3 +1,3 @@
 @import "helpers/box"
 @import "helpers/position"
-@import "helpers/visibility"
+@import "helpers/visibility"

data/assets/stylesheets/_library.sass

@@ -0,0 +1,3 @@
+@import "objects"
+@import "helpers"
+@import "defaults"

data/assets/stylesheets/_mixins.sass

@@ -1 +1,2 @@
-@import "mixins/responsive"
+@import "mixins/responsive"
+@import "mixins/utility"

data/assets/stylesheets/config/_sizing.scss

@@ -0,0 +1,9 @@
+$sizing-map: (
+  "none": 0,
+  "tiny": rem(5),
+  "small": rem(10),
+  "default": rem(20),
+  "big": rem(40),
+  "bigger": rem(60),
+  "huge": rem(80)
+) !default;

data/assets/stylesheets/helpers/_box.sass

@@ -1,3 +1,76 @@
+$box-map: ('spaced': 'margin', 'padded': 'padding')
+$position-list: ('top' 'left' 'bottom' 'right')
+
+// Display
++placeholders("block")
+  display: block
+
++placeholders("inline-block")
+  display: inline-block
+
+
+// Size
 +placeholders("widest")
   display: block
   width: 100%
+  max-width: 100%
+
++placeholders("tallest")
+  display: block
+  height: 100%
+  max-height: 100%
+
+
+// Padding / Margin / Spacing
+=rows($prop, $size)
+  #{$prop}-top: $size
+  #{$prop}-bottom: $size
+
+=cols($prop, $size)
+  #{$prop}-left: $size
+  #{$prop}-right: $size
+
+@each $box-label, $box-property in $box-map
+
+  +placeholders('#{$box-label}')
+    #{$box-property}: map-get($sizing-map, 'default')
+
+  +placeholders('#{$box-label}-rows')
+    +rows($box-property, map-get($sizing-map, 'default'))
+
+  +placeholders('#{$box-label}-cols')
+    +cols($box-property, map-get($sizing-map, 'default'))
+
+  @each $position in $position-list
+    +placeholders('#{$box-label}-#{$position}')
+      #{$box-property}-#{$position}: map-get($sizing-map, 'default')
+
+  @each $size-name, $size in $sizing-map
+    +placeholders('#{$box-label}-#{$size-name}')
+      #{$box-property}: $size
+
+    +placeholders('#{$box-label}-rows-#{$size-name}')
+      +rows($box-property, $size)
+
+    +placeholders('#{$box-label}-cols-#{$size-name}')
+      +cols($box-property, $size)
+
+    @each $position in $position-list
+      +placeholders('#{$box-label}-#{$position}-#{$size-name}')
+        #{$box-property}-#{$position}: #{$size}
+
+
+=inline-blocks-spaced-defaults
+  [class*="inline-blocks-spaced"] > *
+    letter-spacing: normal
+
+@each $size-name, $size in $sizing-map
+  +placeholders('inline-blocks-spaced-#{$size}')
+    letter-spacing: $size
+    +write-once($ref: 'IBSD')
+      +inline-blocks-spaced-defaults
+
+  +placeholders('inline-blocks-spaced-#{$size}')
+    letter-spacing: $size
+    +write-once($ref: 'IBSD')
+      +inline-blocks-spaced-defaults

data/assets/stylesheets/helpers/_position.sass

@@ -1,9 +1,33 @@
++placeholders("aligned-left")
+  text-align: left
+
 +placeholders("aligned-right")
   text-align: right
 
 +placeholders("aligned-center")
   text-align: center
 
+
++placeholders("positioned-absolute")
+  position: absolute
+
++placeholders("positioned-relative")
+  position: relative
+
++placeholders("positioned-fixed")
+  position: fixed
+
++placeholders("positioned-static")
+  position: static
+
+
++placeholders("floated-left")
+  float: left
+
++placeholders("floated-right")
+  float: right
+
+
 +placeholders("expanded")
   &:before,
   &:after

data/assets/stylesheets/helpers/_visibility.sass

@@ -1,13 +1,11 @@
-// H5BP visibility styles
-
-// Hide from both screenreaders and browsers: h5bp.com/u
+// Hide from both screenreaders and browsers
 
 +placeholders("hidden")
   display: none !important
   visibility: hidden
 
 
-// Hide only visually, but have it available for screenreaders: h5bp.com/v
+// Hide only visually, but have it available for screenreaders
 
 +placeholders("concealed")
   border: 0 !important
@@ -20,19 +18,6 @@
   width: 1px !important
 
 
-// Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p
-
-+placeholders("concealed-focusable")
-  &:active,
-  &:focus
-    clip: auto
-    height: auto
-    margin: 0
-    overflow: visible
-    position: static
-    width: auto
-
-
 // Hide visually and from screenreaders, but maintain layout
 
 +placeholders("camouflaged")

data/assets/stylesheets/mixins/_responsive.sass

@@ -94,8 +94,8 @@ $devices: (null)
 // Genenerate a list of classes for different breakpoints
 // Usage: +classes(big-thing, mobile tablet desktop-up)
 
-=classes($name, $on: false)
-  $devices: if($on, $on, $devices)
+=classes($name, $on: "base")
+  $devices: if($on == "all", $devices, $on)
   @each $device in $devices
     $postfix: if($device == "base", "", -on-#{$device})
     +on($device)

data/assets/stylesheets/mixins/_utility.sass

@@ -0,0 +1,6 @@
+$write-map: ()
+@mixin write-once($ref)
+  $written: map-get($write-map, $ref)
+  @if $written != true
+    @content
+    $write-map: map-merge($write-map, ($ref: true)) !global

data/assets/stylesheets/objects/_containers.sass

@@ -1,50 +1,6 @@
-$width-container: rem(1000)
-$width-container-medium: rem(700)
-$width-container-small: rem(500)
-$width-container-tiny: rem(250)
-
-=container($width-container)
-
-  $larger-than-fablet: if($width-container > rem($device-width-tablet - 1), true, false)
-
-  max-width: $width-container
+=container($max-width, $min-margin)
+  max-width: $max-width
   margin: 0 auto
 
-  @if $larger-than-fablet
-    +mq($to: px($width-container + $unit-big * 2))
-      margin: 0 $unit-big
-
-    +on("fablet-down")
-      margin: 0 $unit
-
-  @else
-    +mq($to: px($width-container + $unit * 2))
-      margin: 0 $unit
-
-%container
-  +container($width-container)
-
-%container-medium
-  +container($width-container-medium)
-
-%container-small
-  +container($width-container-small)
-
-%container-tiny
-  +container($width-container-tiny)
-
-
-// Complex col/container layouts
-%col-left-edge-to-1-3-container
-  @extend %col
-  width: calc((100vw - #{$width-container})/2 + (#{$width-container} * 1/3))
-
-  @media all and (max-width: $width-container)
-    width: calc(100vw * 1/3)
-
-%col-to-2-3-container
-  @extend %col
-  width: $width-container * 2/3
-
-  @media all and (max-width: $width-container)
-    width: 66.666666%
+  +mq($to: $max-width + $min-margin * 2)
+    margin: 0 $min-margin

data/assets/stylesheets/objects/_grid.sass

@@ -1,16 +1,13 @@
-=grid-defaults
+=grid-defaults($unmin: false, $spacing: -0.3em)
   .row
     @extend %expanded
-    letter-spacing: -0.25em
 
-    +on("fablet-down")
-      letter-spacing: -0.27em
+    @if $unmin == true
+      letter-spacing: $spacing
 
-    > *
-      letter-spacing: normal
-
-  .row.no-cols
-    letter-spacing: normal
+      & > *,
+      &.no-cols
+        letter-spacing: normal
 
   [class^="col-"],
   [class*=" col-"]
@@ -22,7 +19,6 @@
   display: inline-block
   min-height: 1px
   vertical-align: top
-  letter-spacing: normal
   word-spacing: normal
 
 +placeholders("col-1-2")
@@ -107,16 +103,20 @@
     padding-left: $gutter
 
 +placeholders("cols-spaced-small")
-  +cols-spaced($unit-small)
+  +cols-spaced(map-get($sizing-map, 'small'))
 
 +placeholders("cols-spaced")
-  +cols-spaced($unit)
+  +cols-spaced(map-get($sizing-map, 'default'))
 
 +placeholders("cols-spaced-big")
-  +cols-spaced($unit-big)
+  +cols-spaced(map-get($sizing-map, 'big'))
 
 +placeholders("cols-spaced-huge")
-  +cols-spaced($unit-huge)
+  +cols-spaced(map-get($sizing-map, 'huge'))
+
+@each $size-name, $size in $sizing-map
+  +placeholders("cols-spaced-#{$size-name}")
+    +cols-spaced($size)
 
 
 // Row spacing - add baseline gutter
@@ -126,25 +126,21 @@
     padding-bottom: $_gutter
 
   // Space cols that have been switched to rows too
-  &[class*="cols-to-rows"]
-    margin-bottom: -$_gutter // removes gutter below last row / cols
+  &[class*="cols-to-rows"] > *
+    margin-bottom: $_gutter
 
-    & > *
-      margin-bottom: $_gutter
+  // Suck up margin from the last visible child
+  // Use negative margin in case the last child isn't visible
+  // Use :after in case someone else slaps a margin class on the element
+  &:after
+    content: ''
+    display: table
+    margin-bottom: -$_gutter
 
-+placeholders("rows-spaced-small")
-  +rows-spaced($unit-small)
 
 +placeholders("rows-spaced")
-  +rows-spaced($unit)
-
-+placeholders("rows-spaced-big")
-  +rows-spaced($unit-big)
-
-+placeholders("rows-spaced-huge")
-  +rows-spaced($unit-huge)
+  +rows-spaced(map-get($sizing-map, 'default'))
 
-=rows-spaced-defaults
-  // This can happily be applied to all rows
-  .row:last-child
-    padding-bottom: 0
+@each $size-name, $size in $sizing-map
+  +placeholders("rows-spaced-#{$size-name}")
+    +rows-spaced($size)

data/lib/chameleon-sass.rb

@@ -1,5 +1,5 @@
 module ChameleonSass
-  VERSION = "0.0.12"
+  VERSION = "0.5.4"
   DATE = "2015-09-10"
 
   class << self

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: chameleon-sass
 version: !ruby/object:Gem::Version
-  version: 0.0.12
+  version: 0.5.4
 platform: ruby
 authors:
 - Daniel Grant
@@ -19,20 +19,23 @@ files:
 - README.md
 - assets/stylesheets/_chameleon.sass
 - assets/stylesheets/_config.sass
+- assets/stylesheets/_core.sass
 - assets/stylesheets/_defaults.sass
 - assets/stylesheets/_functions.sass
 - assets/stylesheets/_helpers.sass
+- assets/stylesheets/_library.sass
 - assets/stylesheets/_mixins.sass
 - assets/stylesheets/_objects.sass
 - assets/stylesheets/config/_base-sizing.sass
 - assets/stylesheets/config/_breakpoints.scss
-- assets/stylesheets/config/_units.sass
+- assets/stylesheets/config/_sizing.scss
 - assets/stylesheets/functions/_maps.sass
 - assets/stylesheets/functions/_units.scss
 - assets/stylesheets/helpers/_box.sass
 - assets/stylesheets/helpers/_position.sass
 - assets/stylesheets/helpers/_visibility.sass
 - assets/stylesheets/mixins/_responsive.sass
+- assets/stylesheets/mixins/_utility.sass
 - assets/stylesheets/objects/_containers.sass
 - assets/stylesheets/objects/_grid.sass
 - lib/chameleon-sass.rb

data/assets/stylesheets/config/_units.sass

@@ -1,7 +0,0 @@
-// Grid units
-$unit-tiny: rem(5) !default
-$unit-small: rem(10) !default
-$unit: rem(20) !default
-$unit-big: rem(40) !default
-$unit-bigger: rem(60) !default
-$unit-huge: rem(80) !default