v3.0.0

Gemfile

@@ -1,15 +1,16 @@
 source 'https://rubygems.org'
 
 gem 'rails', '4.2.4'
-gem 'pg'
+gem 'sqlite3'
 gem 'sass-rails', '~> 5.0'
 gem 'uglifier', '>= 1.3.0'
 gem 'jquery-rails'
 gem 'jbuilder', '~> 2.0'
 gem 'sdoc', '~> 0.4.0', group: :doc
 gem 'evil_icons'
 
-gem 'inuit-rails', git: 'https://github.com/alfredoliverwillder/inuit-rails', branch: 'working-with-bower-updates'
+gem 'inuit-rails', git: 'git@github.com:wegotcoders/inuit-rails.git', branch: 'v3.0.0'
+# gem 'inuit-rails', path: '../inuit-rails'
 
 group :development, :test do
   gem 'pry'

Gemfile.lock

@@ -1,9 +1,9 @@
 GIT
-  remote: https://github.com/alfredoliverwillder/inuit-rails
-  revision: 12ace27b342ee248860da562fb899db653d1aaac
-  branch: working-with-bower-updates
+  remote: git@github.com:wegotcoders/inuit-rails.git
+  revision: a4d00083eb86debf656ecb97070bf77f5f008588
+  branch: v3.0.0
   specs:
-    inuit-rails (0.1.0)
+    inuit-rails (0.2.0)
 
 GEM
   remote: https://rubygems.org/
@@ -74,7 +74,6 @@ GEM
     multi_json (1.11.2)
     nokogiri (1.6.6.2)
       mini_portile (~> 0.6.0)
-    pg (0.18.3)
     pry (0.10.2)
       coderay (~> 1.1.0)
       method_source (~> 0.8.1)
@@ -125,6 +124,7 @@ GEM
       actionpack (>= 3.0)
       activesupport (>= 3.0)
       sprockets (>= 2.8, < 4.0)
+    sqlite3 (1.3.9)
     thor (0.19.1)
     thread_safe (0.3.5)
     tilt (2.0.1)
@@ -147,10 +147,13 @@ DEPENDENCIES
   inuit-rails!
   jbuilder (~> 2.0)
   jquery-rails
-  pg
   pry
   rails (= 4.2.4)
   sass-rails (~> 5.0)
   sdoc (~> 0.4.0)
+  sqlite3
   uglifier (>= 1.3.0)
   web-console (~> 2.0)
+
+BUNDLED WITH
+   1.11.2

app/assets/javascripts/responsive_dropdown.js

@@ -33,19 +33,19 @@ $(document).ready(function() {
 
   $('.palm-layout-eg-1__icon--show').click(function(e) {
     $('.palm-layout-eg-1__dropdown').toggleClass('palm-layout-eg-1__dropdown--open');
-    $('.palm-layout-eg-1__dropdown').toggleClass('mb-');
+    $('.palm-layout-eg-1__dropdown').toggleClass('wgc__margin-bottom--one-half-bsu');
     e.preventDefault();
   });
 
   $('.palm-layout-eg-2__icon--show').click(function(e) {
     $('.palm-layout-eg-2__dropdown').toggleClass('palm-layout-eg-2__dropdown--open');
-    $('.palm-layout-eg-2__dropdown').toggleClass('mb-');
+    $('.palm-layout-eg-2__dropdown').toggleClass('wgc__margin-bottom--one-half-bsu');
     e.preventDefault();
   });
 
   $('.palm-layout-eg-3__icon--show').click(function(e) {
     $('.palm-layout-eg-3__dropdown').toggleClass('palm-layout-eg-3__dropdown--open');
-    $('.palm-layout-eg-3__dropdown').toggleClass('mb-');
+    $('.palm-layout-eg-3__dropdown').toggleClass('wgc__margin-bottom--one-half-bsu');
     e.preventDefault();
   });
 });

app/assets/stylesheets/_inuit_rails_demo.scss

@@ -8,10 +8,10 @@ $black:                       #000;
 $inuit-responsive-settings:   true;
 $carousel-image-height:       125px;
 
-@import 'inuit-responsive-settings/settings.responsive';
-@import 'inuit-defaults/settings.defaults';
-@import 'inuit-responsive-tools/tools.responsive';
-@import 'inuit-functions/tools.functions';
+@import 'inuit/inuit-responsive-settings/settings.responsive';
+@import 'inuit/inuit-defaults/settings.defaults';
+@import 'inuit/inuit-responsive-tools/tools.responsive';
+@import 'inuit/inuit-functions/tools.functions';
 
 body {
   font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -101,8 +101,8 @@ body {
 }
 
 @include media-query('palm') {
-  // removing whitespace under icon in closed dropdown sections that contain layout__items
-  .palm-l-block {
+  // removing whitespace under icon in closed dropdown sections that contain wgc__layout__items
+  .wgc__palm-display--block {
     display: block !important;
   }
 

app/assets/stylesheets/main.scss

@@ -1,67 +1,62 @@
 /* Set variables */
-$enable-wgc-wrapper:                                true;
+$inuit-enable-btn--small:                      true;
+$inuit-enable-btn--large:                      true;
+$inuit-enable-btn--full:                       true;
+$inuit-enable-btn--pill:                       true;
 
-$inuit-enable-layout--small:                        true;
-$inuit-enable-layout--medium:                       true;
-$inuit-enable-layout--center:                       true;
-$inuit-enable-layout--right:                        true;
-$inuit-enable-layout--flush:                        true;
-$inuit-enable-layout--large:                        true;
-$inuit-enable-margins--none:                        true;
-$inuit-enable-margins--tiny:                        true;
-$inuit-enable-margins--small:                       true;
-$inuit-enable-margins:                              true;
-$inuit-enable-responsive-margins--none:             true;
-$inuit-enable-responsive-margins--tiny:             true;
-$inuit-enable-responsive-margins--small:            true;
-$inuit-enable-responsive-margins:                   true;
-$inuit-enable-responsive-margins--negative-small:   true;
+$wgc-global-border-box:                        true;
 
-$inuit-enable-responsive-paddings--none:            true;
-$inuit-enable-responsive-paddings--tiny:            true;
-$inuit-enable-responsive-paddings--small:           true;
-$inuit-enable-responsive-paddings:                  true;
-$inuit-enable-paddings--none:                       true;
-$inuit-enable-paddings--tiny:                       true;
-$inuit-enable-paddings--small:                      true;
-$inuit-enable-paddings:                             true;
+$wgc-enable-layout--flush:                     true;
+$wgc-enable-layout--gutter-one-quarter-bsu:    true;
+$wgc-enable-layout--gutter-one-half-bsu:       true;
+$wgc-enable-layout--gutter-one-bsu:            true;
+$wgc-enable-layout--gutter-two-bsu:            true;
+$wgc-enable-layout--gutter-four-bsu:           true;
+$wgc-enable-layout--center:                    true;
 
-$inuit-enable-btn--small:                           true;
-$inuit-enable-btn--large:                           true;
-$inuit-enable-btn--full:                            true;
-$inuit-enable-btn--pill:                            true;
+$wgc-enable-paddings--one-quarter-bsu:         true;
+$wgc-enable-paddings--one-half-bsu:            true;
+$wgc-enable-paddings--one-bsu:                 true;
+$wgc-enable-paddings--two-bsu:                 true;
+$wgc-enable-paddings--four-bsu:                true;
+$wgc-enable-paddings--none:                    true;
+
+$wgc-enable-margins--one-quarter-bsu:          true;
+$wgc-enable-margins--one-half-bsu:             true;
+$wgc-enable-margins--one-bsu:                  true;
+$wgc-enable-margins--two-bsu:                  true;
+$wgc-enable-margins--four-bsu:                 true;
+$wgc-enable-margins--none:                     true;
+$wgc-enable-negative-margins--one-quarter-bsu: true;
+$wgc-enable-negative-margins--one-half-bsu:    true;
+$wgc-enable-negative-margins--one-bsu:         true;
+$wgc-enable-negative-margins--two-bsu:         true;
+$wgc-enable-negative-margins--four-bsu:        true;
 
 /* Import desired files */
 @import
-  'inuit-defaults/settings.defaults',
-  'inuit-responsive-settings/settings.responsive',
-  'inuit-responsive-tools/tools.responsive',
-  'inuit-tools-widths/tools.widths',
-  'inuit-mixins/tools.mixins',
-  'inuit-functions/tools.functions',
-  'inuit-normalize/generic.normalize',
-  'inuit-box-sizing/generic.box-sizing',
-  'inuit-list-inline/objects.list-inline',
-  'inuit-buttons/objects.buttons',
-  'inuit-layout/objects.layout',
-  'inuit-widths-responsive/trumps.widths-responsive',
-  'inuit-spacing/trumps.spacing',
-  'inuit-spacing-responsive/trumps.spacing-responsive',
-  'inuit-clearfix/trumps.clearfix',
+  'inuit/inuit-defaults/settings.defaults',
+  'inuit/inuit-mixins/tools.mixins',
+  'inuit/inuit-functions/tools.functions',
+  'inuit/inuit-normalize/generic.normalize',
+  'inuit/inuit-box-sizing/generic.box-sizing',
+  'inuit/inuit-list-inline/objects.list-inline',
+  'inuit/inuit-buttons/objects.buttons',
+  'inuit/inuit-clearfix/trumps.clearfix',
+
+  'wgc/wgc_config',
+
+  'wgc/css_wizardy/generic.shared',
+  'wgc/css_wizardy/base.forms',
+  'wgc/css_wizardy/objects.flyout',
+
+  'wgc/modified_inuit_css/breakpoints',
+  'wgc/modified_inuit_css/layout_groups',
+  'wgc/modified_inuit_css/columns',
+  'wgc/modified_inuit_css/box_model',
 
-  'wgc/inuit-overrides/settings.defaults',
-  'wgc/inuit-overrides/settings.responsive',
-  'wgc/inuit-overrides/tools.functions',
-  'wgc/inuit-overrides/tools.mixins',
-  'wgc/inuit-overrides/generic.shared',
-  'wgc/inuit-overrides/base.forms',
-  'wgc/inuit-overrides/objects.layout',
-  'wgc/inuit-overrides/objects.flyout',
-  'wgc/inuit-overrides/trumps.spacing',
-  'wgc/inuit-overrides/trumps.spacing-responsive',
-  'wgc/inuit-overrides/trumps.widths-responsive',
-  'wgc/borders',
-  'wgc/colours',
-  'wgc/layout',
-  'wgc/typography'
+  'wgc/wgc_add_ons/layout_helpers',
+  'wgc/wgc_add_ons/borders',
+  'wgc/wgc_add_ons/colors',
+  'wgc/wgc_add_ons/typography'
 ;

app/views/demos/_article.html.erb

@@ -1,25 +1,33 @@
 <title>Inuit-rails live demo introduction and analysis</title>
 
-<div class="main-article__icon--show t-center">
+<div class="main-article__icon--show wgc__text-align--center">
   <svg width="182" height="40" xmlns="http://www.w3.org/2000/svg">
     <text xml:space="preserve" font-family="courier new" font-size="44" y="35" x="0" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#000000" fill="#222" id="article-icon">ARTICLE</text>
   </svg>
 </div>
 
-<div class="main-article__dropdown layout__item layout__item--center block-within-dropdown">
-<p class="main-paragraph">
-  Let's get to it! The most important thing to get right with the inuitcss framework is the layout, and it's quite simple. Put the 'layout' class on your parent element, and then bestow the corresponding 'layout__item' class on all direct descendants. There are minor variations on this, for example if you enable the We Got Coders wrapper you can prefix 'layout' with  'lap-and-up-' or 'palm-' to correspond to inuitcss' baked-in media queries, and there are BEM modifiers such as '--tiny' or '--huge' which control the size of the guttering. That's the first half of controlling layout with inuitcss, the second half is setting the width of your DOM elements. Again, you can prefix the class names with the inuitcss device aliases for responsive behaviour, but here if you enable the We Got Coders wrapper you will have the choice to use class names such as 'seven-twentieths' or 'one-half' (though the original 1/4, 15/17 or one-of-four, fifteen-of-seventeen syntaxes remain available if you prefer). And that's it! The rest is just fine-tuning. There are responsive spacing classes that follow the same conventions regarding device aliases such as 'pl0', 'palm-mb--', or 'desk-pt++' which are available as soon as you activate them in the usual way.
-</p>
+<div class="main-article__dropdown wgc__layout__item wgc__layout__item--center block-within-dropdown">
+  <p class="main-paragraph">
+    Lorem ipsum dolor sit amet, ius id fabulas invenire consectetuer, vidit dicat apeirian vim ne. Et assum aliquid sadipscing duo, te melius aliquando mea, legimus posidonium appellantur sit ad. No nam ceteros persecuti efficiendi, has ut ferri feugait corpora. Sit ea assum exerci suavitate. Te commune vituperatoribus has, sea vocibus propriae argumentum ea.
 
-<p class="main-paragraph">
-  Note 1. In the three examples of layout given below examples 1 and 3 are standard implementations of inuitcss using 'layout' and 'layout--flush' respectively, whereas example 2 uses the 'layout__item--center' class that also inherits from any of the 'layout' variants but instead of guttering with a padding-right they gutter with half of the same on each side to achieve a true centring of the content.
-</p>
+    Facilisi consetetur ad vix, eum velit graecis vivendum at. Ex purto magna delicata eos, partiendo maluisset nec eu. Probo consectetuer te vim, ne partiendo deseruisse reprehendunt sea, eum no eros numquam dissentiunt. Graece deserunt ei vel, an est alia volumus reprimique. Per at affert labitur platonem, nam no vitae dissentias complectitur, sit et primis eripuit vivendum.
 
-<p class="main-paragraph">
-  Note 2. Because all layout__items have 'border-box' set for their box-sizing, paddings will push inward on content and therefore should generally be favoured over margins for adjusting horizontal spacing because this will not damage the column structure.
-</p>
+    Ei duo quem labores, ullum percipitur qui ea. Tale impetus persius vim ea. An cum probatus deterruisset. Eos cu commodo sapientem persequeris. Cu vim veniam graeci feugait, ei putant voluptatum sed. Sed graeco explicari et.
 
-<p class="main-paragraph">
-  The remainder of this demo page has two purposes. First, to demonstrate good layout practices in context - take a look at this page on different devices! And second, to give some vanilla examples of the various other components that the inuitcss framework offers. For exhaustive detail on any part of the framework presented here, please take a look at our <a href="#" class="main-link">docs</a>.
-</p>
+    Mea ad putent electram intellegebat. Tollit conceptam ad pro. Eos porro eligendi pertinax ei, his unum vitae altera et. Odio officiis deserunt eam an. Vix vero graeci eu, mel diam simul facilisi id.
+
+    Ad vitae congue suscipiantur cum, id malis eloquentiam mea. Sed omnis interesset ea, nec doming accumsan consectetuer no. In has falli scripta denique, cum tota iudicabit ea. Rebum perpetua no per, ea quot adhuc veniam mel, his ex impetus expetendis.
+  </p>
+
+  <p class="main-paragraph">
+    Lorem ipsum dolor sit amet, ius id fabulas invenire consectetuer, vidit dicat apeirian vim ne. Et assum aliquid sadipscing duo, te melius aliquando mea, legimus posidonium appellantur sit ad. No nam ceteros persecuti efficiendi, has ut ferri feugait corpora. Sit ea assum exerci suavitate. Te commune vituperatoribus has, sea vocibus propriae argumentum ea.
+
+    Facilisi consetetur ad vix, eum velit graecis vivendum at. Ex purto magna delicata eos, partiendo maluisset nec eu. Probo consectetuer te vim, ne partiendo deseruisse reprehendunt sea, eum no eros numquam dissentiunt. Graece deserunt ei vel, an est alia volumus reprimique. Per at affert labitur platonem, nam no vitae dissentias complectitur, sit et primis eripuit vivendum.
+
+    Ei duo quem labores, ullum percipitur qui ea. Tale impetus persius vim ea. An cum probatus deterruisset. Eos cu commodo sapientem persequeris. Cu vim veniam graeci feugait, ei putant voluptatum sed. Sed graeco explicari et.
+
+    Mea ad putent electram intellegebat. Tollit conceptam ad pro. Eos porro eligendi pertinax ei, his unum vitae altera et. Odio officiis deserunt eam an. Vix vero graeci eu, mel diam simul facilisi id.
+
+    Ad vitae congue suscipiantur cum, id malis eloquentiam mea. Sed omnis interesset ea, nec doming accumsan consectetuer no. In has falli scripta denique, cum tota iudicabit ea. Rebum perpetua no per, ea quot adhuc veniam mel, his ex impetus expetendis.
+  </p>
 </div>

app/views/demos/_buttons.html.erb

@@ -1,16 +1,16 @@
-<div class="buttons-wrapper palm-buttons__border palm-layout mb-">
+<div class="buttons-wrapper palm-buttons__border wgc__palm-layout wgc__margin-bottom--one-half-bsu">
 
-  <div class="lap-and-up-buttons__icon--hide palm-buttons__icon--show t-center">
+  <div class="lap-and-up-buttons__icon--hide palm-buttons__icon--show wgc__text-align--center">
     <svg width="182" height="40" xmlns="http://www.w3.org/2000/svg">
       <text xml:space="preserve" font-family="courier new" font-size="44" y="35" x="0" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#000000" fill="#222" id="article-icon">BUTTONS</text>
     </svg>
   </div>
 
-  <div class="palm-buttons__dropdown palm-l-block palm-layout__item palm-layout__item--center">
-    <button class="c-skeleton-text l-block btn--pill mv-">btn--pill</button>
-    <button class="c-skeleton-text l-block btn mb-">btn</button>
-    <button class="c-skeleton-text l-block btn--small mb-">btn--small</button>
-    <button class="c-skeleton-text l-block btn--large mb-">btn--large</button>
-    <button class="c-skeleton-text l-block btn--full mb-">btn--full</button>
+  <div class="palm-buttons__dropdown wgc__palm-display--block wgc__palm-layout__item wgc__palm-layout__item--center">
+    <button class="wgc__display--block btn--pill wgc__margins-vertical--one-half-bsu">btn--pill</button>
+    <button class="wgc__display--block btn wgc__margin-bottom--one-half-bsu">btn</button>
+    <button class="wgc__display--block btn--small wgc__margin-bottom--one-half-bsu">btn--small</button>
+    <button class="wgc__display--block btn--large wgc__margin-bottom--one-half-bsu">btn--large</button>
+    <button class="wgc__display--block btn--full wgc__margin-bottom--one-half-bsu">btn--full</button>
   </div>
 </div>

app/views/demos/_carousel.html.erb

@@ -1,10 +1,10 @@
-<div class="lap-and-up-carousel__icon--hide palm-carousel__icon--show t-center">
+<div class="lap-and-up-carousel__icon--hide palm-carousel__icon--show wgc__text-align--center">
   <svg width="210" height="40" xmlns="http://www.w3.org/2000/svg">
     <text xml:space="preserve" font-family="courier new" font-size="44" y="35" x="0" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#000000" fill="#000000" id="carousel-icon">CAROUSEL</text>
   </svg>
 </div>
 
-<div class="carousel palm-carousel__dropdown palm-layout__item palm-layout__item--center palm-l-block">
+<div class="carousel palm-carousel__dropdown wgc__palm-layout__item wgc__palm-layout__item--center wgc__palm-display--block">
   <div class="carousel__viewport">
     <div class="carousel__slider-container">
       <div class="carousel__slider">
@@ -13,6 +13,6 @@
     </div>
   </div>
 
-  <ul class="carousel__dot-selector-container list-inline t-center mb-"></ul>
+  <ul class="carousel__dot-selector-container list-inline wgc__text-align--center wgc__margin-bottom--one-half-bsu"></ul>
 </div>
 

app/views/demos/_flyout.html.erb

@@ -1,15 +1,15 @@
-<div class="flyout-wrapper palm-flyout__border palm-layout mb-">
+<div class="flyout-wrapper palm-flyout__border palm-layout wgc__margin-bottom--one-half-bsu">
 
-  <div class="lap-and-up-flyout__icon--hide palm-flyout__icon--show t-center">
+  <div class="lap-and-up-flyout__icon--hide palm-flyout__icon--show wgc__text-align--center">
     <svg width="156" height="40" xmlns="http://www.w3.org/2000/svg">
       <text xml:space="preserve" font-family="courier new" font-size="44" y="35" x="0" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#000000" fill="#222" id="article-icon">FLYOUT</text>
     </svg>
   </div>
 
-  <div class="flyout palm-flyout__dropdown lap-and-up-p- bg-light-grey btr-radius btl-radius palm-l-block c-skeleton-text">
+  <div class="flyout palm-flyout__dropdown wgc__lap-and-up-paddings-all--one-half-bsu wgc__background-color--gray wgc__border-radius--top-right wgc__border-radius--top-left wgc__palm-display--block">
     The truth is in the flyout__content&hellip;
-    <div class="flyout__content bg-light-grey p- one-whole bbr-radius bbl-radius">
-      <h3 class="mv0 c-skeleton-text">Inuit-Rails is awesome!</h3>
+    <div class="flyout__content wgc__background-color--gray wgc__paddings-all--one-half-bsu wgc__column-width--one-whole wgc__border-radius--bottom-right wgc__border-radius--bottom-left">
+      <h3 class="wgc__margins-vertical--none">inuit-rails is awesome!</h3>
     </div>
   </div>
 </div>