stratum 0.3.6 → 0.4

data/assets/stylesheets/layout/_grid.scss

@@ -1,25 +1,29 @@
 // Grid defaults settings
 // ----------------------
 
-$grid-responsive:       false       !default;
-
 $grid-size:             980px       !default;
-
+$grid-min-width:        320px       !default;
 $grid-type:             fluid       !default;
 $grid-total-columns:    12          !default;
 $grid-desired-gutter:   20px        !default;
 $grid-baseline:         18px        !default;
 
-// Grid guides
+// Scaffolding
+$scaffolding-debug:         true      !default;  // Highlight disabled features that are used
+
+// Responsive defaults
+$grid-responsive-screen-small:    480px  !default;
+$grid-responsive-screen-medium:   980px  !default;
+$grid-responsive-screen-large:    1280px !default;
+$grid-responsive-screen-x-large:  1800px !default;
+
+// Grid guides settings
+$grid-guides:           true        !default;
 $grid-guides-class:     false       !default;   // Adds `.m-show-guides` and `.m-show-guides.m-front` to scaffolding
 $grid-guides-color:     #8aa8c0     !default;
 $grid-guides-opacity:   .2          !default;
 $grid-guides-position:  back        !default;
 
-// Scaffolding
-$scaffolding-debug:         true      !default;  // Highlight disabled features that are used
-
-
 // Various semantic grid features can be disabled per project by
 // setting the following variables to false. This will result in
 // smaller CSS file and quicker compilation
@@ -29,6 +33,9 @@ $scaffolding-debug:         true      !default;  // Highlight disabled features
 // $grid-overrides:    false;
 // $grid-subdivisions: false;
 
+// Responsiveness
+$grid-responsive:       true        !default;   // Should default grid columns have basic responsive properties (collapsing)
+
 @import "stratum";
 
 @import "grid/functions";

data/assets/stylesheets/layout/_responsive.scss

@@ -1,52 +1,3 @@
-$grid-responsive: true;
-
-@mixin smartphone {
-  @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
-    @content;
-  }
-}
-@mixin smartphone-landscape {
-  @media only screen and (min-width : 321px) {
-    @content;
-  }
-}
-@mixin smartphone-portrait {
-  @media only screen and (max-width : 320px) {
-    @content;
-  }
-}
-@mixin tablet {
-  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
-    @content;
-  }
-}
-@mixin tablet-landscape {
-  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation: landscape) {
-    @content;
-  }
-}
-@mixin tablet-portrait {
-  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation: portrait) {
-    @content;
-  }
-}
-@mixin retina {
-  @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
-    @content;
-  }
-}
-@mixin medium-screen {
-  @media only screen and (min-width : 1024px) {
-    @content;
-  }
-}
-@mixin large-screen {
-  @media only screen and (min-width : 1300px) {
-    @content;
-  }
-}
-@mixin x-large-screen {
-  @media only screen and (min-width : 1824px) {
-    @content;
-  }
-}
+@import "responsive/feature-detection";
+@import "responsive/overrides";
+@import "responsive/helper-classes";

data/assets/stylesheets/layout/grid/_mixins.scss

@@ -15,6 +15,7 @@ $grid-column:         grid-column-width();
   @extend %-clearfix;
   @include box-sizing(content-box);
   width: $width;
+  min-width: $grid-min-width;
   margin: {
     left: auto;
     right: auto;
@@ -57,8 +58,12 @@ $grid-column:         grid-column-width();
 
 
 // Calculate single column width (in pixels) multipled by number of columns it spans (indluding gutters)
-@mixin grid-column-width($span: 1, $type: $grid-type, $gutter: $grid-gutter, $total-columns: $grid-total-columns) {
-  width: grid-columns-width($span, $grid-column, $gutter, $type, $total-columns);
+@mixin grid-column-width($span: 1, $type: $grid-type, $gutter: $grid-gutter, $total-columns: $grid-total-columns, $max: null) {
+  $l-width: grid-columns-width($span, $grid-column, $gutter, $type, $total-columns);
+  @if $max and $l-width > $max {
+    $l-width: $max;
+  }
+  width: $l-width;
 }
 
 

data/assets/stylesheets/layout/responsive/_feature-detection.scss

@@ -0,0 +1,89 @@
+$responsive-features:
+  smartphone         "(min-device-width: 320px) and (max-device-width: 480px)",
+  tablet             "(min-device-width : 768px) and (max-device-width : 1024px)",
+  // Due to comma in the list should be the last item when combined with other in 'and' sequence
+  retina             "(-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5)",
+
+  landscape          "(orientation: landscape)",
+  portrait           "(orientation: portrait)",
+
+  x-large-screen     "(min-width: #{$grid-responsive-screen-x-large})",
+  large-screen       "(min-width: #{$grid-responsive-screen-large}) and (max-width: #{$grid-responsive-screen-x-large - 1})",
+  medium-screen      "(min-width: #{$grid-responsive-screen-medium}) and (max-width: #{$grid-responsive-screen-large - 1})",
+  small-screen       "(min-width: #{$grid-responsive-screen-small}) and (max-width: #{$grid-responsive-screen-medium - 1})",
+  x-small-screen     "(max-width: #{$grid-responsive-screen-small - 1})"
+;
+
+// Get the feature from available map and return its query
+
+@function -get-media-feature($requested-feature) {
+  $-result: null;
+
+  @each $feature in $responsive-features {
+    $-name: nth($feature, 1);
+    $-query: nth($feature, 2);
+
+    @if $-name == $requested-feature {
+      $-result: $-query;
+    }
+  }
+
+  @if not $-result {
+    @warn "❗ '#{$requested-feature}'' is not a recognised responsive feature"
+  }
+
+  @return $-result;
+}
+
+// Combine media features frome supplied parameters
+// comma separate for 'or' sequence. To group in 'and' sequence wrap in (braces)
+
+@function -combine-media-features($features...) {
+  $-features: "";
+  @each $or-feature in $features {
+    // 'either/or' features
+    @if type-of($or-feature) == string {
+      $-index: index($features, $or-feature);
+      $-is-last: $-index == length($features);
+      $-features: $-features + -get-media-feature($or-feature) + if(not $-is-last, ", ", "");
+
+    // combined 'and' features
+    } @else {
+      $and-features: $or-feature;
+      $-and-result: "";
+
+      @each $and-feature in $and-features {
+        $-index: index($and-features, $and-feature);
+        $-is-last: $-index == length($and-features);
+        $-and-result: $-and-result + -get-media-feature($and-feature) + if(not $-is-last, " and ", "");
+      }
+
+      $-features: $-features + $-and-result;
+    }
+  }
+
+  @return $-features;
+}
+
+
+// Respond to media features mixin
+// -------------------------------
+
+// Usage:
+
+// Comma-separate for either (or) and space-separate for each (and) feature
+
+// ```
+//  @include respond-to(large-screen, medium-screen, smartphone portrait retina) {
+//    background: red;
+//  }
+// ```
+
+// Results in styles targeting either large screens or medium screens or retina smarthphones in portrait orientation only
+
+@mixin respond-to($features...) {
+  // @debug -combine-media-features($features...);
+  @media only screen and #{-combine-media-features($features...)} {
+    @content;
+  }
+}

data/assets/stylesheets/layout/responsive/_overrides.scss

@@ -0,0 +1,74 @@
+// Overrides for default grid column definitions
+// ---------------------------------------------
+
+$grid-responsive: null !default;
+
+@if $grid-responsive != false {
+
+  // Small screen
+  @include respond-to(small-screen) {
+
+    @for $i from 1 through $grid-total-columns {
+
+      %l-col-#{$i} {
+        // Columns with gutters
+        %l-row & {
+          $i: if($i % 2 > 0, $i + 1, $i);
+          @include grid-column-width($i * 2, fluid, $max: 100%);
+
+          &:last-child:nth-child(odd) {
+            @include grid-column-width(1, fluid, $total-columns: 1);
+          }
+        }
+
+        // Columns without gutters
+        %l-container &,
+        %l-gutterless & {
+          @include grid-column-width($i * 2, fluid, $gutter: 0, $max: 100%);
+
+          &:last-child:nth-child(odd) {
+            @include grid-column-width(1, fluid, $gutter: 0, $total-columns: 1);
+          }
+        }
+
+      }
+
+    }
+
+  }
+
+
+  // Tiny screen
+  @include respond-to(x-small-screen) {
+
+    @for $i from 1 through $grid-total-columns {
+
+      %l-col-#{$i} {
+        // Columns with gutters
+        %l-row & {
+          @include grid-column-width(1, fluid, $total-columns: 1);
+        }
+
+        // Columns without gutters
+        %l-container &,
+        %l-gutterless & {
+          @include grid-column-width(1, fluid, $gutter: 0, $total-columns: 1);
+        }
+
+      }
+
+      // Subdivisions
+      @if $grid-subdivisions != false {
+        // Column size ratios
+        @for $n from 1 through $grid-total-columns {
+          %l-col-#{$i}-of-#{$n} {
+            @include grid-column-width(1, fluid, $gutter: 0, $total-columns: 1);
+          }
+        }
+      }
+
+    }
+
+  }
+
+}

data/assets/stylesheets/layout/responsive/helper-classes.scss

@@ -0,0 +1,25 @@
+// Responsive layout helper classes
+// --------------------------------
+
+// Each feature in `$responsive-feature` can be directly controlled
+// with a helper class in the format:
+// `.l-#{feature-name}-hide`
+// `.l-#{feature-name}-show`
+
+// Example:
+// ```
+// <div class="hero l-smartphone-hide">…</div>
+// ```
+
+@each $feature in $responsive-features {
+  $-feature-name: nth($feature, 1);
+
+  @include respond-to($-feature-name) {
+    .l-#{$-feature-name}-hide {
+      display: none !important;
+    }
+    .l-#{$-feature-name}-show {
+      display: inherit !important;
+    }
+  }
+}

data/lib/stratum/version.rb

@@ -1,3 +1,3 @@
 module Stratum
-  VERSION = "0.3.6"
+  VERSION = "0.4"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: stratum
 version: !ruby/object:Gem::Version
-  version: 0.3.6
+  version: '0.4'
   prerelease: 
 platform: ruby
 authors:
@@ -13,7 +13,7 @@ date: 2013-03-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: thor
-  requirement: &70316948833360 !ruby/object:Gem::Requirement
+  requirement: &70094945051220 !ruby/object:Gem::Requirement
     none: false
     requirements:
     - - ! '>='
@@ -21,7 +21,7 @@ dependencies:
         version: '0'
   type: :runtime
   prerelease: false
-  version_requirements: *70316948833360
+  version_requirements: *70094945051220
 description: Stratum is a collection of SASS mixins and utilities for your web development
   needs.
 email: tyom@semonov.com
@@ -67,6 +67,9 @@ files:
 - assets/stylesheets/layout/grid/semantics/_offsets.scss
 - assets/stylesheets/layout/grid/semantics/_overrides.scss
 - assets/stylesheets/layout/grid/semantics/_subdivisions.scss
+- assets/stylesheets/layout/responsive/_feature-detection.scss
+- assets/stylesheets/layout/responsive/_overrides.scss
+- assets/stylesheets/layout/responsive/helper-classes.scss
 - assets/stylesheets/layout/scaffolding.scss
 - bin/stratum
 - lib/stratum.rb