compass-inuit 4.2.1 → 4.3

data/stylesheets/partials/generic/_mixins.scss

@@ -201,6 +201,7 @@
     }
     
     @if $arrow-edge == left{
+        
         @extend %arrow--near;
         
         &:before{
@@ -226,3 +227,59 @@
     }
     
 }
+
+
+/**
+ * Media query mixin.
+ *
+ * It’s not great practice to define solid breakpoints up-front, preferring to
+ * modify your design when it needs it, rather than assuming you’ll want a
+ * change at ‘mobile’. However, as inuit.css is required to take a hands off
+ * approach to design decisions, this is the closest we can get to baked-in
+ * responsiveness. It’s flexible enough to allow you to set your own breakpoints
+ * but solid enough to be frameworkified.
+ * 
+ * We define some broad breakpoints in our vars file that are picked up here
+ * for use in a simple media query mixin. Our options are:
+ *
+ * palm
+ * lap
+ * portable
+ * desk
+ * 
+ * Not using a media query will, naturally, serve styles to all devices.
+ * 
+ * `@include media-query(palm){ [styles here] }`
+ * 
+ * We work out your end points for you:
+ */
+$palm-end:              $lap-start +-1;
+$lap-end:               $desk-start +-1;
+
+@mixin media-query($media-query){
+
+    @if $media-query == palm{
+        
+        @media only screen and (max-width:$palm-end +px) { @content; }
+        
+    }
+    
+    @if $media-query == lap{
+        
+        @media only screen and (min-width:$lap-start +px) and (max-width:$lap-end +px) { @content; }
+        
+    }
+    
+    @if $media-query == portable{
+        
+        @media only screen and (max-width:$lap-end +px) { @content; }
+        
+    }
+    
+    @if $media-query == desk{
+        
+        @media only screen and (min-width:$desk-start +px) { @content; }
+        
+    }
+    
+}

data/stylesheets/partials/generic/_widths.scss

@@ -93,3 +93,247 @@
   .nine-twelfths    { @extend .three-quarters; }
    .ten-twelfths    { @extend .five-sixths; }
 .eleven-twelfths    { width:91.666%; }
+
+
+/**
+ * If you have set `$responsive` to ‘true’ in `_vars.scss` then you now have
+ * access to these classes. You can define at which breakpoing you’d like an
+ * element to be a certain size, e.g.:
+ * 
+ * `<div class="g  one-quarter  lap-one-half  palm-one-whole"> ... </div>`
+ * 
+ * This would create a `div` that, at ‘desktop’ sizes, takes up a quarter of the
+ * horizontal space, a half of that space at ‘tablet’ sizes, and goes full width
+ * at ‘mobile’ sizes.
+ * 
+ * Demo: jsfiddle.net/inuitcss/WS4Ge
+ * 
+ */
+
+@if $responsive == true{
+
+@include media-query(palm){
+    
+    .palm-one-whole         { width:100%; }
+
+    .palm-one-half          { width:50%; }
+
+    .palm-one-third         { width:33.333%; }
+    .palm-two-thirds        { width:66.666%; }
+
+      .palm-one-quarter     { width:25%; }
+      .palm-two-quarters    { @extend .palm-one-half; }
+    .palm-three-quarters    { width:75%; }
+
+      .palm-one-fifth       { width:20%; }
+      .palm-two-fifths      { width:40%; }
+    .palm-three-fifths      { width:60%; }
+     .palm-four-fifths      { width:80%; }
+
+      .palm-one-sixth       { width:16.666%; }
+      .palm-two-sixths      { @extend .palm-one-third; }
+    .palm-three-sixths      { @extend .palm-one-half; }
+     .palm-four-sixths      { @extend .palm-two-thirds; }
+     .palm-five-sixths      { width:83.333%; }
+
+      .palm-one-eighth      { width:12.5%; }
+      .palm-two-eighths     { @extend .palm-one-quarter; }
+    .palm-three-eighths     { width:37.5%; }
+     .palm-four-eighths     { @extend .palm-one-half; }
+     .palm-five-eighths     { width:62.5%; }
+      .palm-six-eighths     { @extend .palm-three-quarters; }
+    .palm-seven-eighths     { width:87.5%; }
+
+      .palm-one-tenth       { width:10%; }
+      .palm-two-tenths      { @extend .palm-one-fifth; }
+    .palm-three-tenths      { width:30%; }
+     .palm-four-tenths      { @extend .palm-two-fifths; }
+     .palm-five-tenths      { @extend .palm-one-half; }
+      .palm-six-tenths      { @extend .palm-three-fifths; }
+    .palm-seven-tenths      { width:70%; }
+    .palm-eight-tenths      { @extend .palm-four-fifths; }
+     .palm-nine-tenths      { width:90%; }
+
+       .palm-one-twelfth    { width:8.333%; }
+       .palm-two-twelfths   { @extend .palm-one-sixth; }
+     .palm-three-twelfths   { @extend .palm-one-quarter; }
+      .palm-four-twelfths   { @extend .palm-one-third; }
+      .palm-five-twelfths   { width:41.666% }
+       .palm-six-twelfths   { @extend .palm-one-half; }
+     .palm-seven-twelfths   { width:58.333%; }
+     .palm-eight-twelfths   { @extend .palm-two-thirds; }
+      .palm-nine-twelfths   { @extend .palm-three-quarters; }
+       .palm-ten-twelfths   { @extend .palm-five-sixths; }
+    .palm-eleven-twelfths   { width:91.666%; }
+    
+}/* end palm */
+
+@include media-query(lap){
+    
+    .lap-one-whole          { width:100%; }
+
+    .lap-one-half           { width:50%; }
+
+    .lap-one-third          { width:33.333%; }
+    .lap-two-thirds         { width:66.666%; }
+
+      .lap-one-quarter      { width:25%; }
+      .lap-two-quarters     { @extend .lap-one-half; }
+    .lap-three-quarters     { width:75%; }
+
+      .lap-one-fifth        { width:20%; }
+      .lap-two-fifths       { width:40%; }
+    .lap-three-fifths       { width:60%; }
+     .lap-four-fifths       { width:80%; }
+
+      .lap-one-sixth        { width:16.666%; }
+      .lap-two-sixths       { @extend .lap-one-third; }
+    .lap-three-sixths       { @extend .lap-one-half; }
+     .lap-four-sixths       { @extend .lap-two-thirds; }
+     .lap-five-sixths       { width:83.333%; }
+
+      .lap-one-eighth       { width:12.5%; }
+      .lap-two-eighths      { @extend .lap-one-quarter; }
+    .lap-three-eighths      { width:37.5%; }
+     .lap-four-eighths      { @extend .lap-one-half; }
+     .lap-five-eighths      { width:62.5%; }
+      .lap-six-eighths      { @extend .lap-three-quarters; }
+    .lap-seven-eighths      { width:87.5%; }
+
+      .lap-one-tenth        { width:10%; }
+      .lap-two-tenths       { @extend .lap-one-fifth; }
+    .lap-three-tenths       { width:30%; }
+     .lap-four-tenths       { @extend .lap-two-fifths; }
+     .lap-five-tenths       { @extend .lap-one-half; }
+      .lap-six-tenths       { @extend .lap-three-fifths; }
+    .lap-seven-tenths       { width:70%; }
+    .lap-eight-tenths       { @extend .lap-four-fifths; }
+     .lap-nine-tenths       { width:90%; }
+
+       .lap-one-twelfth     { width:8.333%; }
+       .lap-two-twelfths    { @extend .lap-one-sixth; }
+     .lap-three-twelfths    { @extend .lap-one-quarter; }
+      .lap-four-twelfths    { @extend .lap-one-third; }
+      .lap-five-twelfths    { width:41.666% }
+       .lap-six-twelfths    { @extend .lap-one-half; }
+     .lap-seven-twelfths    { width:58.333%; }
+     .lap-eight-twelfths    { @extend .lap-two-thirds; }
+      .lap-nine-twelfths    { @extend .lap-three-quarters; }
+       .lap-ten-twelfths    { @extend .lap-five-sixths; }
+    .lap-eleven-twelfths    { width:91.666%; }
+    
+}/* end lap */
+
+@include media-query(portable){
+    
+    .portable-one-whole         { width:100%; }
+
+    .portable-one-half          { width:50%; }
+
+    .portable-one-third         { width:33.333%; }
+    .portable-two-thirds        { width:66.666%; }
+
+      .portable-one-quarter     { width:25%; }
+      .portable-two-quarters    { @extend .portable-one-half; }
+    .portable-three-quarters    { width:75%; }
+
+      .portable-one-fifth       { width:20%; }
+      .portable-two-fifths      { width:40%; }
+    .portable-three-fifths      { width:60%; }
+     .portable-four-fifths      { width:80%; }
+
+      .portable-one-sixth       { width:16.666%; }
+      .portable-two-sixths      { @extend .portable-one-third; }
+    .portable-three-sixths      { @extend .portable-one-half; }
+     .portable-four-sixths      { @extend .portable-two-thirds; }
+     .portable-five-sixths      { width:83.333%; }
+
+      .portable-one-eighth      { width:12.5%; }
+      .portable-two-eighths     { @extend .portable-one-quarter; }
+    .portable-three-eighths     { width:37.5%; }
+     .portable-four-eighths     { @extend .portable-one-half; }
+     .portable-five-eighths     { width:62.5%; }
+      .portable-six-eighths     { @extend .portable-three-quarters; }
+    .portable-seven-eighths     { width:87.5%; }
+
+      .portable-one-tenth       { width:10%; }
+      .portable-two-tenths      { @extend .portable-one-fifth; }
+    .portable-three-tenths      { width:30%; }
+     .portable-four-tenths      { @extend .portable-two-fifths; }
+     .portable-five-tenths      { @extend .portable-one-half; }
+      .portable-six-tenths      { @extend .portable-three-fifths; }
+    .portable-seven-tenths      { width:70%; }
+    .portable-eight-tenths      { @extend .portable-four-fifths; }
+     .portable-nine-tenths      { width:90%; }
+
+       .portable-one-twelfth    { width:8.333%; }
+       .portable-two-twelfths   { @extend .portable-one-sixth; }
+     .portable-three-twelfths   { @extend .portable-one-quarter; }
+      .portable-four-twelfths   { @extend .portable-one-third; }
+      .portable-five-twelfths   { width:41.666% }
+       .portable-six-twelfths   { @extend .portable-one-half; }
+     .portable-seven-twelfths   { width:58.333%; }
+     .portable-eight-twelfths   { @extend .portable-two-thirds; }
+      .portable-nine-twelfths   { @extend .portable-three-quarters; }
+       .portable-ten-twelfths   { @extend .portable-five-sixths; }
+    .portable-eleven-twelfths   { width:91.666%; }
+    
+}/* end portable */
+
+@include media-query(desk){
+    
+    .desk-one-whole         { width:100%; }
+
+    .desk-one-half          { width:50%; }
+
+    .desk-one-third         { width:33.333%; }
+    .desk-two-thirds        { width:66.666%; }
+
+      .desk-one-quarter     { width:25%; }
+      .desk-two-quarters    { @extend .desk-one-half; }
+    .desk-three-quarters    { width:75%; }
+
+      .desk-one-fifth       { width:20%; }
+      .desk-two-fifths      { width:40%; }
+    .desk-three-fifths      { width:60%; }
+     .desk-four-fifths      { width:80%; }
+
+      .desk-one-sixth       { width:16.666%; }
+      .desk-two-sixths      { @extend .desk-one-third; }
+    .desk-three-sixths      { @extend .desk-one-half; }
+     .desk-four-sixths      { @extend .desk-two-thirds; }
+     .desk-five-sixths      { width:83.333%; }
+
+      .desk-one-eighth      { width:12.5%; }
+      .desk-two-eighths     { @extend .desk-one-quarter; }
+    .desk-three-eighths     { width:37.5%; }
+     .desk-four-eighths     { @extend .desk-one-half; }
+     .desk-five-eighths     { width:62.5%; }
+      .desk-six-eighths     { @extend .desk-three-quarters; }
+    .desk-seven-eighths     { width:87.5%; }
+
+      .desk-one-tenth       { width:10%; }
+      .desk-two-tenths      { @extend .desk-one-fifth; }
+    .desk-three-tenths      { width:30%; }
+     .desk-four-tenths      { @extend .desk-two-fifths; }
+     .desk-five-tenths      { @extend .desk-one-half; }
+      .desk-six-tenths      { @extend .desk-three-fifths; }
+    .desk-seven-tenths      { width:70%; }
+    .desk-eight-tenths      { @extend .desk-four-fifths; }
+     .desk-nine-tenths      { width:90%; }
+
+       .desk-one-twelfth    { width:8.333%; }
+       .desk-two-twelfths   { @extend .desk-one-sixth; }
+     .desk-three-twelfths   { @extend .desk-one-quarter; }
+      .desk-four-twelfths   { @extend .desk-one-third; }
+      .desk-five-twelfths   { width:41.666% }
+       .desk-six-twelfths   { @extend .desk-one-half; }
+     .desk-seven-twelfths   { width:58.333%; }
+     .desk-eight-twelfths   { @extend .desk-two-thirds; }
+      .desk-nine-twelfths   { @extend .desk-three-quarters; }
+       .desk-ten-twelfths   { @extend .desk-five-sixths; }
+    .desk-eleven-twelfths   { width:91.666%; }
+    
+}/* end desk */
+
+} /* endif */

data/templates/project/sass/_vars.scss

@@ -35,6 +35,15 @@ $base-line-height:  24!default;
 $brand-round:        4!default;
 
 
+/**
+ * Responsiveness?
+ * Tell inuit.css when breakpoints start, in pixels.
+ */
+$responsive:        true;
+$lap-start:         481;
+$desk-start:        1024;
+
+
 /**
  * Font-sizes (in pixels). Refer to relevant sections for their implementations.
  */

data/templates/project/sass/your-project.scss

@@ -9,6 +9,8 @@
  * Here we set up some variables, include the inuit.css framework, then add our
  * project-specific components afterwards.
  */
+
+
 // Setup
 @import "vars";
 @import "compass-inuit";

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: compass-inuit
 version: !ruby/object:Gem::Version
-  version: 4.2.1
+  version: '4.3'
   prerelease: 
 platform: ruby
 authors: