edge_framework 0.9.0 → 0.9.9

data/assets/test.html

@@ -25,7 +25,7 @@
 <!-- <header class="top-bar">
   </header> -->
 
-  <!-- <div class="row" data-page="typography">
+<!--   <div class="row" data-page="vertical-rhythm">
     <div class="large-12 columns">
       <article class="blog-post baseline">
         <div class="row">
@@ -133,9 +133,169 @@
         </div>
       </article>
     </div>
-  </div>  -->
+  </div> 
+ -->
+<!--   <section class="row" data-page="animate">
+    <div class="large-12 column">
+      <div class="box1" data-animate="fadein 500"></div>
+    </div>
+  </section> -->
+
+<!--   <div class="row" data-page="typography">
+    <div class="large-12 columns">
+      <article>
+        <div class="row">
+          <div class="large-6 columns">
+            <h1>Unordered List</h1>
+            <ul>
+              <li>Lorem ipsum dolor sit</li>
+              <li>
+                Consectetur <a>adipisicing</a> elit
+                <ul>
+                  <li>Necessitatibus, ex assumenda veniam ullam</li>
+                  <li>Ametharum labore deserunt quidem</li>
+                </ul>
+              </li>
+              <li>Consequatur ipsum a aut iusto tempore</li>
+              <li>Impedit sint nulla nobis suscipit rem aspernatur</li>
+            </ul>
+          </div>
+          <div class="large-6 columns">
+            <h1>Ordered List</h1>
+            <ol>
+              <li>Lorem ipsum dolor sit.</li>
+              <li> Eligendi, eos, voluptates, ducimus fugit
+                <ol>
+                  <li>Tempora minus iusto veniam veritatis ea</li>
+                  <li>Perspiciatis sequi et incidunt</li>
+                  <li>Lorem ipsum dolor sit amet, consectetur adipisicing.</li>
+                </ol>
+              </li>
+              <li>Consequuntur assumenda nesciunt</li>
+              <li>Consectetur adipisicing elit</li>
+              <li>Fugit nemo hic officia asperiores fugiat</li>
+              <li>Minima voluptatum eos sit a recusandae eligendi</li>
+            </ol>
+          </div>
+        </div>
+        <div class="row">
+          <div class="large-6 small-9 columns">
+            <h1>Lorem ipsum dolor sit amet.</h1>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, eaque illum tempora mollitia magni omnis debitis quidem culpa dolores praesentium at veniam nobis! Iusto, excepturi, accusamus autem iure ab magnam!
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, quos hic praesentium sint impedit voluptate aliquid minus consequuntur assumenda quaerat voluptas vel corrupti ullam accusantium quo optio necessitatibus inventore molestias.
+            </p>
+            <blockquote>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, earum, deleniti repellat quam aspernatur delectus perspiciatis vel necessitatibus sunt veritatis.
+              <cite>written by Henner</cite>
+            </blockquote>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, quidem repellendus at soluta vitae fuga ratione ad ullam? Placeat accusamus quam facere eveniet laboriosam praesentium accusantium. Fuga eum soluta molestiae?
+            </p>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, maxime, soluta, perspiciatis ratione suscipit voluptate numquam dicta facere reiciendis saepe laboriosam molestias facilis officiis impedit sunt quo enim quaerat cum.
+            </p>
+          </div>
+          <div class="large-3 small-3 columns">
+            <div class="sidebar">
+              <h2>SIDEBAR</h2>
+              <p>
+                <em>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, autem.</em>
+              </p>
+              <h3>MENU</h3>
+              <p>Select your dishes</p>
+              <ul>
+                <li>Dolorum, rerum, minima</li>
+                <li>Laboriosam in atque</li>
+                <li>Quo, provident</li>
+                <li>Consectetur adipisicing</li>
+                <li>Architecto excepturi</li>
+              </ul>
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, pariatur sunt ea adipisci eius dolorum aspernatur asperiores alias laudantium optio.
+              </p>
+            </div>
+            
+          </div>
+        </div>
+      </article>
+    </div>
+  </div> -->
+
+  <div class="row" data-page="vr-comparison">
+    <div class="large-6 column">
+      <article class="baseline-comparison">
+        <h1>Lorem ipsum dolor sit amet.</h1>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, eaque illum tempora mollitia magni omnis debitis quidem culpa dolores praesentium at veniam nobis! Iusto, excepturi, accusamus autem iure ab magnam!
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, illum?
+        </p>
+        <ul class="bullet-list">
+          <li>Lorem ipsum dolor sit</li>
+          <li>
+            Consectetur adipisicing elit
+            <ul class="bullet-list">
+              <li>Necessitatibus, ex assumenda veniam ullam</li>
+              <li>Ametharum labore deserunt quidem</li>
+            </ul>
+          </li>
+          <li>Consequatur ipsum a aut iusto tempore</li>
+          <li>Impedit sint nulla nobis suscipit rem aspernatur</li>
+        </ul>
+        <h2>Explicabo consectetur vero</h2>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, sed deserunt veritatis temporibus voluptates voluptatibus deleniti quia laudantium in accusantium.
+        </p>
+        <blockquote>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, earum, deleniti repellat quam aspernatur delectus perspiciatis vel necessitatibus sunt veritatis.
+          <cite>written by Henner</cite>
+        </blockquote>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, maxime, soluta, perspiciatis ratione suscipit voluptate numquam dicta facere reiciendis saepe laboriosam molestias facilis officiis impedit sunt quo enim quaerat cum.
+        </p>
+      </article>
+    </div>
+    <div class="large-6 column">
+      <article class="baseline-comparison has-vr">
+        <h1>Lorem ipsum dolor sit amet.</h1>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, eaque illum tempora mollitia magni omnis debitis quidem culpa dolores praesentium at veniam nobis! Iusto, excepturi, accusamus autem iure ab magnam!
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, illum?
+        </p>
+        <ul class="bullet-list">
+          <li>Lorem ipsum dolor sit</li>
+          <li>
+            Consectetur adipisicing elit
+            <ul class="bullet-list">
+              <li>Necessitatibus, ex assumenda veniam ullam</li>
+              <li>Ametharum labore deserunt quidem</li>
+            </ul>
+          </li>
+          <li>Consequatur ipsum a aut iusto tempore</li>
+          <li>Impedit sint nulla nobis suscipit rem aspernatur</li>
+        </ul>
+        <h2>Explicabo consectetur vero</h2>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, sed deserunt veritatis temporibus voluptates voluptatibus deleniti quia laudantium in accusantium.
+        </p>
+        <blockquote>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, earum, deleniti repellat quam aspernatur delectus perspiciatis vel necessitatibus sunt veritatis.
+          <cite>written by Henner</cite>
+        </blockquote>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, maxime, soluta, perspiciatis ratione suscipit voluptate numquam dicta facere reiciendis saepe laboriosam molestias facilis officiis impedit sunt quo enim quaerat cum.
+        </p>
+      </article>
+    </div>
+  </div>
 
-<div class="row" data-page="code">
+<!-- <div class="row" data-page="code">
   <div class="large-12 columns">
     <h1>EDGE Code</h1>
     <h3>Markup</h3>
@@ -182,7 +342,7 @@
       end
     </code></pre>
   </div>
-</div>
+</div> -->
 
 <!-- <div class="row" data-page="tile">
   <div class="large-12 columns">
@@ -258,7 +418,7 @@
   </div>
 </div> -->
 
-<div class="row" data-page="grid">
+<!-- <div class="row" data-page="grid">
   <div class="large-12 columns">
     <div class="demo-grid">
       <h1>Grid</h1>
@@ -389,9 +549,131 @@
         
     </div>
   </div>
-</div>
+</div> -->
+
+
+<!-- <section class="row" data-page="visibility">
+  <div class="large-12 column">
+    <h2>Using the Class</h2>
+    <div class="visibility-class">
+      <p class="hide-for-large">This is hidden on large</p>
+      <p class="hide-for-small">This is hidden on small and mini</p>
+      <p class="hide-for-mini">This is hidden on mini</p>
+      <p class="show-for-large">This is shown for large</p>
+      <p class="show-for-small">This is shown for small and mini</p>
+      <p class="show-for-mini">This is shown for mini</p>
+    </div>
+
+    <h2>Span Visibility</h2>
+    <div class="visibility-span">
+      <p>This is <span class="hide-for-large">hidden on large</span></p>
+      <p>This is <span class="hide-for-small">hidden on small and mini</span></p>
+      <p>This is <span class="hide-for-mini">hidden on mini</span></p>
+      <p>This is <span class="show-for-large">shown for large</span></p>
+      <p>This is <span class="show-for-small">shown for small and mini</span></p>
+      <p>This is <span class="show-for-mini">shown for mini</span></p>
+    </div>
+
+    <h2>Using the Mixin</h2>
+    <div class="visibility-mixin">
+      <p class="hfl">This is hidden on large</p>
+      <p class="hfs">This is hidden on small and mini</p>
+      <p class="hfm">This is hidden on mini</p>
+      <p class="sfl">This is shown for large</p>
+      <p class="sfs">This is shown for small and mini</p>
+      <p class="sfm">This is shown for mini</p>
+    </div>
+
+    <h2>Table Visibility</h2>
+    <div class="visibility-table">
+      <table border="1" class="hide-for-large">
+        <tr>
+          <td>hide-for</td>
+          <td>large</td>
+        </tr>
+      </table>
+      <table border="1" class="hide-for-small">
+        <tr>
+          <td>hide-for</td>
+          <td>small</td>
+        </tr>
+      </table>
+      <table border="1" class="hide-for-mini">
+        <tr>
+          <td>hide-for</td>
+          <td>mini</td>
+        </tr>
+      </table>
+      <table border="1" class="show-for-large">
+        <tr>
+          <td>show-for</td>
+          <td>large</td>
+        </tr>
+      </table>
+      <table border="1" class="show-for-small">
+        <tr>
+          <td>show-for</td>
+          <td>small</td>
+        </tr>
+      </table>
+      <table border="1" class="show-for-mini">
+        <tr>
+          <td>show-for</td>
+          <td>mini</td>
+        </tr>
+      </table>
+    </div>
 
-<div class="row collapse demo-grid" data-page="grid">
+    <h2>Td Visibility</h2>
+    <div class="visibility-td">
+      <table border="1">
+        <tr>
+          <td class="hide-for-large">This is</td>
+          <td>hide-for</td>
+          <td>large</td>
+        </tr>
+      </table>
+      <table border="1">
+        <tr>
+          <td class="hide-for-small">This is</td>
+          <td>hide-for</td>
+          <td>small</td>
+        </tr>
+      </table>
+      <table border="1">
+        <tr>
+          <td class="hide-for-mini">This is</td>
+          <td>hide-for</td>
+          <td>mini</td>
+        </tr>
+      </table>
+      <table border="1">
+        <tr>
+          <td class="show-for-large">This is</td>
+          <td>show-for</td>
+          <td>large</td>
+        </tr>
+      </table>
+      <table border="1" >
+        <tr>
+          <td class="show-for-small">This is</td>
+          <td>show-for</td>
+          <td>small</td>
+        </tr>
+      </table>
+      <table border="1" >
+        <tr>
+          <td class="show-for-mini">This is</td>
+          <td>show-for</td>
+          <td>mini</td>
+        </tr>
+      </table>
+    </div>
+    
+  </div>
+</section> -->
+
+<!-- <div class="row collapse demo-grid" data-page="grid">
   <h1>Collapse not nested</h1>
   <div class="large-8 column">
     <p>8</p>
@@ -399,8 +681,9 @@
   <div class="large-4 column">
     <p>4</p>
   </div>
-</div>
+</div> -->
 
+<!-- 
 <div class="row demo-grid" data-page="grid">
   <h1>Not nested</h1>
   <div class="large-8 column">
@@ -409,7 +692,7 @@
   <div class="large-4 column">
     <p>4</p>
   </div>
-</div>
+</div> -->
 
 <!-- <section class="row" data-page="custom-grid">
   <div class="large-12 column">
@@ -532,9 +815,31 @@
   </div>
 </section> -->
 
-
+<!-- <section class="row" data-page="button">
+  <div class="large-4 column">
+    <h1>Button</h1>
+    <a href="" class="button">Hello World</a>
+    <br>
+    <a href="" class="button red-button">Hello World</a>
+    <br>
+    <a href="" class="button yellow-button">Hello World</a>
+    <br>
+    <a href="" class="button blue-button">Hello World</a>
+    <br>
+    <a href="" class="button green-button">Hello World</a>
+    <br>
+  </div>
+  <div class="large-4 column">
+    <a href="" class="button white-button">Hello World</a>
+    <br>
+    <a href="" class="button grey-button">Hello World</a>
+    <br>
+    <a href="" class="button darkgrey-button">Hello World</a>
+    <br>
+    <a href="" class="button black-button">Hello World</a>
+  </div>
+</section> -->
     
-
 <!-- <div class="row" data-page="form">
   <div class="large-6 columns">
     <h1>Form Grid</h1>
@@ -630,5 +935,12 @@
 <script type="text/javascript" src="js/vendor/jquery.min.js"></script>
 <script type="text/javascript" src="js/edge.js"></script>
 <script type="text/javascript" src="js/edge/edge.prism.js"></script>
+<script type="text/javascript" src="js/edge/edge.animate.js"></script>
+
+
+  <script>
+    //$(".box1").addClass("animated");
+  </script>
+
 </body>
 </html>

data/edge.gemspec

@@ -2,25 +2,24 @@
 require File.expand_path('../lib/edge/version', __FILE__)
 
 Gem::Specification.new do |s|
-	s.name          = "edge_framework"
-	s.version       = Edge::VERSION
-	s.authors       = ["Henner Setyono"]
-	s.email         = ["henner@setyono.net"]
-	s.description   = %q{Responsive SASS Framework}
-	s.summary       = %q{Responsive SASS Framework that utilize Compass to its full extend}
-	s.homepage      = "http://edge.setyono.net"
-	s.license       = "MIT"
+  s.name          = "edge_framework"
+  s.version       = Edge::VERSION
+  s.authors       = ["Henner Setyono"]
+  s.email         = ["henner@setyono.net"]
+  s.description   = %q{Minimalist SASS Framework}
+  s.summary       = %q{Minimalist SASS Framework that utilize Compass to its full extend}
+  s.homepage      = "http://edge.setyono.net"
+  s.license       = "MIT"
 
-	s.files         = `git ls-files`.split($/)
-	s.executables   = "edge"
-	s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
-	s.require_paths = ["lib"]
+  s.files         = `git ls-files`.split($/)
+  s.executables   = "edge"
+  s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
+  s.require_paths = ["lib"]
 
-	s.add_dependency "sass", [">= 3.2.0"]
-	s.add_dependency "compass", [">= 0.12.0"]
-	s.add_dependency "win32console" # Color output for Windows
+  s.add_dependency "sass", [">= 3.2.0"]
+  s.add_dependency "compass", [">= 0.12.0"]
 
-	s.add_development_dependency "bundler", "~> 1.3"
-	s.add_development_dependency "rake"
-	s.add_development_dependency "rspec"
+  s.add_development_dependency "bundler", "~> 1.3"
+  s.add_development_dependency "rake"
+  s.add_development_dependency "rspec"
 end

data/lib/edge/engine.rb

@@ -0,0 +1,19 @@
+module Edge
+  class Engine < Rails::Engine
+    # Save this block, we'll use it in two calls to .initializer
+    add_paths_block = lambda { |app|
+      app.config.assets.paths << File.expand_path("../../../assets/sass", __FILE__)
+      app.config.assets.paths << File.expand_path("../../../assets/js", __FILE__)
+
+      # Ensure Zepto and Modernizr are precompiled in production
+      app.config.assets.precompile += %w(vendor/custom.modernizr.js)
+    }
+
+    # Standard initializer
+    initializer("edge.update_asset_paths", &add_paths_block)
+
+    # Special initializer lets us precompile assets without fully initializing
+    initializer("edge.update_asset_paths", :group => :assets, &add_paths_block)
+
+  end
+end

data/lib/edge/message.rb

@@ -1,38 +1,41 @@
 module Edge
-	require "edge/console"
-	require "edge/version"
-	@console = Edge::Console.new
+  class Message
+    require "edge/version"
 
-  AVAILABLE_TEMPLATE =
-<<-EOF.lines.each {|line| line.strip!}
-  Currently these are the available templates:
-    html - Static HTML template
-    php - Standard PHP template
-EOF
+    available_template =
+%Q{Currently these are the available templates:
+  html - Static HTML template
+  php - Standard PHP template}
 
-	SYNTAX_CREATE =
-<<-EOF.lines.each {|line| line.strip!}
-  #{ @console.cyan('edge create <project_type> <project_name>') }
-  #{ @console.yellow('project_type') }
-    #{ AVAILABLE_TEMPLATE }
-  #{ @console.magenta('project_name') }
-    (Optional) If not specified, current directory will be used
-EOF
+    syntax_create = 
+%Q{edge create <project_type> [project_name]
+project_type
+  #{ available_template }
+[project_name]
+  directory name, if not specified will use current directory}
 
-	HELP = 
-<<-EOF.lines.each {|line| line.strip!}
---------------------------------------------------------
+    help = 
+%Q{--------------------------------------------------------
 Welcome to Edge Framework v-#{ Edge::VERSION } (#{ Edge::CODENAME })
 --------------------------------------------------------
-CREATE TEMPLATE
-#{ SYNTAX_CREATE }
-EOF
-
-	CREATE_WRONG_SYNTAX = 
-<<-EOF.lines.each {|line| line.strip!}
+Creating Template
+  #{ syntax_create } }
 
-WRONG SYNTAX
+    create_wrong_syntax =
+%Q{Wrong Syntax
 The correct syntax is:
-#{ SYNTAX_CREATE }
-EOF
+#{ syntax_create } }
+
+    MESSAGES = {
+      :available_template => available_template,
+      :syntax_create => syntax_create,
+      :help => help,
+      :create_wrong_syntax => create_wrong_syntax
+    }
+
+    def get_message(key)
+      return MESSAGES[key.to_sym];
+    end
+      
+  end
 end

data/lib/edge/sprockets.rb

@@ -0,0 +1,4 @@
+require 'sprockets'
+
+Sprockets.append_path File.expand_path("../../../assets/sass", __FILE__)
+Sprockets.append_path File.expand_path("../../../assets/js", __FILE__)

data/lib/edge/version.rb

@@ -1,4 +1,4 @@
 module Edge
-  VERSION = "0.9.0"
-  CODENAME = "Banehallow"
+  VERSION = "0.9.9"
+  CODENAME = "Crixalis"
 end