bamboo 0.2.0 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: b0075ca7e247a179978c043788ea3e35f16cdcc1
-  data.tar.gz: d81e3e6d4131b25fb155ac08e462bf61a2f5ba58
+  metadata.gz: e877f0f54c95715aa58e27061d0ae4bfb1d783b9
+  data.tar.gz: 56104e9b8cba9b1002bc1f82b14f7d60e3cfb061
 SHA512:
-  metadata.gz: 617880583897ea70ce8363bbce7779060907d330fd53c4f760c8c4bb21ec5701cb5f724c2ca696eb3c0874f72218374e0e954dce38d42ab65f129d16196d59e5
-  data.tar.gz: 0f39ffe8dbfbbaf80a3498c3e062c3f67b93ba87353c92dade3586268bda1dda1e6097395ad10ac2ad6120dcedaf087d42a4ad3583599149acceb01a5732de50
+  metadata.gz: d1e0c335fea7124a4fb1ceab52b5864caf9c21a9cb0e8f7b63febaf39e7c40b0fa86fd1a050280b7659d40af0bebd86d0498694bfa58e5ef3ddba49b2a53ff10
+  data.tar.gz: 16b0270d7d0520b08e98c0db5323a4d2133562512e0c66910a1ebd7747bdd63655a0fecec31f854e7896d9dd8c7cfb2b69d8044264c36153f11956b8e88344bf

data/lib/bamboo/constants.rb

@@ -1,6 +1,6 @@
 module Bamboo
   # GRID
-  TOTAL_WIDTH           = 100
+  TOTAL_WIDTH           = 100   # 100% width
   
   # MODULAR SCALES
   MINOR_SECOND          = 1.067

data/lib/bamboo/grid.rb

@@ -1,11 +1,40 @@
 module Bamboo
-  class Grid    
+  class Grid
+    def self.scaffold_css(max_width = "100%")
+      css = %{
+        *,
+        *::before,
+        *::after {
+          box-sizing: border-box;
+        }
+        
+        .container {
+          max-width: #{max_width}
+        }
+        
+        .row::after {
+          content: "."; 
+          visibility: hidden; 
+          display: block; 
+          height: 0; 
+          clear: both;
+        }
+        
+        [class^=col-] {
+          display: inline-block;
+          float: left;
+        }
+      }
+      
+      css.gsub(/[\s]/,"")
+    end
+    
     def self.uniform(columns = 12)
       column_widths = []
       single_width  = Bamboo::TOTAL_WIDTH / Float(columns)
       columns.times { |index| column_widths.push single_width * (index + 1) }
       
-      { column_widths: column_widths, css: css(column_widths) }
+      { column_widths: column_widths, css: column_css(column_widths) }
     end
     
     def self.modular(columns = 2, scale = Bamboo::GOLDEN_RATIO)
@@ -14,7 +43,7 @@ module Bamboo
       available_width = Bamboo::TOTAL_WIDTH
       
       columns.times do |index|
-        if index == columns - 1
+        if index == columns - 1 # last column should use all remaining width
           column_widths.push available_width
         else
           width = available_width / scale
@@ -24,13 +53,17 @@ module Bamboo
         end
       end
       
-      { column_widths: column_widths, css: css(column_widths) }
+      { column_widths: column_widths, css: column_css(column_widths) }
     end
     
-    def self.css(columns)
-      css = columns.map.with_index { |width, index| ".col-#{index + 1}{width:#{width}%}" }
-      css.join
+    def self.column_css(columns)
+      template = %{
+        <% columns.map.with_index do |width, index| %>
+          .col-<%= index + 1 %> { width: <%= width %>% }
+        <% end %>
+      }
+      ERB.new(template).result(binding).gsub(/[\s]/,"")
     end
-    private_class_method :css
+    private_class_method :column_css
   end
 end

data/lib/bamboo/version.rb

@@ -1,3 +1,3 @@
 module Bamboo
-  VERSION = "0.2.0"
+  VERSION = "0.2.1"
 end

data/server/Gemfile

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

data/server/Gemfile.lock

@@ -0,0 +1,20 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    rack (1.6.4)
+    rack-protection (1.5.3)
+      rack
+    sinatra (1.4.7)
+      rack (~> 1.5)
+      rack-protection (~> 1.4)
+      tilt (>= 1.3, < 3)
+    tilt (2.0.2)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  sinatra
+
+BUNDLED WITH
+   1.11.2

data/server/assets/reset.css

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

data/server/assets/style.css

@@ -0,0 +1,43 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Menlo, monospace;
+}
+
+.container {
+  max-width: 960px;
+  margin: 0 auto;
+  background-color: #F7DFFF;
+}
+
+.row {
+  background-color: #FFF7DF;
+  margin-bottom: 1rem;
+}
+
+.row::after {
+  content: "."; 
+  visibility: hidden; 
+  display: block; 
+  height: 0; 
+  clear: both;
+}
+
+[class^=col-] {
+  background-color: #DFFFF7;
+  display: inline-block;
+  float: left;
+  text-align: center;
+  line-height: 3rem;
+  height: 3rem;
+  box-shadow: inset 0 0 0 10px #B3FFEC;
+  border-right: 1px solid #00FFBF;
+}
+
+[class^=col-]:last-child {
+  border-right: none;
+}

data/server/server.rb

@@ -0,0 +1,17 @@
+require "sinatra"
+require "../lib/bamboo"
+
+set :public_folder, File.dirname(__FILE__) + "/assets/"
+
+get "/uniform" do
+  grid = Bamboo::Grid.uniform 12
+  css = Bamboo::Grid.scaffold_css
+  erb :uniform, layout: :application, locals: { grid: grid, css: css }
+end
+
+get "/modular" do
+  columns = params[:columns].to_i || 2
+  grid = Bamboo::Grid.modular columns
+  css  = Bamboo::Grid.scaffold_css
+  erb :modular, layout: :application, locals: { grid: grid, css: css }
+end

data/server/views/application.erb

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=Edge">
+<meta name=viewport content="width=device-width, initial-scale=1.0">
+<title>Bamboo</title>
+<link rel="stylesheet" href="reset.css">
+<link rel="stylesheet" href="style.css">
+<style>
+  <%= css %>
+  <%= grid[:css] %>
+</style>
+
+<%= yield %>

data/server/views/modular.erb

@@ -0,0 +1,7 @@
+<div class="container">
+  <div class="row">
+      <% grid[:column_widths].each_with_index do |w,i| %>
+        <div class="col-<%= i+1 %>">.col-<%= i+1 %></div>
+      <% end %>
+  </div>
+</div>

data/server/views/uniform.erb

@@ -0,0 +1,47 @@
+<div class="container">
+  <div class="row">
+    <% 12.times do %>
+      <div class="col-1">.col-1</div>
+    <% end %>
+  </div>
+  
+  <div class="row">
+    <% 6.times do %>
+      <div class="col-2">.col-2</div>
+    <% end %>
+  </div>
+  
+  <div class="row">
+    <% 4.times do %>
+      <div class="col-3">.col-3</div>
+    <% end %>
+  </div>
+  
+  <div class="row">
+    <% 3.times do %>
+      <div class="col-4">.col-4</div>
+    <% end %>
+  </div>
+  
+  <div class="row">
+    <div class="col-5">.col-5</div>
+    <div class="col-2">.col-2</div>
+    <div class="col-5">.col-5</div>
+  </div>
+  
+  <div class="row">
+    <div class="col-6">.col-6</div>
+    <div class="col-6">.col-6</div>
+  </div>
+  
+  <div class="row">
+    <div class="col-7">.col-7</div>
+    <div class="col-5">.col-5</div>
+  </div>
+  
+  <div class="row">
+    <div class="col-2">.col-2</div>
+    <div class="col-8">.col-8</div>
+    <div class="col-2">.col-2</div>
+  </div>
+</div>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bamboo
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.2.1
 platform: ruby
 authors:
 - Ashish Kumar
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2016-02-16 00:00:00.000000000 Z
+date: 2016-02-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -73,6 +73,15 @@ files:
 - lib/bamboo/constants.rb
 - lib/bamboo/grid.rb
 - lib/bamboo/version.rb
+- server/Gemfile
+- server/Gemfile.lock
+- server/assets/reset.css
+- server/assets/scripts.js
+- server/assets/style.css
+- server/server.rb
+- server/views/application.erb
+- server/views/modular.erb
+- server/views/uniform.erb
 homepage: https://github.com/ashishkumar/bamboo
 licenses:
 - MIT