shipd_style 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 1fcfe4745e1adb96b630b5135a75b3d32c9ba94b
+  data.tar.gz: cf6f72cdde22a71e86a18040c35c9b6cdecf2ef8
+SHA512:
+  metadata.gz: 154e4ed8c34022be1cee9e897be249c98906cbd98be1b85e2597f4436e726b36921219109682a42fcb799e5a9aae08461cd538a60a6fa5ef2172a8f722edd14d
+  data.tar.gz: 441a3f6b33cdd0f8637e9cb42f9826136ca3c6297c89d1d6d01e4ddd802c58256fb05f34d57bf3accb57c34c36dcbf2e615eef8b8f2c925f191993f4d1fe7097

data/.gitignore

@@ -0,0 +1,25 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp
+*.bundle
+*.so
+*.o
+*.a
+mkmf.log
+
+.sass-cache/
+lib/sass/*.css

data/.ruby-gemset

@@ -0,0 +1 @@
+shipd-style

data/.ruby-version

@@ -0,0 +1 @@
+2.1.2

data/Gemfile

@@ -0,0 +1,3 @@
+source "https://rubygems.org"
+
+gemspec

data/Gemfile.lock

@@ -0,0 +1,37 @@
+PATH
+  remote: .
+  specs:
+    shipd_style (0.1.0)
+      compass
+
+GEM
+  remote: https://rubygems.org/
+  specs:
+    chunky_png (1.3.3)
+    compass (1.0.3)
+      chunky_png (~> 1.2)
+      compass-core (~> 1.0.2)
+      compass-import-once (~> 1.0.5)
+      rb-fsevent (>= 0.9.3)
+      rb-inotify (>= 0.9)
+      sass (>= 3.3.13, < 3.5)
+    compass-core (1.0.3)
+      multi_json (~> 1.0)
+      sass (>= 3.3.0, < 3.5)
+    compass-import-once (1.0.5)
+      sass (>= 3.2, < 3.5)
+    ffi (1.9.6)
+    multi_json (1.10.1)
+    rake (10.1.0)
+    rb-fsevent (0.9.4)
+    rb-inotify (0.9.5)
+      ffi (>= 0.5.0)
+    sass (3.4.11)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  bundler (~> 1.6)
+  rake
+  shipd_style!

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2015 Kane Baccigalupi
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,140 @@
+# Shipd Style
+
+Shipd Style is a gem for building responsive web design. It can be used on its own, but it is also a component of the front end framework: [Prow](https://github.com/shipd/prow) which allows a full-extensible front-end build out without the need of a server.
+
+Ship has a series of HTML demonstration pages for checking out all the responsive CSS3 goodness that Shipd Style has to offer.
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    gem 'shipd_style'
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install 'shipd_style'
+
+## Usage
+
+### Compass with Copied files
+
+ShipdStyle is available as a compass plugin, but the goal of ShipdStyle is for
+the developer to have a good baseline on which to really own the responsive styles. Also, compass has a funky file locator that makes in really hard to get
+to all the great modular partials that make ShipdStyle the modular framework that it is.
+
+ShipdStyle therefore comes with some rake files to copy the base files into your
+project.
+
+    rake shipd_style:copy_styles
+
+Alternatively you can pass in a directory:
+
+    rake shipd_style:copy_styles[app/assets/stylesheets]
+
+Compass can then take on the heavy lifting of compiling these files without worrying about the plugin:
+
+    compass compile
+
+    # -- or --
+
+    compass watch
+
+Compass comes with a great many options and configurations. It is the source of truth when using it with these styles.
+
+### As a Compass project using ShipdStyle as a plugin:
+
+Make a directory:
+
+    mkdir my_styles
+
+Add a Gemfile with just the shipd_style gem:
+
+    source 'https://rubygems.org'
+
+    gem 'shipd_style'
+
+ShipdStyle includes the compass dependency, so no need to add that.
+Run the compass command to create a directory structure:
+
+    compass init
+
+Import the files into your projects scss file. The compass default gives you
+a screen.scss file to work with. Shipd uses mobile, tablet and desktop stylesheets. There are basic styles and then there are style sheets per widget. The the easy load stylesheets on the top level include everything.
+
+    @import "shipd-mobile"; // include all styles mobile
+    @import "shipd-tablet"; // includes progressive modifications for tablet
+    @import "shipd-desktop"; // includes progressive additions for desktop
+
+    // @import "shipd-all"; // one stylesheet that includes all three
+
+    // @import "mobile/grid"; // just pick and choose the ones you want!
+
+
+Compile stylesheets with the 'shipd_style' plugin required:
+
+    compass compile -r shipd_style
+
+Watch your library and have it automatically compile with this command:
+
+    compass watch -r shipd_style
+
+Compass is a vast framework with any number of great command line options for
+building exactly the stylesheets desired.
+
+### Use with Rails
+
+
+## Concepts
+
+Getting CSS right for a responsive design that really looks different on different devices can be quite tedious. Over the last three years, we have reinventing this wheel again and again. It is now smaller, rounder and easier to use than ever.
+
+### Life without Responsive Design
+Shipd Style is inspired by Stubornella's great framework [OOCSS](https://github.com/stubornella/oocss). We grabbed some of her core concepts about grids, single responsibility classes and divs, and we ran with it. It may be nothing like what she would recognize, but here are our guiding principles, which when mastered, make for great productivity:
+
+__Rows & Units__
+Layouts are broken into `.row`s. These rows contain any number of elements that float around, either left or right.
+
+__IMPORTANT:__ _Rows and units can't have padding or margin._ Instead there divs are single responsibility, having either this row/unit width characteristic ... or they have padding and margin.
+
+A typical structure looks like this:
+
+    <div class='row'>
+      <div class='inner border'>
+        <div class='unit size-1-2'>1/2 sized</div>
+        <div class='unit size-1-3'>1/3 sized</div>
+        <div class='unit-last'>the rest</div>
+      </div>
+    </div>
+
+The row has an `inner` that provides padding. That div that also has a border. Borders take up width. Instead of doing lots of crazy CSS math that goes wrong all the time, padding, margin, outline and border goes on another div ... single responsibility divs.
+
+### Getting Responsive
+This is all grand, but it happens often that we want a row in mobile view to be a 1/2 sized column in tablet, and 1/3 sized in desktop. Shipd Styles to the rescue. It turns out there are styles to do just that:
+
+    <div class='m-row t-unit d-unit t-size-1-2 d-size-1-3'>
+      <div class='m-row t-hidden d-hidden'>
+        I'm a mobile row
+      </div>
+      <div class='m-hidden t-row d-hidden'>
+        I'm a tablet half sized column
+      </div>
+      <div class='m-hidden t-hidden d-row'>
+        I'm a desktop 1/3 sized column
+      </div>
+    </div>
+
+In this example, there is different content per layout that is hidden via some convenient styles. Completely different content per layout should be reserved for changing the order of content, or totally different content.
+
+Full documentation of all the classes coming soon.
+
+## Contributing
+
+1. Fork it ( https://github.com/shipd/shipd-style/fork )
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create a new Pull Request

data/Rakefile

@@ -0,0 +1,2 @@
+require "bundler/gem_tasks"
+import  "lib/shipd_style/shipd_style.rake" # for testing

data/config.rb

@@ -0,0 +1,25 @@
+require 'compass/import-once/activate'
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "stylesheets"
+sass_dir = "sass"
+images_dir = "images"
+javascripts_dir = "javascripts"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

data/demo/carousel.html

@@ -0,0 +1,79 @@
+<!DOCTYPE HTML>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Shipd Style - Carousel</title>
+  <meta name="viewport" content="initial-scale=1">
+  <link href="/favicon.ico" rel="shortcut icon" type="image/ico">
+  <link rel="stylesheet" href="../stylesheets/mobile.css">
+  <link rel="stylesheet" href="../stylesheets/tablet.css" media="screen and (min-width: 768px)">
+  <link rel="stylesheet" href="../stylesheets/desktop.css" media="screen and (min-width: 1024px)">
+  <link href='http://fonts.googleapis.com/css?family=Port+Lligat+Slab' rel='stylesheet' type='text/css'>
+
+  <style>
+    .my-carousel {
+      height: 300px;
+    }
+  </style>
+
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+
+  <script>
+    var setupcarousel = function() {
+      var slideWidth = $('.current-slide').width();
+      $('.current-slide').css({left: 0});
+      $('.next-slide').css({left: slideWidth});
+    };
+
+    var movecarouselLeft = function() {
+      var slideWidth = $('.current-slide').width();
+      $('.current-slide').css({left: -slideWidth});
+      $('.next-slide').css({left: 0});
+      $('.move-carousel-left').css({visibility: 'hidden'});
+    };
+
+    $(document).ready(function() {
+      setupcarousel();
+      $('.move-carousel-left').on('click', movecarouselLeft);
+    });
+  </script>
+</head>
+<body>
+  <div id="page">
+    <div class='inner'>
+      <div class='row'>
+        <h1 class='centered-content'>
+          <div class='unit size-1-3 move-carousel-left pointer-cursor'>&laquo;</div>
+          <div class='unit size-1-3'>Carousel</div>
+          <div class='unit size-1-3 move-carousel-right pointer-cursor'>&nbsp;<!--&raquo;--></div>
+        </h1>
+      </div>
+
+      <div class='spacer'></div>
+
+      <div class='carousel-container my-carousel row'>
+        <div class='carousel-window'>
+          <div class='carousel-slide background-accent current-slide'>
+            <h1 class='inner centered-content'>1</h1>
+          </div>
+          <div class='carousel-slide background-accent-2 next-slide'>
+            <h1 class='inner centered-content'>2</h1>
+          </div>
+        </div>
+      </div>
+
+      <p>
+        Because the carousel uses absolute and relative positioning,
+        you must set an explicit height on the .carousel-container.
+        Best practices dictates adding a class specific to your instance
+        of the carousel usage: such as a class 'my-great-carousel'.
+        Then the height is applied to the custom class, not all carousel objects.
+      </p>
+
+      <p>
+        The carousel requires some JS to set it in motion.
+        The transitions and positioning are pure CSS, but the triggering of the change position happens via JS.
+      </p>
+    </div>
+  </div>
+</body>

data/demo/desktop-styles.html

@@ -0,0 +1,80 @@
+<!DOCTYPE HTML>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Shipd Style - Desktop Styles</title>
+  <meta name="viewport" content="initial-scale=1">
+  <link href="/favicon.ico" rel="shortcut icon" type="image/ico">
+  <link rel="stylesheet" href="../stylesheets/mobile.css">
+  <link rel="stylesheet" href="../stylesheets/tablet.css" media="screen and (min-width: 768px)">
+  <link rel="stylesheet" href="../stylesheets/desktop.css" media="screen and (min-width: 1024px)">
+  <link href='http://fonts.googleapis.com/css?family=Port+Lligat+Slab' rel='stylesheet' type='text/css'>
+</head>
+<body>
+  <div id="page">
+    <div id='header' class='row'>
+      <div class='inner overflown'>
+        <h1 class='unit'>Logo Land</h1>
+        <div class='unit spacer'></div>
+        <h4 class='unit-right'>menu?</h4>
+      </div>
+    </div>
+
+    <div class='inner'>
+      <h1>Hello Shippers - Welcome to Tablet View</h1>
+
+      <p>Life is pretty good as we are progressively enhancing the mobile view.</p>
+      <p>You have some extra styles.</p>
+      <ul class='bullet-list'>
+        <li>
+          t-size-X-X: Where 'X' is a number indicating size.
+          These are like the base case sizes: size-X-X.
+          The main differences is that these styles are provided for those cases
+          where you need a different layout of the same elements in mobile and tablet.
+        </li>
+      </ul>
+
+      <p>Also, the base sizes for text have been modified slightly for better usage on tablet</p>
+
+      <h1>h1: Hello World</h1>
+      <h2>h2: Hello World</h2>
+      <h3>h3: Hello World</h3>
+      <h4>h4: Hello World</h4>
+      <h5>h5: Hello World</h5>
+      <h6>h6: Hello World</h6>
+      <p>p: Hello World</p>
+      <div>div: Hello World</div>
+
+      <h1>Form Elements</h1>
+      <form>
+        <div class='inner border rounded'>
+          <div class='row'>
+            <div class='input-container'>
+              <input type="text" placeholder="hello"/>
+            </div>
+          </div>
+          <div class='row error'>
+            <h6 class='error-message'>Oh, holy error, batgirl!</h6>
+            <div class='input-container'>
+              <input type="text" placeholder="hello"/>
+            </div>
+          </div>
+          <div class='row'>
+            <div class='input-container'>
+              <textarea placeholder="hello"></textarea>
+            </div>
+            <h6 class='error-message'>Oh, holy error, batgirl!</h6>
+          </div>
+
+          <div class='row'>
+            <div class='unit size1of3'>
+              <div class='shadow-container'>
+                <a class='button'>Link Button</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+</body>

data/demo/dialog.html

@@ -0,0 +1,143 @@
+<!DOCTYPE HTML>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Shipd Style - Dialog with Overlay</title>
+  <meta name="viewport" content="initial-scale=1">
+  <link href="/favicon.ico" rel="shortcut icon" type="image/ico">
+  <link rel="stylesheet" href="../stylesheets/mobile.css">
+  <link rel="stylesheet" href="../stylesheets/tablet.css" media="screen and (min-width: 768px)">
+  <link rel="stylesheet" href="../stylesheets/desktop.css" media="screen and (min-width: 1024px)">
+  <link href='http://fonts.googleapis.com/css?family=Port+Lligat+Slab' rel='stylesheet' type='text/css'>
+
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+
+  <style>
+  @media (min-width: 768px) {
+    .column-inner {
+      padding-left: 5px;
+      padding-right: 5px;
+    }
+
+    .layout-inner {
+      padding: 15px 10px;
+    }
+  }
+  </style>
+
+  <script>
+    var resizeOverlay = function() {
+      var height = $(document).height();
+      $('#overlay').height(height);
+    };
+
+    var hideDialog = function() {
+      $('#overlay').addClass("transparent");
+
+      setTimeout(function() {
+        $('#overlay').addClass('hidden');
+        $('.dialog-container').remove();
+      }, 1000);
+
+      setTimeout(function() {
+        $('.dialog-container').addClass('transparent');
+      }, 250);
+    };
+
+    $(document).ready(function() {
+      // animate in all the components
+      $('#overlay').removeClass('hidden').removeClass('transparent');
+      setTimeout(function() {
+        $('.dialog-container').removeClass('transparent');
+      }, 250);
+
+      $(window).on('resize orientationchange', resizeOverlay);
+      $('.close-dialog').click(hideDialog);
+    });
+  </script>
+</head>
+<body>
+  <div id='overlay' class='hidden transparent'>
+    <div class='dialog-container transparent'>
+      <div class='inner dialog-inner'>
+        <div class='dialog inner border rounded'>
+          <div class="close-dialog close-x">&times;</div>
+          <h1 class='inner-bottom'>Hello Dialog!</h1>
+          <p>
+            Sadly, mobile does not consistently handle fixed position elements.
+            So, it is recommended that you supplement this CSS with JS that inspects the page
+            size after load and increases the overlay height.
+          </p>
+          <p>
+            You kind of need JS to close a dialog anyway, with CSS transitions too.
+          </p>
+          <div class='unit'>
+            <div class='shadow-container'>
+              <a class='button close-dialog'>Ok then!</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div id="page">
+    <div class='inner layout-inner'>
+      <div class='layout-inner inner'>
+        <h1 class="t-hidden d-hidden">Mobile View</h1>
+        <h1 class="m-hidden d-hidden">Tablet View</h1>
+        <h1 class="m-hidden t-hidden">Desktop View</h1>
+      </div>
+
+      <div class='m-row t-unit t-size-1-2 d-unit d-size-1-3'>
+        <div class='block column-inner'>
+          <div class='inner border rounded'>
+            <h4>Section 1</h4>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo nisi ullamcorper velit gravida consectetur. Mauris cursus posuere urna eu aliquam. Aenean metus nulla, ullamcorper vel faucibus a, vulputate ac dui. Phasellus tempor dignissim odio, vel lacinia turpis dapibus a. In hac habitasse platea dictumst. Donec purus erat, fermentum sit amet maximus eu, gravida vitae ex. Ut sed lectus vitae turpis vulputate tincidunt. Pellentesque non egestas lacus, non porttitor dui. Aliquam volutpat lacus eget orci tincidunt, sit amet accumsan neque facilisis.
+            </p><p>
+              Nam quis ante non velit egestas venenatis. Praesent eleifend ante quis metus venenatis, dictum pharetra justo pretium. Vestibulum vitae egestas sem, ut iaculis massa. Donec sit amet erat in mi commodo commodo. Sed non diam in leo feugiat congue. Mauris tempus non arcu vitae malesuada. Maecenas non diam ac urna imperdiet hendrerit porttitor et felis. Sed ipsum ipsum, placerat ac diam eget, malesuada faucibus enim. Vivamus viverra, urna sed feugiat bibendum, ante mi hendrerit lorem, sit amet maximus diam justo ut est. In sollicitudin quis purus vel fringilla.
+            </p><p>
+              Vivamus porta luctus massa eu bibendum. Sed sodales vulputate efficitur. Phasellus semper tempor nisi in convallis. Cras dapibus fringilla odio sed fringilla. Phasellus a fringilla urna. Nunc vulputate viverra imperdiet. Suspendisse molestie, neque non auctor viverra, odio arcu volutpat ligula, sed pellentesque felis ante nec velit. Sed semper eleifend elit, vel eleifend nunc gravida at. Morbi ornare a nulla a rhoncus. Quisque dignissim dolor eget lorem ullamcorper auctor.
+            </p><p>
+              In sit amet orci et lectus tempor vehicula eu et augue. Quisque id est eleifend, tempor justo et, molestie nibh. Phasellus mattis hendrerit ultricies. Donec nec eros sed est euismod consequat. Nulla facilisi. Nulla quis semper turpis. Morbi vitae pellentesque risus. Vestibulum sodales, ante at imperdiet pulvinar, ipsum justo laoreet ex, non viverra metus nunc quis nunc.
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class='spacer t-hidden d-hidden m-row'></div>
+      <div class='m-row t-unit t-size-1-2 d-unit d-size-1-3'>
+        <div class='block column-inner'>
+          <div class='inner border rounded'>
+            <h4>Section 2</h4>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo nisi ullamcorper velit gravida consectetur. Mauris cursus posuere urna eu aliquam. Aenean metus nulla, ullamcorper vel faucibus a, vulputate ac dui. Phasellus tempor dignissim odio, vel lacinia turpis dapibus a. In hac habitasse platea dictumst. Donec purus erat, fermentum sit amet maximus eu, gravida vitae ex. Ut sed lectus vitae turpis vulputate tincidunt. Pellentesque non egestas lacus, non porttitor dui. Aliquam volutpat lacus eget orci tincidunt, sit amet accumsan neque facilisis.
+            </p><p>
+              Nam quis ante non velit egestas venenatis. Praesent eleifend ante quis metus venenatis, dictum pharetra justo pretium. Vestibulum vitae egestas sem, ut iaculis massa. Donec sit amet erat in mi commodo commodo. Sed non diam in leo feugiat congue. Mauris tempus non arcu vitae malesuada. Maecenas non diam ac urna imperdiet hendrerit porttitor et felis. Sed ipsum ipsum, placerat ac diam eget, malesuada faucibus enim. Vivamus viverra, urna sed feugiat bibendum, ante mi hendrerit lorem, sit amet maximus diam justo ut est. In sollicitudin quis purus vel fringilla.
+            </p><p>
+              Vivamus porta luctus massa eu bibendum. Sed sodales vulputate efficitur. Phasellus semper tempor nisi in convallis. Cras dapibus fringilla odio sed fringilla. Phasellus a fringilla urna. Nunc vulputate viverra imperdiet. Suspendisse molestie, neque non auctor viverra, odio arcu volutpat ligula, sed pellentesque felis ante nec velit. Sed semper eleifend elit, vel eleifend nunc gravida at. Morbi ornare a nulla a rhoncus. Quisque dignissim dolor eget lorem ullamcorper auctor.
+            </p><p>
+              In sit amet orci et lectus tempor vehicula eu et augue. Quisque id est eleifend, tempor justo et, molestie nibh. Phasellus mattis hendrerit ultricies. Donec nec eros sed est euismod consequat. Nulla facilisi. Nulla quis semper turpis. Morbi vitae pellentesque risus. Vestibulum sodales, ante at imperdiet pulvinar, ipsum justo laoreet ex, non viverra metus nunc quis nunc.
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class='spacer d-hidden m-row t-row'></div>
+      <div class='m-row t-unit t-size-1-2 d-unit d-size-1-3'>
+        <div class='block column-inner'>
+          <div class='inner border rounded'>
+            <h4>Section 3</h4>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo nisi ullamcorper velit gravida consectetur. Mauris cursus posuere urna eu aliquam. Aenean metus nulla, ullamcorper vel faucibus a, vulputate ac dui. Phasellus tempor dignissim odio, vel lacinia turpis dapibus a. In hac habitasse platea dictumst. Donec purus erat, fermentum sit amet maximus eu, gravida vitae ex. Ut sed lectus vitae turpis vulputate tincidunt. Pellentesque non egestas lacus, non porttitor dui. Aliquam volutpat lacus eget orci tincidunt, sit amet accumsan neque facilisis.
+            </p><p>
+              Nam quis ante non velit egestas venenatis. Praesent eleifend ante quis metus venenatis, dictum pharetra justo pretium. Vestibulum vitae egestas sem, ut iaculis massa. Donec sit amet erat in mi commodo commodo. Sed non diam in leo feugiat congue. Mauris tempus non arcu vitae malesuada. Maecenas non diam ac urna imperdiet hendrerit porttitor et felis. Sed ipsum ipsum, placerat ac diam eget, malesuada faucibus enim. Vivamus viverra, urna sed feugiat bibendum, ante mi hendrerit lorem, sit amet maximus diam justo ut est. In sollicitudin quis purus vel fringilla.
+            </p><p>
+              Vivamus porta luctus massa eu bibendum. Sed sodales vulputate efficitur. Phasellus semper tempor nisi in convallis. Cras dapibus fringilla odio sed fringilla. Phasellus a fringilla urna. Nunc vulputate viverra imperdiet. Suspendisse molestie, neque non auctor viverra, odio arcu volutpat ligula, sed pellentesque felis ante nec velit. Sed semper eleifend elit, vel eleifend nunc gravida at. Morbi ornare a nulla a rhoncus. Quisque dignissim dolor eget lorem ullamcorper auctor.
+            </p><p>
+              In sit amet orci et lectus tempor vehicula eu et augue. Quisque id est eleifend, tempor justo et, molestie nibh. Phasellus mattis hendrerit ultricies. Donec nec eros sed est euismod consequat. Nulla facilisi. Nulla quis semper turpis. Morbi vitae pellentesque risus. Vestibulum sodales, ante at imperdiet pulvinar, ipsum justo laoreet ex, non viverra metus nunc quis nunc.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>

data/demo/index.html

@@ -0,0 +1,63 @@
+<!DOCTYPE HTML>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Shipd Style - Demonstration</title>
+  <meta name="viewport" content="initial-scale=1">
+  <link href="/favicon.ico" rel="shortcut icon" type="image/ico">
+  <link rel="stylesheet" href="../stylesheets/mobile.css">
+  <link rel="stylesheet" href="../stylesheets/tablet.css" media="screen and (min-width: 768px)">
+  <link rel="stylesheet" href="../stylesheets/desktop.css" media="screen and (min-width: 1024px)">
+  <link href='http://fonts.googleapis.com/css?family=Port+Lligat+Slab' rel='stylesheet' type='text/css'>
+</head>
+<body>
+  <div id="page">
+    <div class='inner'>
+      <div class='unit m-row t-size-3-5 d-size-2-3'>
+        <div class="block inner-right">
+          <h1>Do it Shipd Style!</h1>
+          <hr>
+          <p>
+            <em><a href="https://github.com/shipd/shipd-style" target='_blank'>Shipd Style</a></em>
+            is a responsive design CSS framework. It is culled from 3 years of repeatedly crafting
+            mobile first designs, that layered on tablet and desktop functionality. With several great organizations,
+            we reinvented this wheel. Each time it got more round and simple.
+          </p>
+
+          <p>
+            The framework foundation is based on Stubornella's awesome
+            <a href="https://github.com/stubbornella/oocss" target="_blank">OOCSS</a>, which
+            separates concerns of box width from those of box padding &amp; margin. This makes
+            dealing with the IE box model differences pretty trivial. Developers
+            need to get in the habit and discipline of always creating a nested div for padding,
+            border and margin. But once that habit is well understood, designing is easy.
+          </p>
+
+          <p>
+            On top of that box model and grid managment system, we added a responsive design framework.
+            There are a set of sizes defined for the base case (mobile), and then additional sizes for
+            tablet and desktop. Front-end developers can change the size of element per layout. In mobile,
+            a container can show up at the bottom of the page, and in other layouts it can be a side-menu.
+            This page is one of those examples. The basic work can be done with markup and styling classes
+            alone.
+          </p>
+        </div>
+      </div>
+      <div class='m-row unit-right t-size-2-5 d-size-1-3 right'>
+        <div class='spacer m-hidden t-unit d-unit'></div>
+        <hr class='t-hidden d-hidden'>
+        <div class='unit'>
+          <h3>Demonstration Pages</h3>
+          <ul>
+            <li><a href="mobile-styles.html">Mobile Type &amp; Widgets</a></li>
+            <li><a href="tablet-styles.html">Tablet Type &amp; Widgets</a></li>
+            <li><a href="desktop-styles.html">Desktop Type &amp; Widgets</a></li>
+            <li><a href="responsive-columns.html">Responsive Columns</a></li>
+            <li><a href="dialog.html">Dialog with Overlay</a></li>
+            <li><a href="carousel.html">Carousel</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>