chameleon-sass 0.0.3 → 0.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: a205a5b3fd503b4bb4ada1049cec4b430829709d
-  data.tar.gz: 2c20a42dde168003bfce6b4b702668bff2866902
+  metadata.gz: 68cef38e919656c36ccdba48d176740689f23b97
+  data.tar.gz: 8a0162d82424e011d103ccca5171d79e11796c76
 SHA512:
-  metadata.gz: 89a501fc3b0614eb78803df1e3c5739d894d1813c680581e6a097cea0c7a2c3428e8c30206f8e30b1cbe69adf6012b12a0a57f1fdd34ba3a2302e59ab05518c7
-  data.tar.gz: 52e773a7d067d102d9b59643765dfa3e43aa2aca54873d47270ecb37da9464f0d5fa0e80a5a93ab48e0c42c167c375463e01e21b1a42b2d000a686b2bd64260a
+  metadata.gz: 45d8ebafef98fdd32ca8521a58cd713f11dfd2b9fa8d6072f6489cd5b17dc079ed1ec03596715de3eb1c22ead66436b59dcaeeaa7732eebbeb424451840bf464
+  data.tar.gz: 37765b8ff2eb972a8f73b8442defb5104a023b559f0aca3d7ff47084366c78dcfa73e7dfda17c2680ac775c31a05cce736733fcdbde2d24ade87d29aec560b3f

data/assets/stylesheets/_chameleon.sass

@@ -1,3 +1,6 @@
-=tester($x)
-  body:before
-    content: $x + test
+@import "config"
+@import "functions"
+@import "mixins"
+@import "defaults"
+@import "objects"
+@import "helpers"

data/assets/stylesheets/_config.sass

@@ -0,0 +1,2 @@
+@import "base-sizing"
+@import "breakpoints"

data/assets/stylesheets/_defaults.sass

@@ -0,0 +1 @@
+@import "defaults/units"

data/assets/stylesheets/_functions.sass

@@ -0,0 +1,3 @@
+@import "functions/lists"
+@import "functions/maps"
+@import "functions/units"

data/assets/stylesheets/_helpers.sass

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

data/assets/stylesheets/_mixins.sass

@@ -0,0 +1 @@
+@import "mixins/responsive"

data/assets/stylesheets/_objects.sass

@@ -0,0 +1,3 @@
+@import "objects/containers"
+@import "objects/grid"
+@import "objects/list"

data/assets/stylesheets/config/_base-sizing.sass

@@ -0,0 +1 @@
+$font-size-base: 16px;

data/assets/stylesheets/config/_breakpoints.scss

@@ -0,0 +1,41 @@
+// In versions 3.3 this can be udpated to a map and be much more maintainable
+
+$breakpoints: (
+  "mobile"  0,
+  "fablet"  480px,
+  "tablet"  778px,
+  "desktop" 1040px,
+  "wide"    1200px
+) !default;
+
+// It's really hard to remove the units from a list fragment
+// so rewrite into individual variables
+// Again, with 3.3 maps this won't be required
+
+$device-width-mobile: 0px !default;
+$device-width-fablet: 480px !default;
+$device-width-tablet: 778px !default;
+$device-width-desktop: 1040px !default;
+$device-width-wide: 1200px !default;
+
+
+$device-breakpoints: (
+  'mobile'             '(max-width: 479px)',
+  'mobile-and-fablet'  '(max-width: 777px)',
+  'mobile-and-tablet'  '(max-width: 1039px)',
+
+  'fablet'             '(min-width: 480px) and (max-width: 777px)',
+  'fablet-and-tablet'  '(min-width: 480px) and (max-width: 1039px)',
+  'fablet-up'          '(min-width: 480px)',
+  'fablet-down'        '(max-width: 777px)',
+
+  'tablet'             '(min-width: 778px) and (max-width: 1039px)',
+  'tablet-and-desktop' '(min-width: 778px) and (max-width: 1199px)',
+  'tablet-up'          '(min-width: 778px)',
+  'tablet-down'        '(max-width: 1039px)',
+
+  'desktop'            '(min-width: 1040px) and (max-width: 1199px)',
+  'desktop-up'         '(min-width: 1040px)',
+
+  'wide-up'            '(min-width: 1200px)'
+) !default;

data/assets/stylesheets/defaults/_units.sass

@@ -0,0 +1,7 @@
+// 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

data/assets/stylesheets/functions/_units.scss

@@ -0,0 +1,15 @@
+@function remove-unit($number){
+ @return $number / ($number * 0 + 1);
+}
+
+@function em($value) {
+  @return (remove-unit($value) / remove-unit($font-size-base)) * 1em;
+}
+
+@function rem($value) {
+  @return (remove-unit($value) / remove-unit($font-size-base)) * 1rem;
+}
+
+@function px($value) {
+  @return (remove-unit($value) * $font-size-base);
+}

data/assets/stylesheets/helpers/_box.sass

@@ -0,0 +1,3 @@
++placeholders("widest")
+  display: block
+  width: 100%

data/assets/stylesheets/helpers/_position.sass

@@ -0,0 +1,36 @@
++placeholders("aligned-right")
+  text-align: right
+
++placeholders("aligned-center")
+  text-align: center
+
++placeholders("expanded")
+  &:before,
+  &:after
+    content: ""
+    display: table
+
+  &:after
+    clear: both
+
+
++placeholders("child-centered")
+  text-align: center
+
+  &::after
+    content: ''
+    display: inline-block
+    height: 100%
+    vertical-align: middle
+    margin-right: -0.25em
+
+  & > *
+    display: inline-block
+    vertical-align: middle
+    text-align: left
+
+    &.aligned-center
+      text-align: center
+
+    &.aligned-right
+      text-align: right

data/assets/stylesheets/helpers/_visibility.sass

@@ -0,0 +1,39 @@
+// H5BP visibility styles
+
+// Hide from both screenreaders and browsers: h5bp.com/u
+
++placeholders("hidden")
+  display: none !important
+  visibility: hidden
+
+
+// Hide only visually, but have it available for screenreaders: h5bp.com/v
+
++placeholders("concealed")
+  border: 0 !important
+  clip: rect(0 0 0 0) !important
+  height: 1px !important
+  margin: -1px !important
+  overflow: hidden !important
+  padding: 0 !important
+  position: absolute !important
+  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")
+  visibility: hidden

data/assets/stylesheets/mixins/_responsive.sass

@@ -0,0 +1,103 @@
+=on($_device)
+  @each $breakpoint in $device-breakpoints
+    $device: nth($breakpoint, 1)
+    $expression: nth($breakpoint, 2)
+    @if $_device == $device and $expression
+      @media all and #{$expression}
+        @content
+    @if $_device == "base"
+      @content
+
+
+=mq($from: false, $to: false)
+
+  $min-width: 0
+  $max-width: 0
+  $expression: "all"
+
+  @if $from
+    @if type-of($from) == number
+      $min-width: $from
+    @else
+      @each $breakpoint in $breakpoints
+        $name: nth($breakpoint, 1)
+        $width: nth($breakpoint, 2)
+
+        @if $from == $name and $width
+          $min-width: $width
+
+    @if $min-width
+      $min-expression: "(min-width: #{$min-width})"
+
+  @if $to
+    @if type-of($to) == number
+      $max-width: $to
+    @else
+      @each $breakpoint in $breakpoints
+        $name: nth($breakpoint, 1)
+        $width: nth($breakpoint, 2)
+
+        @if $to == $name and $width
+          $max-width: $width
+
+  @if $min-width != 0
+    $expression: "#{$expression} and (min-width: #{$min-width})"
+
+  @if $max-width != 0
+    $expression: "#{$expression} and (max-width: #{$max-width})"
+
+  @media #{$expression}
+    @content
+
+
+// Helper variable: just the device names
+$devices: (null)
+
+@each $item in $device-breakpoints
+  $device: unquote(#{nth($item, 1)})
+  $devices: append($devices, $device, space)
+
+
+=debug-breakpoints
+  @each $breakpoint in $breakpoints
+    $device: nth($breakpoint, 1)
+    $min-width: nth($breakpoint, 2)
+
+    +mq($from: $device)
+      body:before
+        content: '#{$device} (#{$min-width}+)'
+        position: fixed
+        left: 0
+        right: 0
+        bottom: 0
+        padding: 1rem 0
+        text-align: center
+        background: white
+        opacity: 0.65
+        z-index: 100
+
+
+// It's not possible to extend into media queries so this mixin
+// creates, for every breakpoint, a named version of the placeholder
+
+=placeholders($name)
+  %#{$name}
+    @content
+
+  @each $breakpoint in $device-breakpoints
+    $device: nth($breakpoint, 1)
+    +on($device)
+      %#{$name}-on-#{$device}
+        @content
+
+
+// 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)
+  @each $device in $devices
+    $postfix: if($device == "base", "", -on-#{$device})
+    +on($device)
+      .#{$name}#{$postfix}
+        @extend %#{$name}#{$postfix}

data/assets/stylesheets/objects/_containers.sass

@@ -0,0 +1,50 @@
+$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
+  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%

data/assets/stylesheets/objects/_grid.sass

@@ -0,0 +1,132 @@
+=grid-defaults
+  .row
+    @extend %expanded
+    letter-spacing: -0.25em
+
+    +on("fablet-down")
+      letter-spacing: -0.27em
+
+    > *
+      letter-spacing: normal
+
+  .row.no-cols
+    letter-spacing: normal
+
+  [class^="col-"],
+  [class*=" col-"]
+    @extend %col
+    @extend %expanded
+
+
++placeholders("col")
+  display: inline-block
+  min-height: 1px
+  vertical-align: top
+  letter-spacing: normal
+  word-spacing: normal
+
++placeholders("col-1-2")
+  width: 50%
+
++placeholders("col-1-3")
+  width: 33.333333%
+
++placeholders("col-2-3")
+  width: 66.666666%
+
++placeholders("col-1-4")
+  width: 25%
+
++placeholders("col-3-4")
+  width: 75%
+
+
+// Switch cols to rows (stack 'em)
+
++placeholders("cols-to-rows")
+  &.row
+    display: block
+    margin-left: 0
+
+  & > *
+    display: block
+    width: 100% !important // override col width
+    padding: 0 !important // override col spacing
+
+    &:last-child
+      margin-bottom: 0
+
+
+// Reverse column order
+
++placeholders("cols-reversed")
+  direction: rtl
+
+  > *
+    direction: ltr
+    text-align: left
+
+
+// Equal height columns
+// Can't be used with reversed
+
++placeholders("cols-equal-height")
+  display: table-row
+
+  > *
+    display: table-cell
+
+  > :first-child
+    padding-left: 0
+
+
+// Column spacing - add gutter
+
+=cols-spaced($gutter)
+  margin-left: -$gutter
+
+  & > *
+    padding-left: $gutter
+
++placeholders("cols-spaced-small")
+  +cols-spaced($unit-small)
+
++placeholders("cols-spaced")
+  +cols-spaced($unit)
+
++placeholders("cols-spaced-big")
+  +cols-spaced($unit-big)
+
++placeholders("cols-spaced-huge")
+  +cols-spaced($unit-huge)
+
+
+// Row spacing - add baseline gutter
+
+=rows-spaced($_gutter)
+  & > .row
+    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
+
+    & > *
+      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-defaults
+  // This can happily be applied to all rows
+  .row:last-child
+    padding-bottom: 0

data/assets/stylesheets/objects/_list.sass

@@ -0,0 +1,79 @@
++placeholders("list-bulletless")
+  margin: 0
+  padding: 0
+
+  li
+    list-style: none
+
+// Also declare as mixin because +placeholders()
+// cannot @extend %placeholders in multiple breakpoints
+
+=prepend-slash
+  &:before
+    content: '/'
+    margin: 0 12px 0 8px
+    font-weight: normal
+
+=append-slash
+  &:after
+    content: '/'
+    margin: 0 12px 0 8px
+    font-weight: normal
+
++placeholders("appended-slash")
+  +append-slash
+
++placeholders("prepended-slash")
+  +prepend-slash
+
+
++placeholders("list-inline")
+  margin: 0
+  padding: 0
+
+  li
+    display: inline-block
+    list-style: none
+    margin-right: $unit
+    vertical-align: top
+
+    &:last-child
+      margin-right: 0
+
+
++placeholders("list-inline--unspaced")
+  li
+    margin-right: 0
+
+
++placeholders("list-inline--pipes")
+  li
+    border-right: 1px solid $color-bg-gray-brown
+    padding-right: $unit-small
+    margin-right: $unit-small - rem(4) // inline space
+
+    &:last-child
+      padding-right: 0
+      border-right: none
+
+
++placeholders("list-inline--slashes")
+  li
+    margin: 0
+
+  li
+    +prepend-slash
+
+  li:first-child:before
+    content: ''
+    margin: 0
+
+
++placeholders("list--stacked")
+  margin: 0
+  padding: 0
+
+  li
+    list-style: none
+    padding: 1rem 0
+    border-bottom: 1px solid #ccc

data/lib/chameleon-sass.rb

@@ -1,5 +1,5 @@
 module ChameleonSass
-  VERSION = "0.0.3"
+  VERSION = "0.0.4"
   DATE = "2014-08-12"
 
   class << self

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: chameleon-sass
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.0.4
 platform: ruby
 authors:
 - Daniel Grant
@@ -18,6 +18,25 @@ extra_rdoc_files: []
 files:
 - README.md
 - assets/stylesheets/_chameleon.sass
+- assets/stylesheets/_config.sass
+- assets/stylesheets/_defaults.sass
+- assets/stylesheets/_functions.sass
+- assets/stylesheets/_helpers.sass
+- assets/stylesheets/_mixins.sass
+- assets/stylesheets/_objects.sass
+- assets/stylesheets/config/_base-sizing.sass
+- assets/stylesheets/config/_breakpoints.scss
+- assets/stylesheets/defaults/_units.sass
+- assets/stylesheets/functions/_lists.sass
+- 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/objects/_containers.sass
+- assets/stylesheets/objects/_grid.sass
+- assets/stylesheets/objects/_list.sass
 - lib/chameleon-sass.rb
 homepage: https://github.com/djgrant/chameleon
 licenses: