magic_stylez 0.0.0.13 → 0.0.0.19

data/test/dummy/app/views/templates/fixed-header.html.erb

@@ -0,0 +1,53 @@
+<div id="fixed_nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
+  <div class="corset">
+    
+  
+  
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#front-main-nav-colapse">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <%= link_to "Magic-Stylez", "#", class: "navbar-brand" %>
+    </div>
+    <div class="collapse navbar-collapse" id="front-main-nav-colapse">
+      <ul class="nav navbar-nav navbar-left">
+        <li><%= link_to "Jobs", "#" %></li>
+        <li><%= link_to "Jobs", "#" %></li>
+        <li><%= link_to "Jobs", "#", class: "btn btn-success" %></li>
+      </ul>
+      <ul class="nav navbar-nav navbar-right">
+        <li class="dropdown">
+            <%= link_to "#", class: "dropdown-toggle", data: {toggle: "dropdown"} do %>
+              Hallo <b class="caret"></b>
+            <% end %>
+            <ul class="dropdown-menu">
+                <li><%= link_to "Link 1", "#" %></li>
+                <li><%= link_to "Link 2", "#" %></li>
+                <li><%= link_to "Link 3", "#" %></li>
+            </ul>
+        </li>
+      </ul>
+    </div>
+    
+  </div>
+</div>
+
+<div class="main_content fixed-nav">
+  
+  
+  <div class="section brand">
+    <div class="corset">
+      <h1>usual twbs header</h1>
+      <br/>
+      <p>just niced up in header buttons</p>
+  		
+    </div>
+  </div>
+
+  <%= render "templates/lorem" %>
+
+  
+</div>

data/test/dummy/app/views/templates/responsive-slidebar.html.erb

@@ -0,0 +1,55 @@
+<div id="fixed_nav" class="navbar navbar-default navbar-fixed-top navbar-slidebar" role="navigation">
+  <div class="corset">
+    
+  
+  
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle slidebar-toggle" data-target="#front-main-nav-colapse">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <%= link_to "Magic-Stylez", "#", class: "navbar-brand" %>
+    </div>
+    <div class="collapse navbar-collapse" id="front-main-nav-colapse">
+      <ul class="nav navbar-nav navbar-left">
+        <li><%= link_to "Link", "#" %></li>
+        <li><%= link_to "Link", "#" %></li>
+        
+      </ul>
+      <ul class="nav navbar-nav navbar-right">
+        <li class="dropdown">
+            <%= link_to "#", class: "dropdown-toggle", data: {toggle: "dropdown"} do %>
+              Dropdown <b class="caret"></b>
+            <% end %>
+            <ul class="dropdown-menu">
+                <li><%= link_to "Link 1", "#" %></li>
+                <li><%= link_to "Link 2", "#" %></li>
+                <li><%= link_to "Link 3", "#" %></li>
+            </ul>
+        </li>
+        <li><%= link_to "Button", "#", class: "btn btn-success" %></li>
+      </ul>
+    </div>
+    
+  </div>
+</div>
+
+<div class="main_content fixed-nav">
+  
+  
+  <div class="section brand">
+    <div class="corset">
+      <h1>Responsive Slidebar</h1>
+      <br/>
+      <p class="loud">
+        Turns the usual twbs <em>navbar-collapse</em> into a nice slidebar. .. try it out:<br/>
+        make your screen smaller than 768px and press the header-toggle
+      </p>
+    </div>
+  </div>
+  
+  <%= render "templates/lorem" %>
+  
+</div>

data/test/dummy/config/application.rb

@@ -13,6 +13,7 @@ module Dummy
     
     
     config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
+    config.assets.precompile += %w(blank.js)
     
     # config.assets.enabled = true if config.assets.respond_to?(:enabled)
     

data/test/dummy/config/routes.rb

@@ -4,6 +4,13 @@ Rails.application.routes.draw do
   
   get 'stylez' => 'front#start'
   
+  FrontController::TEMPLATES.each do |tmpl|
+    get "#{tmpl}" => 'front#templates', template: tmpl
+  end
+  # get 'templates/:template' => 'front#templates'
+  # get 'templates' => 'front#templates'
+  
+  
   # The priority is based upon order of creation: first created -> highest priority.
   # See how all your routes lay out with "rake routes".
 

data/test/dummy/public/html/fixed-header.html.erb

@@ -0,0 +1,158 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Magic-Stylez</title>
+  <link href="//berlinmagic.github.io/magic_stylez/assets/application-84c041fc367dd97b158add8b5cc1bdb2.css" media="all" rel="stylesheet" />
+  <script src="//berlinmagic.github.io/magic_stylez/assets/blank-dabc2fee75a487407fe0cb5afbceec09.js"></script>
+  <meta content="authenticity_token" name="csrf-param" />
+<meta content="Nxx/s0v4a+wuP12HXihuBB+ZAnRSnC/Bj/d56jizjjE=" name="csrf-token" />
+  <link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
+  <script type="text/javascript" charset="utf-8">
+    App = {};
+    App.Environment = "production";
+  </script>
+</head>
+<body class="blank">
+    <div id="fixed_nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
+  <div class="corset">
+    
+  
+  
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#front-main-nav-colapse">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <a class="navbar-brand" href="#">Magic-Stylez</a>
+    </div>
+    <div class="collapse navbar-collapse" id="front-main-nav-colapse">
+      <ul class="nav navbar-nav navbar-left">
+        <li><a href="#">Jobs</a></li>
+        <li><a href="#">Jobs</a></li>
+        <li><a class="btn btn-success" href="#">Jobs</a></li>
+      </ul>
+      <ul class="nav navbar-nav navbar-right">
+        <li class="dropdown">
+            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+              Hallo <b class="caret"></b>
+</a>            <ul class="dropdown-menu">
+                <li><a href="#">Link 1</a></li>
+                <li><a href="#">Link 2</a></li>
+                <li><a href="#">Link 3</a></li>
+            </ul>
+        </li>
+      </ul>
+    </div>
+    
+  </div>
+</div>
+
+<div class="main_content fixed-nav">
+  
+  
+  <div class="section brand">
+    <div class="corset">
+      <h1>usual twbs header</h1>
+      <br/>
+      <p>just niced up in header buttons</p>
+  		
+    </div>
+  </div>
+
+  
+
+<div class="section">
+  <div class="corset">
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  </div>
+</div>
+
+<div class="section shine-top">
+  <div class="corset">
+    <div class="row">
+      <div class="col-sm-6">
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+      </div>
+      <div class="col-sm-6">
+        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="section shine-top">
+  <div class="corset tight">
+    <div class="box">
+      <div class="header">
+        <h3>Some Form</h3>
+      </div>
+      <div class="body">
+        <form action="#" method="get" accept-charset="utf-8" class="form">
+          <div class="row">
+            <div class="col-sm-5 press">
+              <label>Text-Field</label>
+            </div>
+            <div class="col-sm-7 press">
+              <input type="text" class="form-control">
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-sm-5 press">
+              <label>check_switch</label>
+            </div>
+            <div class="col-sm-7 press">
+              <div class="check_switch">
+                <div class="switch_toggle"></div>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-sm-5">
+              <label>check</label>
+            </div>
+            <div class="col-sm-7">
+              <div class="check">
+                <a href="#" class="checka"><i class="icon-ok"></i></a>
+              </div>
+            </div>
+          </div>
+          <hr/>
+          <div class="row">
+            <div class="col-sm-4">
+              <button class="btn btn-success btn-splited" type="submit">
+                <span>Continue</span>
+                <span class="icn">→</span>
+              </button>
+            </div>
+            <div class="col-sm-4">
+              <button class="btn btn-default btn-block" type="reset">
+                Reset
+              </button>
+            </div>
+            <div class="col-sm-4 press">
+              &nbsp;
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="section shine-top">
+  <div class="corset">
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  </div>
+</div>
+<div class="section shine-top">
+  <div class="corset">
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  </div>
+</div>
+
+  
+</div>
+</body>
+</html>

data/test/dummy/public/html/index.html

@@ -0,0 +1,173 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Magic-Stylez</title>
+  <link href="//berlinmagic.github.io/magic_stylez/assets/application-84c041fc367dd97b158add8b5cc1bdb2.css" media="all" rel="stylesheet" />
+  <script src="//berlinmagic.github.io/magic_stylez/assets/application-2c23fcdf7ebc44c545a6622fb6e3066e.js"></script>
+  <meta content="authenticity_token" name="csrf-param" />
+<meta content="Nxx/s0v4a+wuP12HXihuBB+ZAnRSnC/Bj/d56jizjjE=" name="csrf-token" />
+  <link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
+  <script type="text/javascript" charset="utf-8">
+    App = {};
+    App.Environment = "production";
+  </script>
+</head>
+<body>
+  <div id="aside">
+  <div class="aside-content">
+    <ul class="nav_list dark">
+      <li class="current active"><a class="app_lnk lst_lnk" data-target="" href="#">Magic-Stylez</a></li>
+          <li><a class="lst_lnk" href="#">Content</a>
+            <ul class="sub_nav">
+                <li><a class="app_lnk lst_lnk" data-target="content/_box" href="#"> Box</a></li>
+            </ul>
+          </li>
+          <li><a class="lst_lnk" href="#">Effects</a>
+            <ul class="sub_nav">
+                <li><a class="app_lnk lst_lnk" data-target="effects/reflections" href="#">Reflections</a></li>
+                <li><a class="app_lnk lst_lnk" data-target="effects/shadows" href="#">Shadows</a></li>
+            </ul>
+          </li>
+          <li><a class="lst_lnk" href="#">Elements</a>
+            <ul class="sub_nav">
+                <li><a class="app_lnk lst_lnk" data-target="elements/buttons" href="#">Buttons</a></li>
+                <li><a class="app_lnk lst_lnk" data-target="elements/circle_diagram" href="#">Circle Diagram</a></li>
+                <li><a class="app_lnk lst_lnk" data-target="elements/inputs" href="#">Inputs</a></li>
+            </ul>
+          </li>
+          <li><a class="lst_lnk" href="#">Helper</a>
+            <ul class="sub_nav">
+                <li><a class="app_lnk lst_lnk" data-target="helper/arrow_infos" href="#">Arrow Infos</a></li>
+                <li><a class="app_lnk lst_lnk" data-target="helper/crossed_text" href="#">Crossed Text</a></li>
+                <li><a class="app_lnk lst_lnk" data-target="helper/divider" href="#">Divider</a></li>
+                <li><a class="app_lnk lst_lnk" data-target="helper/three_previews" href="#">Three Previews</a></li>
+            </ul>
+          </li>
+          <li><a class="lst_lnk" href="#">Icons</a>
+            <ul class="sub_nav">
+                <li><a class="app_lnk lst_lnk" data-target="icons/glyphicons" href="#">Glyphicons</a></li>
+                <li><a class="app_lnk lst_lnk" data-target="icons/icomoon" href="#">Icomoon</a></li>
+                <li><a class="app_lnk lst_lnk" data-target="icons/magicons" href="#">Magicons</a></li>
+                <li><a class="app_lnk lst_lnk" data-target="icons/olicons" href="#">Olicons</a></li>
+            </ul>
+          </li>
+          <li><a class="lst_lnk" href="#">Layout</a>
+            <ul class="sub_nav">
+                <li><a class="app_lnk lst_lnk" data-target="layout/corset" href="#">Corset</a></li>
+                <li><a class="app_lnk lst_lnk" data-target="layout/fullpage_table" href="#">Fullpage Table</a></li>
+                <li><a class="app_lnk lst_lnk" data-target="layout/section" href="#">Section</a></li>
+                <li><a class="app_lnk lst_lnk" data-target="layout/slide_boxes" href="#">Slide Boxes</a></li>
+            </ul>
+          </li>
+          <li><a class="lst_lnk" href="#">Templates</a>
+            <ul class="sub_nav">
+                <li><a class="app_lnk lst_lnk" data-target="templates/fixed_header" href="#">Fixed Header</a></li>
+                <li><a class="app_lnk lst_lnk" data-target="templates/responsive_slidebar" href="#">Responsive Slidebar</a></li>
+            </ul>
+          </li>
+    </ul>
+    <br/>
+    
+    <a href="https://github.com/berlinmagic/magic_stylez/tree/master" target="_blank" class="btn btn-default btn-divided">
+      <span class="icn"><i class="icomoon-github3"></i></span>
+      <span>SourceCode</span>
+    </a>
+    <div class="clearfix"></div>
+    <br/>
+  </div>
+</div>
+  <div class="clearfix"></div>
+  <div id="app_content">
+    <div class="section head">
+  <div class="corset">
+    <div class="row">
+      <div class="col-sm-9">
+        <h1>magic-stylez</h1>
+      </div>
+      <div class="col-sm-3">
+        <a href="https://github.com/berlinmagic/magic_stylez/tree/master" target="_blank" class="btn btn-sm btn-default btn-divided pull-right">
+          <span class="icn"><i class="icomoon-github3"></i></span>
+          <span>SourceCode</span>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+<div class="section flatted">
+  <div class="corset">
+    <p class="loud"><em>Some style helpers used in a lot of our apps.</em></p>
+  </div>
+</div>
+
+<div class="section compact hard-top">
+  <div class="corset center_text">
+    <h2>Warning</h2>
+    <p class="loud">This Gem is still work in process, it is not used in a production app!</p>
+    <p class="loud">Its just the start to outsource my style framework (I mostly rebuild for every app).</p>
+    <p class="loud">It is mostly driven by my own habits, so I don't know if its usefull for others.</p>
+  </div>
+</div>
+
+<div class="section compact hard-top">
+  <div class="corset">
+    <h3>Dependencies</h3>
+    <ul class="list">
+      <li><a href="https://github.com/twbs/bootstrap-sass" target="_blank">bootstrap-sass</a></li>
+      <li><a href="http://bourbon.io/" target="_blank">bourbon</a></li>
+    </ul>
+  </div>
+</div>
+
+<div class="section compact">
+  <div class="corset">
+    <h3>Thanks</h3>
+    <p class="loud">
+      A lot of code for this gem is taken from <a href="https://github.com/twbs/bootstrap-sass" target="_blank">bootstrap-sass</a>, 
+      so thank you guys for the great work.</br>
+      Same goes for <a href="http://bourbon.io/" target="_blank">bourbon</a> thanks for a lightweight helper set.
+    </p>
+    <p class="loud">Also thanks to all the people, how share their knowlegde on <a href="http://stackoverflow.com/" target="_blank">stackoverflow</a>.</p>
+  </div>
+</div>
+
+<div class="section compact">
+  <div class="corset">
+    <h3>Authors</h3>
+    <ul class="list">
+      <li><a href="http://twetzel.github.io/" target="_blank">Torsten Wetzel</a></li>
+      <li>many others ...</li>
+    </ul>
+  </div>
+</div>
+
+<div class="section compact">
+  <div class="corset">
+    <h3>License</h3>
+    <p class="loud">MIT-License</p>
+  </div>
+</div>
+
+
+
+
+
+
+<div class="section shine-top flat-bottom">
+  <div class="corset">
+    <p class="center_text">&copy; 2014 Torsten Wetzel (berlinmagic UG)</p>
+  </div>
+</div>
+
+
+    
+
+
+
+
+  </div>
+  <div class="clearfix"></div>
+</body>
+</html>