magic_stylez 0.0.0.13 → 0.0.0.19

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 993f733c4b4d669b4ab87acfafbd39353adfbde2
-  data.tar.gz: c678f17a256639f1bad44c85f8c9416f749542be
+  metadata.gz: 145a343f58f8826bc6f4533dc57106f4d964ceee
+  data.tar.gz: 7f9393e5a5e61d65e4841d00c5daa03bd4df6a28
 SHA512:
-  metadata.gz: 2387d4702778d509d4090fad10e6c39d214822fff96fadc345b0ef657bbcc69f6d94212ee5bbee90b2786e22ab9aebfad6ebb64b2c01cc83897033a85ebe9b5c
-  data.tar.gz: 7fa3befeae7c5a14d0bd4b51c97c4f286abace9929fa5532ac566fd09ec636c76cf10c41f20e4f4a07e7f1b410ce45379b75bc8e2ec0b3743f9302081742b151
+  metadata.gz: 758077bd498fcd88dbfe45c4ac1b35d00e9476c10f1cf62e91806a86ab7e13994c3bc56ecbd001f72889df937d0a924b06f62c94dcfe0ec477021f98e4aacfd9
+  data.tar.gz: a83fe6ad7ac34a3e736efe884578ff36b6973578fbcbe9a741046dcfb8fd5207c0196aed432f4acefdc576a9128d09f56759e56fb4dd37f9b9be8d89386ec296

data/.gitignore

@@ -8,4 +8,5 @@ test/dummy/log/*.log
 test/dummy/tmp/
 test/dummy/public/assets
 test/dummy/.sass-cache
-*.gem
+*.gem
+gems/

data/lib/magic_stylez/engine.rb

@@ -5,16 +5,13 @@ module MagicStylez
   module Rails
     class Engine < ::Rails::Engine
       initializer "magic-stylez.assets.precompile" do |app|
-        # app.config.assets.precompile << %r(magic/magicons-regular-webfont\.(?:eot|svg|ttf|woff)$)
-        # app.config.assets.precompile << %r(magic/orderlifticons-webfont\.(?:eot|svg|ttf|woff)$)
         
+        # compile pictures (this way also from vendor)
         config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
-        config.assets.precompile += %w(*.eot *.svg *.ttf *.woff)
         
+        # compile fonts (this way also from vendor)
+        config.assets.precompile += %w(*.eot *.svg *.ttf *.woff)
         
-        # config.sass.load_paths << stylesheets_path("bourbon")
-        # config.sass.load_paths << stylesheets_path("bootstrap")
-        # config.sass.load_paths << javascripts_path("bootstrap")
       end
     end
   end

data/lib/magic_stylez/version.rb

@@ -1,3 +1,3 @@
 module MagicStylez
-  VERSION = "0.0.0.13"
+  VERSION = "0.0.0.19"
 end

data/test/dummy/app/assets/javascripts/app.js.coffee

@@ -1,3 +1,39 @@
+currentPath = ""
+
+loadCircles = ->
+  if $('.circle-diagram').length > 1
+    window.circles = {}
+    count = 0
+    $('.circle-diagram').each ->
+      window.circles[count] = new CircleDiagram( circle: $(@) )
+      count = count + 1
+  else if $('.circle-diagram').length > 0
+    window.circleDiagram = new CircleDiagram( circle: $('.circle-diagram') )
+
+
+
+navigate = ->
+  path = window.location.hash.replace(/#/, "")
+  if path != currentPath
+    if path != ""
+      $("#app_content").html( $(renderView( path )) )
+    else
+      $("#app_content").html( $(renderView( "app/start" )) )
+  lnk = $(".app_lnk[data-target='#{path}']").closest("li")
+  nav = lnk.closest(".nav_list")
+  nul = lnk.closest("ul")
+  nav.find("li.active").removeClass("active")
+  nav.find("li.current").removeClass("current")
+  if nav == nul
+    lnk.addClass("current")
+  else
+    nul.closest("li").addClass("current")
+  lnk.addClass("active")
+  loadCircles()
+  currentPath = path
+    
+  
+
 $ ->
 
   $("body").on "click", ".lst_lnk", ->
@@ -21,23 +57,10 @@ $ ->
     window.location.hash = path
     
   # $(window).on 'hashchange', ->
-  #   path = window.location.hash.replace(/#/, "")
-  #   $("#app_content").html( $(renderView( path )) )
+  #   console.log "hashchange", window.location.pathname
+  #   navigate()
   
   $(window).on 'popstate', ->
-    console.log "Popstate"
-    path = window.location.hash.replace(/#/, "")
-    if path != ""
-      $("#app_content").html( $(renderView( path )) )
-    else
-      $("#app_content").html( $(renderView( "app/start" )) )
-    lnk = $(".app_lnk[data-target='#{path}']").closest("li")
-    nav = lnk.closest(".nav_list")
-    nul = lnk.closest("ul")
-    nav.find("li.active").removeClass("active")
-    nav.find("li.current").removeClass("current")
-    if nav == nul
-      lnk.addClass("current")
-    else
-      nul.closest("li").addClass("current")
-    lnk.addClass("active")
+    console.log "Popstate", window.location.pathname
+    navigate()
+    

data/test/dummy/app/assets/javascripts/application.js

@@ -13,5 +13,6 @@
 //= require jquery
 //= require_tree ./views
 //= require magic-stylez
+//= require assets
 //= require magic/render_eco
 //= require app

data/test/dummy/app/assets/javascripts/assets.js.coffee.erb

@@ -0,0 +1,29 @@
+<% imgs = {} %>
+<% Dir.glob("#{MagicStylez::Rails::Engine.root}/vendor/assets/images/**/*").each do |ff| %>
+  <% img_path = ff.gsub("#{MagicStylez::Rails::Engine.root}/vendor/assets/images/", "") %>
+  <% imgs[img_path] = asset_path(img_path) if img_path.match(/\.png$/) || img_path.match(/\.jpg$/) || img_path.match(/\.jpeg$/) || img_path.match(/\.gif$/) %>
+<% end %>
+
+appImages = <%= imgs.to_json %>
+
+@assetPath = (path) ->
+  # "/assets/angular/app/views/#{path}.html"
+  appImages["#{path}"]
+
+
+@rootPath = ->
+  # if App.Environment == "production"
+  if window.location.hostname == "berlinmagic.github.io"
+    return "/magic_stylez/"
+  else
+    return "/"
+
+
+@glyphicons = ["asterisk", "plus", "euro", "minus", "cloud", "envelope", "pencil", "glass", "music", "search", "heart", "star", "star-empty", "user", "film", "th-large", "th", "th-list", "ok", "remove", "zoom-in", "zoom-out", "off", "signal", "cog", "trash", "home", "file", "time", "road", "download-alt", "download", "upload", "inbox", "play-circle", "repeat", "refresh", "list-alt", "lock", "flag", "headphones", "volume-off", "volume-down", "volume-up", "qrcode", "barcode", "tag", "tags", "book", "bookmark", "print", "camera", "font", "bold", "italic", "text-height", "text-width", "align-left", "align-center", "align-right", "align-justify", "list", "indent-left", "indent-right", "facetime-video", "picture", "map-marker", "adjust", "tint", "edit", "share", "check", "move", "step-backward", "fast-backward", "backward", "play", "pause", "stop", "forward", "fast-forward", "step-forward", "eject", "chevron-left", "chevron-right", "plus-sign", "minus-sign", "remove-sign", "ok-sign", "question-sign", "info-sign", "screenshot", "remove-circle", "ok-circle", "ban-circle", "arrow-left", "arrow-right", "arrow-up", "arrow-down", "share-alt", "resize-full", "resize-small", "exclamation-sign", "gift", "leaf", "fire", "eye-open", "eye-close", "warning-sign", "plane", "calendar", "random", "comment", "magnet", "chevron-up", "chevron-down", "retweet", "shopping-cart", "folder-close", "folder-open", "resize-vertical", "resize-horizontal", "hdd", "bullhorn", "bell", "certificate", "thumbs-up", "thumbs-down", "hand-right", "hand-left", "hand-up", "hand-down", "circle-arrow-right", "circle-arrow-left", "circle-arrow-up", "circle-arrow-down", "globe", "wrench", "tasks", "filter", "briefcase", "fullscreen", "dashboard", "paperclip", "heart-empty", "link", "phone", "pushpin", "usd", "gbp", "sort", "sort-by-alphabet", "sort-by-alphabet-alt", "sort-by-order", "sort-by-order-alt", "sort-by-attributes", "sort-by-attributes-alt", "unchecked", "expand", "collapse-down", "collapse-up", "log-in", "flash", "log-out", "new-window", "record", "save", "open", "saved", "import", "export", "send", "floppy-disk", "floppy-saved", "floppy-remove", "floppy-save", "floppy-open", "credit-card", "transfer", "cutlery", "header", "compressed", "earphone", "phone-alt", "tower", "stats", "sd-video", "hd-video", "subtitles", "sound-stereo", "sound-dolby", "sound-5-1", "sound-6-1", "sound-7-1", "copyright-mark", "registration-mark", "cloud-download", "cloud-upload", "tree-conifer", "tree-deciduous"]
+
+@icomoons = ["home", "home2", "home3", "office", "newspaper", "pencil", "pencil2", "quill", "pen", "blog", "droplet", "paint-format", "image", "image2", "images", "camera", "music", "headphones", "play", "film", "camera2", "dice", "pacman", "spades", "clubs", "diamonds", "pawn", "bullhorn", "connection", "podcast", "feed", "book", "books", "library", "file", "profile", "file2", "file3", "file4", "copy", "copy2", "copy3", "paste", "paste2", "paste3", "stack", "folder", "folder-open", "tag", "tags", "barcode", "qrcode", "ticket", "cart", "cart2", "cart3", "coin", "credit", "calculate", "support", "phone", "phone-hang-up", "address-book", "notebook", "envelope", "pushpin", "location", "location2", "compass", "map", "map2", "history", "clock", "clock2", "alarm", "alarm2", "bell", "stopwatch", "calendar", "calendar2", "print", "keyboard", "screen", "laptop", "mobile", "mobile2", "tablet", "tv", "cabinet", "drawer", "drawer2", "drawer3", "box-add", "box-remove", "download", "upload", "disk", "storage", "undo", "redo", "flip", "flip2", "undo2", "redo2", "forward", "reply", "bubble", "bubbles", "bubbles2", "bubble2", "bubbles3", "bubbles4", "user", "users", "user2", "users2", "user3", "user4", "quotes-left", "busy", "spinner", "spinner2", "spinner3", "spinner4", "spinner5", "spinner6", "binoculars", "search", "zoomin", "zoomout", "expand", "contract", "expand2", "contract2", "key", "key2", "lock", "lock2", "unlocked", "wrench", "settings", "equalizer", "cog", "cogs", "cog2", "hammer", "wand", "aid", "bug", "pie", "stats", "bars", "bars2", "gift", "trophy", "glass", "mug", "food", "leaf", "rocket", "meter", "meter2", "dashboard", "hammer2", "fire", "lab", "magnet", "remove", "remove2", "briefcase", "airplane", "truck", "road", "accessibility", "target", "shield", "lightning", "switch", "powercord", "signup", "list", "list2", "numbered-list", "menu", "menu2", "tree", "cloud", "cloud-download", "cloud-upload", "download2", "upload2", "download3", "upload3", "globe", "earth", "link", "flag", "attachment", "eye", "eye-blocked", "eye2", "bookmark", "bookmarks", "brightness-medium", "brightness-contrast", "contrast", "star", "star2", "star3", "heart", "heart2", "heart-broken", "thumbs-up", "thumbs-up2", "happy", "happy2", "smiley", "smiley2", "tongue", "tongue2", "sad", "sad2", "wink", "wink2", "grin", "grin2", "cool", "cool2", "angry", "angry2", "evil", "evil2", "shocked", "shocked2", "confused", "confused2", "neutral", "neutral2", "wondering", "wondering2", "point-up", "point-right", "point-down", "point-left", "warning", "notification", "question", "info", "info2", "blocked", "cancel-circle", "checkmark-circle", "spam", "close", "checkmark", "checkmark2", "spell-check", "minus", "plus", "enter", "exit", "play2", "pause", "stop", "backward", "forward2", "play3", "pause2", "stop2", "backward2", "forward3", "first", "last", "previous", "next", "eject", "volume-high", "volume-medium", "volume-low", "volume-mute", "volume-mute2", "volume-increase", "volume-decrease", "loop", "loop2", "loop3", "shuffle", "arrow-up-left", "arrow-up", "arrow-up-right", "arrow-right", "arrow-down-right", "arrow-down", "arrow-down-left", "arrow-left", "arrow-up-left2", "arrow-up2", "arrow-up-right2", "arrow-right2", "arrow-down-right2", "arrow-down2", "arrow-down-left2", "arrow-left2", "arrow-up-left3", "arrow-up3", "arrow-up-right3", "arrow-right3", "arrow-down-right3", "arrow-down3", "arrow-down-left3", "arrow-left3", "tab", "checkbox-checked", "checkbox-unchecked", "checkbox-partial", "radio-checked", "radio-unchecked", "crop", "scissors", "filter", "filter2", "font", "text-height", "text-width", "bold", "underline", "italic", "strikethrough", "omega", "sigma", "table", "table2", "insert-template", "pilcrow", "lefttoright", "righttoleft", "paragraph-left", "paragraph-center", "paragraph-right", "paragraph-justify", "paragraph-left2", "paragraph-center2", "paragraph-right2", "paragraph-justify2", "indent-increase", "indent-decrease", "newtab", "embed", "code", "console", "share", "mail", "mail2", "mail3", "mail4", "google", "googleplus", "googleplus2", "googleplus3", "googleplus4", "google-drive", "facebook", "facebook2", "facebook3", "instagram", "twitter", "twitter2", "twitter3", "feed2", "feed3", "feed4", "youtube", "youtube2", "vimeo", "vimeo2", "vimeo3", "lanyrd", "flickr", "flickr2", "flickr3", "flickr4", "picassa", "picassa2", "dribbble", "dribbble2", "dribbble3", "forrst", "forrst2", "deviantart", "deviantart2", "steam", "steam2", "github", "github2", "github3", "github4", "github5", "wordpress", "wordpress2", "joomla", "blogger", "blogger2", "tumblr", "tumblr2", "yahoo", "tux", "apple", "finder", "android", "windows", "windows8", "soundcloud", "soundcloud2", "skype", "reddit", "linkedin", "lastfm", "lastfm2", "delicious", "stumbleupon", "stumbleupon2", "stackoverflow", "pinterest", "pinterest2", "xing", "xing2", "flattr", "foursquare", "foursquare2", "paypal", "paypal2", "paypal3", "yelp", "libreoffice", "file-pdf", "file-openoffice", "file-word", "file-excel", "file-zip", "file-powerpoint", "file-xml", "file-css", "html5", "html52", "css3", "chrome", "firefox", "IE", "opera", "safari", "IcoMoon"]
+
+@magicons = ["close-round", "ok-round", "minus-round", "plus-round", "ban-circle", "attention-round", "info-round", "question-round", "arrow-up", "arrow-right", "arrow-down", "arrow-left", "fat-arrow-up", "fat-arrow-right", "fat-arrow-down", "fat-arrow-left", "chevron-round-up", "chevron-round-right", "chevron-round-down", "chevron-round-left", "caret-up", "caret-right", "caret-down", "caret-left", "hand-up", "hand-right", "hand-down", "hand-left", "hand-fuck", "hand-rock-back", "hand-rock", "thumb-up", "thumb-right", "thumb-down", "thumb-left", "handflat-left", "handflat-both", "handflat-right", "heart-round", "heart-empty", "comment", "comment-round", "comment-empty", "comments-round", "comments-empty", "bookmark", "bookmark-empty", "envelope", "envelope-alt", "envelope-open", "envelope-open-alt", "envelope-filled", "envelope-filled-alt", "envelope-inlay-open", "envelope-inlay-open-alt", "envelope-inlay-filled", "envelope-inlay-filled-alt", "tag", "tags", "star-round", "star-empty", "star-half-round", "star-half-empty", "user-male-round", "user-female-round", "user-group-round", "user-group-alt", "user-group-big", "search-round", "zoom-in", "zoom-out", "lock-round", "unlock-round", "wrench-round", "cog-round", "cog-alt", "cogs", "trash-round", "key", "key-alt", "pushpin-round", "map-marker-round", "time-round", "time-alt", "move", "resize-horizontal", "resize-vertical", "retweet", "reload", "random", "refresh", "adjust", "asterisk", "screenshot", "target-round", "volume-one", "volume-two", "volume-three", "sort-round", "sort-round-down", "sort-round-up", "signin", "signout", "sitemap", "signal", "download", "upload", "facebook", "twitter", "github", "github-alt", "pinterest", "linkedin", "google-plus", "flickr", "picasa", "rss", "firefox", "ie", "opera", "chrome", "safari", "phone", "phone-pickup", "phone-hangup", "pencil-round", "pencil-alt", "ballpen", "briefcase", "briefcase-alt", "inbox-round", "dashboard", "folder-close", "folder-open", "folder-alt", "book", "book-marked", "book-marked-alt", "address-book", "address-book-marked", "address-book-marked-alt", "book-open-round", "book-open-alt", "book-open-filled", "tasks", "reorder", "bar-chart-round", "clipboard-tasks", "clipboard-check", "clipboard-tasks-edge", "clipboard-check-edge", "pile-list-marked", "pile-check-marked-edge", "ringbinder-month", "ringbinder-day", "ringbinder-list", "ringbinder-month-edge", "ringbinder-day-edge", "ringbinder-list-edge", "picture-round", "picture-alt", "pictures", "external-link", "share", "edit", "check", "check-empty", "credit-card", "qrcode", "shopping-cart", "shopping-cart-alt", "shopping-cart-in", "shopping-cart-in-alt", "money", "money-euro-round", "money-dollar", "barcode", "barcode-alt", "globe-round", "globe-alt", "home", "truck", "plane", "road", "compass-round", "file", "files", "file-text", "file-alt", "file-edge", "file-black", "cut", "paste", "save", "paper-clip", "link", "link-alt", "undo", "repeat", "undo-alt", "repeat-alt", "text-height", "text-width", "align-left", "align-center", "align-right", "align-justify", "indent-left", "indent-right", "font", "bold", "italic", "strikethrough", "underline", "columns", "table", "th-large", "th", "th-list", "list-round", "list-ol", "list-ul", "list-alt", "staple", "staple-alt", "music", "power-round", "facetime-video", "film", "bullhorn", "camera-round", "camera-retro", "print-round", "print-alt", "hdd", "headphones", "play", "play-circle", "pause", "stop", "backward", "forward", "fast-backward", "fast-forward", "step-backward", "step-forward", "eject", "fullscreen", "resize-full", "resize-small", "trophy", "umbrella-round", "gift", "flag", "flag-alt", "certificate", "glass", "tint", "tints", "leaf", "legal", "cloud", "beaker", "lemon", "magic", "magic-alt", "bolt", "bolt-alt", "magnet", "thermometer", "bell", "filter", "hammer", "plug-round", "shirt", "steering-wheel", "triangle", "hands-up", "clock", "chart", "chart-open", "vitro", "vitro-bubble", "vitro-bubbles", "moon-round", "moon-empty", "moon-full", "sun-round", "sun-alt", "micro-round", "equalizer-round", "knots", "crop", "lectern", "html", "graph", "graph-alt", "transmit", "graduation-hat", "star-alt-round", "cog-more", "close-sign-round", "ok-sign-round", "plus-sign-round", "minus-sign-round", "attention-sign-round", "question-sign-round", "info-sign-round", "caret-up-sign", "caret-right-sign", "caret-down-sign", "caret-left-sign", "edit-sign", "user-minus", "user-plus", "user-unknown", "user-ok", "hand-high5", "hand-high5-back", "hand-shake", "hand-card", "compass", "globe", "inbox-empty", "inbox", "task-list", "user", "mail-empty", "mail", "cog", "chevron-cut-right", "chevron-cut-down", "chevron-cut-left", "chevron-up", "chevron-right", "chevron-down", "chevron-left", "lock", "unlock", "search", "visible", "unvisible", "pencil", "trash", "sort-down", "sort-up", "sort", "plus-sign", "minus-sign","ok-sign","close-sign","question-sign","info-sign","attention-sign","plus","minus","ok","close","question","info","attention","work", "private","picture","pushpin","heart","map-marker","user-group","time","star-alt","book-open","calendar", "calendar-invert", "target","umbrella","equalizer","list","star","star-half","money-euro","tag-alt", "print","message", "comment","comments","camera","description", "bar-chart","wrench","user-male","user-female","user-male-alt", "user-female-alt", "company", "sun","moon","inside", "outside", "wlan", "beamer", "micro","plug","internet", "power","wheelchair", "smoking-sign", "smoking", "no-smoking", "parking-sign", "parking-meter", "elevator", "toilette", "coffee", "water", "pizza", "burger", "softdrink", "fastfood", "catering", "wine", "plates", "kitchen", "layout-round-table", "layout-classroom", "layout-banquet", "layout-theater", "layout-u-table", "layout-workspace"]
+
+@olicons = ["market", "projects-empty", "projects-full", "tasks-empty", "tasks-full", "settings", "overview", "contacts", "message-empty", "message-full", "basket-empty", "basket-full", "bell", "notify", "about-me", "portfolio", "portfolio-alt", "general-informations", "contact-data", "career", "skills", "view-list", "view-tile", "view-cards", "view-map", "state-active", "state-inactive", "edit", "view-map-2", "search", "zoom-in", "zoom-out", "comment", "share", "like", "lock", "lock-open", "chevron-up", "chevron-right", "chevron-down", "chevron-left", "chevron-2-up", "chevron-2-right", "chevron-2-down", "chevron-2-left", "plus", "minus", "ok", "close", "plus-sign", "minus-sign", "ok-sign", "close-sign", "show-sb", "hide-sb", "filter", "preview", "hide-filter", "female", "male", "sex", "sort-down", "sort-up", "sort", "product", "object", "question-answer", "secure", "analytics", "inquiry", "orders", "environmentally-friendly", "waterproof", "delivery", "bright", "dark", "indoor", "outdoor", "accessible", "smoker", "non-smoker", "parking", "parking-meter", "elevator", "max-people", "wlan", "beamer", "microphone", "sockets", "internet", "electricity", "coffee", "water", "pizza", "burger", "drinks", "fast-food", "waiter", "wine", "dishes", "stove", "conference", "classroom", "banquet", "theatre", "u-shape", "workspace", "men", "woman", "company", "store", "bar", "restaurant", "men-investor", "men-work", "men-business", "men-normal", "men-business2", "men-dev", "men-html", "plus-contact", "plus-picture", "plus-company", "plus-company-contact", "ruby", "html5", "facebook", "facebook-block", "google", "google-block", "google-cut", "google-cut-block", "twitter", "twitter-block", "linkedin", "linkedin-block", "xing", "xing-block", "qr-code", "barcode", "cash", "gift", "auge", "inventar", "analytics-alt", "settings-alt", "slidebar", "info-circle", "product-circle", "pos-circle", "user", "calendar", "glass", "trash", "resize", "product-alt", "circle-plus", "circle-times", "circle-minus", "circle-ok", "auge-alt", "inventar-alt", "analytics-alt", "euro-circle", "reports", "tasks", "vcard", "catalog", "flyer", "euro"]
+

data/test/dummy/app/assets/javascripts/blank.js

@@ -0,0 +1,14 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file.
+//
+// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+//= require jquery
+//= require magic-min

data/test/dummy/app/assets/javascripts/views/app/start.jst.eco

@@ -1,6 +1,16 @@
 <div class="section head">
   <div class="corset">
-    <h1>magic-stylez</h1>
+    <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>
 
@@ -23,7 +33,7 @@
 <div class="section compact hard-top">
   <div class="corset">
     <h3>Dependencies</h3>
-    <ul>
+    <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>
@@ -45,7 +55,7 @@
 <div class="section compact">
   <div class="corset">
     <h3>Authors</h3>
-    <ul>
+    <ul class="list">
       <li><a href="http://twetzel.github.io/" target="_blank">Torsten Wetzel</a></li>
       <li>many others ...</li>
     </ul>

data/test/dummy/app/assets/javascripts/views/effects/shadows.jst.eco

@@ -12,10 +12,10 @@
 
 			
 			<div class="box">
-		  <div class="head">
+		  <div class="header">
         <a name="all">All Samples</a>
 		  </div>
-		  <div class="inner">
+		  <div class="body onTop">
 		    
   			
 
@@ -124,10 +124,10 @@
 		
 	<div class="box">
 	
-	<div class="head">
+	<div class="header">
 		<a name="raised_shadow">Raised Shadow</a>
 	</div>
-	<div class="context" style="position: relative; z-index: 1">
+	<div class="body" style="position: relative; z-index: 1">
 		
 		
 		
@@ -254,10 +254,10 @@
 	
 	<div class="box">
 	
-	<div class="head">
+	<div class="header">
 		<a name="lifted_shadow">Lifted Shadow</a>
 	</div>
-	<div class="context" style="position: relative; z-index: 1">
+	<div class="body" style="position: relative; z-index: 1">
 		
 		<p class="warning">! <strong>Wrapper needs:</strong> "position: relative; z-index: 1" !</p>
 		
@@ -384,10 +384,10 @@
 
 	<div class="box">
 	
-	<div class="head">
+	<div class="header">
 		<a name="vertical_curves">Vertical Curves</a>
 	</div>
-	<div class="context" style="position: relative; z-index: 1">
+	<div class="body" style="position: relative; z-index: 1">
 		
 		<p class="warning">! <strong>Wrapper needs:</strong> "position: relative; z-index: 1" !</p>
 		
@@ -514,10 +514,10 @@
 
 	<div class="box">
 	
-	<div class="head">
+	<div class="header">
 		<a name="horizontal_curves">Horizontal Curves</a>
 	</div>
-	<div class="context" style="position: relative; z-index: 1">
+	<div class="body" style="position: relative; z-index: 1">
 		
 		<p class="warning">! <strong>Wrapper needs:</strong> "position: relative; z-index: 1" !</p>
 		
@@ -644,10 +644,10 @@
 
 	<div class="box">
 	
-	<div class="head">
+	<div class="header">
 		<a name="vertical_shine">Vertical Shine</a>
 	</div>
-	<div class="context" style="position: relative; z-index: 1">
+	<div class="body" style="position: relative; z-index: 1">
 		
 		<p class="warning">! <strong>Wrapper needs:</strong> "position: relative; z-index: 1" !</p>
 		
@@ -767,10 +767,10 @@
 
 	<div class="box">
 	
-	<div class="head">
+	<div class="header">
 		<a name="horizontal_shine">Horizontal Shine</a>
 	</div>
-	<div class="context" style="position: relative; z-index: 1">
+	<div class="body" style="position: relative; z-index: 1">
 		
 		<p class="warning">! <strong>Wrapper needs:</strong> "position: relative; z-index: 1" !</p>
 		
@@ -890,10 +890,10 @@
 
 	<div class="box">
 	
-	<div class="head">
+	<div class="header">
 		<a name="single_curve">Single Curve</a>
 	</div>
-	<div class="context" style="position: relative; z-index: 1">
+	<div class="body" style="position: relative; z-index: 1">
 		
 		<p class="warning">! <strong>Wrapper needs:</strong> "position: relative; z-index: 1" !</p>
 		
@@ -1027,10 +1027,10 @@
 
 	<div class="box">
 	
-	<div class="head">
+	<div class="header">
 		<a name="single_shine">Single Shine</a>
 	</div>
-	<div class="context" style="position: relative; z-index: 1">
+	<div class="body" style="position: relative; z-index: 1">
 		
 		<p class="warning">! <strong>Wrapper needs:</strong> "position: relative; z-index: 1" !</p>
 		
@@ -1164,10 +1164,10 @@
 
 	<div class="box">
 	
-	<div class="head">
+	<div class="header">
 		<a name="paper_shadow">Paper Shadow</a>
 	</div>
-	<div class="context" style="position: relative; z-index: 1">
+	<div class="body" style="position: relative; z-index: 1">
 		
 		<p class="warning">! <strong>Wrapper needs:</strong> "position: relative; z-index: 1" !</p>
 		
@@ -1267,10 +1267,10 @@
 
 	<div class="box">
 	
-	<div class="head">
+	<div class="header">
 		<a name="pseudo_raised_shadow">Pseudo Raised Shadow</a>
 	</div>
-	<div class="context" style="position: relative; z-index: 1">
+	<div class="body" style="position: relative; z-index: 1">
 		
 		<p class="warning">! <strong>Wrapper needs:</strong> "position: relative; z-index: 1" !</p>
 		
@@ -1411,10 +1411,10 @@
 
 	<div class="box">
 	
-	<div class="head">
+	<div class="header">
 		<a name="perspective_shadow">Perspective Shadow</a>
 	</div>
-	<div class="context" style="position: relative; z-index: 1">
+	<div class="body" style="position: relative; z-index: 1">
 		
 		<p class="warning">! <strong>Wrapper needs:</strong> "position: relative; z-index: 1" !</p>
 		

data/test/dummy/app/assets/javascripts/views/elements/buttons.jst.eco

@@ -0,0 +1,131 @@
+<div class="section head">
+  <div class="corset">
+    <h1>Splited and divided Buttons</h1>
+  </div>
+</div>
+
+
+
+<div class="section">
+  <div class="corset tight">
+    
+    
+    <div class="btn btn-success btn-lg btn-block btn-splited press">
+      <div class="text">
+        .btn-splited
+      </div>
+      <div class="icn">
+        <i class="magicons-caret-right"></i>
+      </div>
+    </div>
+    
+    <div class="btn btn-default btn-lg btn-block btn-splited half press">
+      <div class="icn">
+        <i class="icomoon-globe"></i>
+      </div>
+      <div class="text">
+        .btn-splited.half
+      </div>
+    </div>
+    
+    <div class="btn btn-primary btn-lg btn-block btn-divided press">
+      <div class="icn">
+        <i class="icomoon-globe"></i>
+      </div>
+      <div class="text">
+        .btn-divided
+      </div>
+    </div>
+    
+    <div class="btn btn-warning btn-block btn-divided half press">
+      <div class="icn">
+        <i class="icomoon-globe"></i>
+      </div>
+      <div class="text">
+        .btn-divided.half
+      </div>
+    </div>
+    
+    <div class="btn btn-danger btn-sm btn-divided press">
+      <div class="icn">
+        <i class="icomoon-rocket"></i>
+      </div>
+      <div class="text">
+        .btn-divided
+      </div>
+      <div class="icn">
+        <i class="icomoon-rocket"></i>
+      </div>
+    </div>
+    
+    <div class="btn btn-danger btn-xs btn-divided press">
+      <div class="icn">
+        <i class="icomoon-rocket"></i>
+      </div>
+      <div class="text">
+        .btn-divided
+      </div>
+      <div class="icn">
+        <i class="icomoon-rocket"></i>
+      </div>
+    </div>
+    
+  </div>
+</div>
+
+
+<div class="section head">
+  <div class="corset">
+    <h1>Social Buttons</h1>
+  </div>
+</div>
+
+<div class="section">
+  <div class="corset">
+    <div class="row">
+      <div class="col-md-6">
+        <h4 class="center_text">Flat</h4>
+        <hr/>
+        <% buttons = ["facebook", "google", "paypal", "twitter"]%>
+        <% for btn, i in buttons: %>
+          <div class="btn btn-<%= btn %> btn-lg btn-divided press">
+            <div class="icn">
+              <i class="icomoon-<%= if btn == "google" then "googleplus" else btn %>"></i>
+            </div>
+            <div class="text">
+              .btn-<%= btn %>
+            </div>
+          </div>
+        <% end%>
+      </div>
+      <div class="col-md-6">
+        <h4 class="center_text">Nice</h4>
+        <hr/>
+        <% buttons = ["facebook", "google", "paypal", "twitter"]%>
+        <% for btn, i in buttons: %>
+          <div class="btn btn-<%= btn %>-nice btn-lg btn-divided press">
+            <div class="icn">
+              <i class="icomoon-<%= if btn == "google" then "googleplus" else btn %>"></i>
+            </div>
+            <div class="text">
+              .btn-<%= btn %>-nice
+            </div>
+          </div>
+        <% end%>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="section shine-top">
+  <div class="corset">
+    <p class="loud">splited and divided buttons are nice little helper for buttons that contain an icon</p>
+    <p class="loud"><strong>Be carefull! .btn-splited & .btn-divided are always block elements.</strong></p>
+    <pre>
+      <code>
+  &lt;div class=&quot;btn btn-success btn-lg btn-splited&quot;&gt;<br/>    &lt;span&gt;.btn-splited&lt;/span&gt;<br/>    &lt;span class=&quot;icn&quot;&gt;<br/>      &lt;i class=&quot;magicons-caret-right&quot;&gt;&lt;/i&gt;<br/>    &lt;/span&gt;<br/>  &lt;/div&gt;<br/>  <br/>  <br/>  &lt;div class=&quot;btn btn-primary btn-lg btn-divided&quot;&gt;<br/>    &lt;div class=&quot;icn&quot;&gt;<br/>      &lt;i class=&quot;icomoon-globe&quot;&gt;&lt;/i&gt;<br/>    &lt;/div&gt;<br/>    &lt;div&gt;<br/>      .btn-divided<br/>    &lt;/div&gt;<br/>  &lt;/div&gt;<br/>
+      </code>
+    </pre>
+    <p class="loud">tag of inner element doesn't matter just the element conaining the icon need class <strong>.icn</strong></p>
+  </div>
+</div>