iugu-ux 0.6.0

data/sandbox/app/assets/stylesheets/sandbox-sprites.css

@@ -0,0 +1,6 @@
+/*
+ * This is a manifest file that'll automatically include all the stylesheets available in this directory
+ * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
+ * the top of the compiled file, but it's generally better to create a new file per style scope.
+ *= require 'default-sprites.sass'
+*/

data/sandbox/app/controllers/application_controller.rb

@@ -0,0 +1,3 @@
+class ApplicationController < ActionController::Base
+  protect_from_forgery
+end

data/sandbox/app/controllers/ui_library_controller.rb

@@ -0,0 +1,15 @@
+class UiLibraryController < ApplicationController
+
+  layout 'ui'
+  
+  def index
+  end
+
+  def components
+  end
+
+  def boiler
+    render :layout => false
+  end
+
+end

data/sandbox/app/views/layouts/ui.html.haml

@@ -0,0 +1,18 @@
+!!! 5
+%html{:lang => "en"}
+  %head
+    %meta{:charset => "utf-8"}/
+    %title= content_for?(:title) ? (yield(:title) + " - Iugu UX Development") : "Iugu UX Development"
+    = csrf_meta_tags
+
+    = stylesheet_link_tag    "iugu-ux"
+    = javascript_include_tag "vendor"
+    = javascript_include_tag "iugu-ux"
+
+  %body{ :class => "iugu-ui #{action_name == "components" ? 'applicationBackground':''}" }
+
+
+    .content{ :style => "margin:20px" }
+      .wrapper{ :style => "max-width:860px;margin-left:auto;margin-right:auto" }
+
+        = yield

data/sandbox/app/views/ui_library/boiler.html.haml

@@ -0,0 +1,32 @@
+!!! 5
+%html{:lang => "en"}
+  %head
+    %meta{:charset => "utf-8"}/
+    %title
+      App Testing
+    = csrf_meta_tags
+
+    = stylesheet_link_tag    "iugu-ux"
+    = javascript_include_tag "vendor"
+    = javascript_include_tag "iugu-ux"
+    = stylesheet_link_tag    "sandbox-sprites"
+    = stylesheet_link_tag    "application"
+
+    %meta{ :name=>'viewport', :content=>'width=device-width, initial-scale=1, maximum-scale=1' }
+    %meta{ :name=>'apple-mobile-web-app-capable', :content=>'yes' }
+    %meta{ :name=>'apple-mobile-web-status-bar-style', :content=>'black' }
+    %meta{ :'http-equiv'=>'cleartype', :content=>'on' }
+    %meta{ :'http-equiv'=>'X-UA-Compatible', :content=>'IE=edge,chrome=1' }
+    %meta{ :name=>'MobileOptimized', :content=>'320' }
+
+  %body{ :class => "iugu-ui" }
+    %noscript
+      .js-warning
+
+    #app
+
+    %script
+      (function() { $(function() {
+      if (typeof(run_webapp) == 'function') return run_webapp(true);
+      });
+      }).call(this);

data/sandbox/app/views/ui_library/components.html.haml

@@ -0,0 +1,189 @@
+%div{ :style => "margin-bottom: 20px" }
+  = link_to "Base CSS", "/"
+  = ' | '
+  = link_to "Components", "/components"
+
+%h3
+  Tags
+
+.element-spacing
+  %p.no-bottom-margin
+    %span.tag new
+    Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+  %p.no-bottom-margin
+    %span.tag.red error
+    Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+  %p.no-bottom-margin
+    %span.tag.yellow warning
+    Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+  %p.no-bottom-margin
+    %span.tag.green done
+    Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+  %p.no-bottom-margin
+    %span.tag.blue shipping
+    Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+
+%dl.dl-horizontal
+  %dt
+    %span.tag new
+  %dd A description list is perfect for defining terms.
+  %dt
+    %span.tag.red error
+  %dd Vestibulum id ligula porta felis euismod semper.
+  %dt
+    %span.tag.green done
+  %dd Vestibulum id ligula porta felis euismod semper.
+  %dt
+    %span.tag.green done
+  %dd Vestibulum id ligula porta felis euismod semper.
+  %dt
+    %span.tag.green done
+  %dd Vestibulum id ligula porta felis euismod semper.
+  %dt
+    %span.tag.green done
+  %dd Vestibulum id ligula porta felis euismod semper.
+  %dt
+    %span.tag.green done
+  %dd Vestibulum id ligula porta felis euismod semper.
+
+%h3
+  Badges
+
+.element-spacing
+  %span.badge
+    1
+  %span.badge.red
+    45
+  %span.badge.red
+    102
+  %span.badge.green
+    3
+
+%h3
+  Notices
+
+.notice
+  %button.close{ :'data-dismiss' => "notice" }
+    ×
+  %strong
+    Warning!
+  Best check yo self, you're not looking too good.
+
+.notice
+  %button.close{ :'data-dismiss' => "notice" }
+    ×
+  %h4.notice-heading
+    Warning!
+  Best check yo self, you're not looking too good.
+
+.notice.notice-red
+  %button.close{ :'data-dismiss' => "notice" }
+    ×
+  %h4.notice-heading
+    Error!
+  Best check yo self, you're not looking too good.
+
+.notice.notice-green
+  %button.close{ :'data-dismiss' => "notice" }
+    ×
+  %h4.notice-heading
+    Success!
+  Best check yo self, you're not looking too good.
+
+.notice.notice-blue
+  %button.close{ :'data-dismiss' => "notice" }
+    ×
+  %h4.notice-heading
+    Info!
+  Best check yo self, you're not looking too good.
+  %ul
+    %li
+      Checking item #5
+    %li
+      Analysing lorem ipsum
+
+%h3
+  Progress Bar
+
+.progress
+  .bar{ :style => "width: 20%" }
+    20%
+
+.progress
+  .bar{ :style => "width: 20%" }
+
+%h3
+  Containers
+
+.container
+  Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+
+.container.no-padding
+  .header
+    Header
+  .padding
+    Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+  .footer
+    Footer
+
+.container
+  %p Cras mattis consectetur purus sit amet fermentum.
+  .container.no-bottom-margin
+    Container inside container. Cras mattis consectetur purus sit amet fermentum.
+
+%h3
+  Tabbed Container
+
+.tabbed
+  %ul.nav
+    %li.active{ :style => "width:50%" }
+      %a Profile
+    %li{ :style => "width:50%" }
+      %a Account
+  .container
+    Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+
+.tabbed
+  %ul.nav
+    %li.active{ :style => "width:50%" }
+      %a Profile
+    %li{ :style => "width:50%" }
+      %a{ :href => "http://google.com.br", :target => "_blank" }
+        Account
+  .container
+    .tabbed
+      %ul.nav
+        %li.active{ :style => "width:33.33%" }
+          %a First
+        %li{ :style => "width:33.33%" }
+          %a Middle
+        %li{ :style => "width:33.33%" }
+          %a Last
+      .container.no-bottom-margin
+        Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+
+.tabbed
+  %ul.nav
+    %li{ :style => "width:33.33%" }
+      %a Profile
+    %li.active{ :style => "width:33.33%" }
+      %a Account
+    %li{ :style => "width:33.33%" }
+      %a.no-padding
+        %span
+          %i.icon-test{ :style => "background-image: url('http://www.condorapartments.com.au/img/icon-bank.png')" }
+          Payment History
+      
+  .container
+    Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+
+.tabbed
+  
+  %ul.nav
+    %li{ :style => "width: 50%" }
+      %a Profile
+    %li.active{ :style => "width: 50%" }
+      %a Account
+  .container
+    Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+

data/sandbox/app/views/ui_library/index.html.haml

@@ -0,0 +1,300 @@
+%div{ :style => "margin-bottom: 20px" }
+  = link_to "Base CSS", "/"
+  = ' | '
+  = link_to "Components", "/components"
+
+.grid
+  .grid-item{ :style => "width:640px" }
+    %h3 Titles
+    %h1 H1 Lorem ipsum dolor sit amet
+    %h2 H2 Lorem ipsum dolor sit amet
+    %h3 H3 Lorem ipsum dolor sit amet
+    %h4 H4 Lorem ipsum dolor sit amet
+    %h5 H5 Lorem ipsum dolor sit amet
+    %h6 H6 Lorem ipsum dolor sit amet
+
+    %h3 Titles With No Bottom Margin
+    .element-spacing
+      %h1.no-bottom-margin H1 Lorem ipsum dolor sit amet
+      %h2.no-bottom-margin H2 Lorem ipsum dolor sit amet
+      %h3.no-bottom-margin H3 Lorem ipsum dolor sit amet
+      %h4.no-bottom-margin H4 Lorem ipsum dolor sit amet
+      %h5.no-bottom-margin H5 Lorem ipsum dolor sit amet
+      %h6.no-bottom-margin H6 Lorem ipsum dolor sit amet
+
+    %h3 Leading Body Texts
+
+    %img.responsive{ :src => "http://kaluuja.files.wordpress.com/2010/08/vector_wallpaper_by_seppoftw.jpg" }
+
+    %p.lead
+      Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Integer <em>posuere erat</em> a ante venenatis dapibus posuere <strong>velit aliquet</strong>.
+
+  .grid-item-right{ :style => "width:200px" }
+    %h3 Titles in a Box
+    .wrapper.b10
+
+      %h1 H1 Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+      %h2 H2 Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+      %h3 H3 Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+      %h4 H4 Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+      %h5 H5 Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+      %h6 H6 Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+
+%h3 Paragraphs
+
+%p
+  Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
+
+%hr
+
+%p
+  Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper.
+
+%p
+  Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui.
+
+.auto-clear
+  %h3 Paragraphs with Blocks
+
+  .floating-right
+    .box-model{ :style => "background: #CCC;width:200px;height:200px" }
+    
+
+  %p
+    Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
+
+  %p
+    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper.
+
+  .floating-left
+    .box-model{ :style => "background: #CCC;width:200px;height:200px" }
+
+  %p
+    Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
+
+  %p
+    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper.
+
+%h3
+  Grid
+
+.grid
+  .grid-item.b10
+    %h1 B10
+    %p
+      Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui.
+  .grid-item.b21
+    %h1 Fixed B21
+    %p
+      Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui.
+  .grid-item.b10
+    %h1 B10
+    %p
+      Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui.
+
+%h3
+  Quotes
+
+%blockquote
+  %p
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
+  %small
+    Someone famous in Body of work
+
+%h3
+  Lists
+
+.grid
+  .grid-item.b15
+    %h4 Unordered
+    %ul
+      %li Maecenas faucibus mollis interdum.
+      %li Maecenas faucibus mollis interdum.
+      %li Maecenas faucibus mollis interdum.
+      %li Maecenas faucibus mollis interdum.
+      %li Maecenas faucibus mollis interdum.
+      %li
+        Maecenas faucibus mollis interdum.
+        %ul
+          %li Maecenas faucibus mollis interdum.
+          %li Maecenas faucibus mollis interdum.
+          %li Maecenas faucibus mollis interdum.
+          %li Maecenas faucibus mollis interdum.
+      %li Maecenas faucibus mollis interdum.
+      %li Maecenas faucibus mollis interdum.
+
+  .grid-item.b13
+    %h4 Unstyled
+    %ul.rip
+      %li Maecenas faucibus mollis interdum.
+      %li Maecenas faucibus mollis interdum.
+      %li Maecenas faucibus mollis interdum.
+      %li Maecenas faucibus mollis interdum.
+      %li Maecenas faucibus mollis interdum.
+      %li
+        Maecenas faucibus mollis interdum.
+        %ul
+          %li Maecenas faucibus mollis interdum.
+          %li Maecenas faucibus mollis interdum.
+          %li Maecenas faucibus mollis interdum.
+          %li Maecenas faucibus mollis interdum.
+      %li Maecenas faucibus mollis interdum.
+      %li Maecenas faucibus mollis interdum.
+
+  .grid-item.b13
+    %h4 Ordered
+    %ol
+      %li Maecenas faucibus mollis interdum.
+      %li Maecenas faucibus mollis interdum.
+      %li Maecenas faucibus mollis interdum.
+      %li Maecenas faucibus mollis interdum.
+      %li Maecenas faucibus mollis interdum.
+      %li Maecenas faucibus mollis interdum.
+
+%h3
+  Code
+
+%pre{ :class => "prettyprint linenums:97 linenums" }
+  &lt;p&gt;Sample text here...&lt;/p&gt;
+  &lt;p&gt;Sample text here...&lt;/p&gt;
+  &lt;p&gt;Sample text here...&lt;/p&gt;
+  &lt;p&gt;Sample text here...&lt;/p&gt;
+
+%pre{ :class => "prettyprint linenums:1 linenums" }
+  :plain
+    def sum( a, b )
+      a + b
+    end
+
+%p
+  Etiam porta sem malesuada
+  %code magna
+  mollis euismod.
+
+%h3 Description Lists
+.grid
+  .grid-item.b14
+    %dl
+      %dt Description Lists
+      %dd A description list is perfect for defining terms.
+      %dt Euismod
+      %dd Vestibulum id ligula porta felis euismod semper.
+  .grid-item.b18
+    %dl.dl-horizontal
+      %dt Description Lists
+      %dd A description list is perfect for defining terms.
+      %dt Euismod
+      %dd Vestibulum id ligula porta felis euismod semper.
+
+%h3 Tables
+
+%table.table-stripping.table-highlighting
+  %thead
+    %tr
+      %th.tar #
+      %th First Name
+      %th Last name
+      %th Username
+  %tbody
+    %tr
+      %td.tar 1
+      %td Patrick
+      %td Negri
+      %td pnegri
+    %tr
+      %td.tar 2
+      %td Marcelo
+      %td Paez
+      %td paezao
+    %tr
+      %td.tar 3
+      %td Alexandre
+      %td Paez
+      %td alepaez
+
+%table.table-highlighting
+  %thead
+    %tr
+      %th.tar #
+      %th First Name
+      %th Last name
+      %th Username
+  %tbody
+    %tr
+      %td.tar 1
+      %td Patrick
+      %td Negri
+      %td pnegri
+    %tr
+      %td.tar 2
+      %td Marcelo
+      %td Paez
+      %td paezao
+    %tr
+      %td.tar 3
+      %td Alexandre
+      %td Paez
+      %td alepaez
+
+%h3.no-bottom-margin
+  Boxes
+%h6 Box, Box-Highlighting &amp; Box-Rounded
+
+.grid
+  .grid-item.b21
+    .box.box-highlighting
+      %img.responsive.no-bottom-margin{ :src => "http://placehold.it/400x400" }
+  .grid-item.b21
+    .box.box-highlighting
+      %img.responsive.no-bottom-margin{ :src => "http://placehold.it/400x400" }
+  .grid-item.b21
+    .box.box-highlighting
+      %img.responsive.no-bottom-margin{ :src => "http://placehold.it/400x400" }
+  .grid-item.b21
+    .box.box-highlighting
+      %img.responsive.no-bottom-margin{ :src => "http://placehold.it/400x400" }
+
+.grid
+  .grid-item.b21
+    .box.box-highlighting.box-rounded
+      %img.responsive.no-bottom-margin{ :src => "http://placehold.it/400x400" }
+  .grid-item.b21
+    .box.box-highlighting.box-rounded
+      %img.responsive.no-bottom-margin{ :src => "http://placehold.it/400x400" }
+  .grid-item.b21
+    .box.box-highlighting.box-rounded
+      %img.responsive.no-bottom-margin{ :src => "http://placehold.it/400x400" }
+  .grid-item.b21
+    .box.box-highlighting.box-rounded
+      %img.responsive.no-bottom-margin{ :src => "http://placehold.it/400x400" }
+
+%h3
+  Grid System
+
+.element-spacing
+  .grid
+    .grid-item
+      .box{ :style => "width:200px;height:200px" }
+        %img.responsive.no-bottom-margin{ :src => "http://placehold.it/200x200" }
+    .grid-item
+      .box{ :style => "width:200px;height:200px" }
+        %img.responsive.no-bottom-margin{ :src => "http://placehold.it/200x200" }
+    .grid-item
+      .box{ :style => "width:200px;height:200px" }
+        %img.responsive.no-bottom-margin{ :src => "http://placehold.it/200x200" }
+    .grid-item
+      .box{ :style => "width:200px;height:200px" }
+        %img.responsive.no-bottom-margin{ :src => "http://placehold.it/200x200" }
+    .grid-item
+      .box{ :style => "width:200px;height:200px" }
+        %img.responsive.no-bottom-margin{ :src => "http://placehold.it/200x200" }
+    .grid-item
+      .box{ :style => "width:200px;height:200px" }
+        %img.responsive.no-bottom-margin{ :src => "http://placehold.it/200x200" }
+
+%h3
+  Borderless Buttons
+
+.element-spacing
+  %button.borderless
+    &times;