express_ui 0.1.0.rc1

data/app/assets/stylesheets/express_ui/templates/_content_sidebar.sass

@@ -0,0 +1,31 @@
+.ae-template-content-sidebar
+  @include sidebar(15%)
+  display: flex
+  flex-flow: row nowrap
+  align-items: stretch
+  max-width: 100%
+
+  .ae-sidebar-left
+    height: auto
+    overflow: visible
+
+  .ae-content
+    padding: $container-padding*2 $container-padding*4
+    width: $container
+
+.ae-template-content-sidebar-fixed
+  @include sidebar-fixed(15%)
+  display: flex
+  flex-flow: row nowrap
+  align-items: stretch
+  max-width: 100%
+  height: 100%
+
+  .ae-sidebar-left
+    position: fixed
+    height: 100%
+
+  .ae-content
+    position: absolute
+    padding: $container-padding*2 $container-padding*4
+    right: $container-padding*4

data/app/assets/stylesheets/express_ui/templates/_full_width.sass

@@ -0,0 +1,5 @@
+.ae-template-full-width
+  .ae-content
+    @include laptop-max
+      padding-left: $container-padding*4
+      padding-right: $container-padding*4

data/app/assets/stylesheets/express_ui/templates/_half_width.sass

@@ -0,0 +1,8 @@
+.ae-template-half-width
+  .ae-content
+    @include laptop-max
+      padding-left: $container-padding*4
+      padding-right: $container-padding*4
+  .ae-container
+    @include tablet
+      width: 50%

data/app/assets/stylesheets/express_ui/templates/_master_detail.sass

@@ -0,0 +1,50 @@
+@mixin sidebar-right($width)
+  .ae-content
+    right: $width
+
+  .ae-sidebar-right
+    width: $width
+
+.ae-template-master-detail
+  @include sidebar(15%)
+  @include sidebar-right(30%)
+  display: flex
+  flex-flow: row nowrap
+  align-items: stretch
+  max-width: 100%
+
+  .ae-sidebar-left
+    height: auto
+    overflow: visible
+
+  .ae-sidebar-right
+    @include container-table-cell
+    height: 100%
+    right: 0
+    position: absolute
+
+  .ae-content
+    padding: $container-padding $container-padding*4
+    width: $container
+
+.ae-template-master-detail-fixed
+  @include sidebar-right(30%)
+  @include sidebar-fixed(15%)
+  display: flex
+  flex-flow: row nowrap
+  align-items: stretch
+  max-width: 100%
+  height: 100%
+
+  .ae-sidebar-left
+    position: fixed
+    height: 100%
+
+  .ae-sidebar-right
+    position: fixed
+    height: 100%
+    right: 0
+
+  .ae-content
+    position: absolute
+    padding: $container-padding $container-padding*4

data/app/components/code_demo.rb

@@ -0,0 +1,31 @@
+class CodeDemo < ExpressTemplates::Components::Container
+
+  before_build -> {
+    set_attribute(:class, 'ae-demo-container')
+  }
+
+  contains -> (&block) {
+    ul(class: 'ae-tabs') {
+      li(class: 'ae-tab active-tab', 'data-tab' => 'input'){
+        "Input"
+      }
+      li(class: 'ae-tab', 'data-tab' => 'output'){
+        "Output"
+      }
+    }
+
+    div(id: 'input', class: 'ae-tab-content active-tab'){
+      highlight_code_block {
+        block.call
+      }
+    }
+
+    div(id: 'output', class: 'ae-tab-content'){
+      div(class: 'demo-container'){
+        eval block.call.html_safe
+      }
+    }
+  }
+end
+
+

data/app/controllers/express_ui/about_controller.rb

@@ -0,0 +1,10 @@
+require_dependency "express_ui/application_controller"
+
+module ExpressUi
+  class AboutController < ApplicationController
+    layout "express_ui/styleguide"
+
+    def index
+    end
+  end
+end

data/app/controllers/express_ui/application_controller.rb

@@ -0,0 +1,5 @@
+module ExpressUi
+  class ApplicationController < ActionController::Base
+    protect_from_forgery with: :exception
+  end
+end

data/app/controllers/express_ui/styleguide_controller.rb

@@ -0,0 +1,10 @@
+require_dependency "express_ui/application_controller"
+
+module ExpressUi
+  class StyleguideController < ApplicationController
+    layout "express_ui/styleguide"
+
+    def index
+    end
+  end
+end

data/app/controllers/express_ui/templates_controller.rb

@@ -0,0 +1,26 @@
+require_dependency "express_ui/application_controller"
+
+module ExpressUi
+  class TemplatesController < ApplicationController
+    layout "express_ui/styleguide"
+
+    def master_detail_scroll
+    end
+
+    def master_detail_fixed
+    end
+
+    def content_and_sidebar
+    end
+
+    def content_and_sidebar_fixed
+    end
+
+    def half_width
+    end
+
+    def full_width
+    end
+
+  end
+end

data/app/controllers/express_ui/uicomponents_controller.rb

@@ -0,0 +1,26 @@
+require_dependency "express_ui/application_controller"
+
+module ExpressUi
+  class UicomponentsController < ApplicationController
+    layout "express_ui/styleguide"
+
+    def index
+    end
+
+    def master_detail_scroll
+    end
+
+    def master_detail_fixed
+    end
+
+    def content_and_sidebar
+    end
+
+    def half_width
+    end
+
+    def full_width
+    end
+
+  end
+end

data/app/helpers/express_ui/application_helper.rb

@@ -0,0 +1,28 @@
+module ExpressUi
+  module ApplicationHelper
+
+    def nav_link_to(text, path)
+      class_name = current_page?(path) ? 'ae-nav-item active' : 'ae-nav-item'
+
+      content_tag :li, class: class_name do
+        link_to text, path
+      end
+    end
+
+    def highlight_code_block(&block)
+      code_block = capture(&block)
+
+      code_block_in_code_element = code_block_in_code_element(code_block)
+
+      content_tag :pre do
+        code_block_in_code_element
+      end
+    end
+
+    def code_block_in_code_element(code_block)
+      content_tag :code, class: "ae-code-block prettyprint" do
+        code_block.strip_heredoc.html_safe
+      end
+    end
+  end
+end

data/app/jobs/express_ui/application_job.rb

@@ -0,0 +1,4 @@
+module ExpressUi
+  class ApplicationJob < ActiveJob::Base
+  end
+end

data/app/mailers/express_ui/application_mailer.rb

@@ -0,0 +1,6 @@
+module ExpressUi
+  class ApplicationMailer < ActionMailer::Base
+    default from: 'from@example.com'
+    layout 'mailer'
+  end
+end

data/app/models/express_ui/application_record.rb

@@ -0,0 +1,5 @@
+module ExpressUi
+  class ApplicationRecord < ActiveRecord::Base
+    self.abstract_class = true
+  end
+end

data/app/views/express_ui/atoms/_animations.html.erb

@@ -0,0 +1,33 @@
+<section>
+<p>Hover states using CSS animations</p>
+
+<button class="ae-btn ae-fade-in">Fade In</button>
+<button class="ae-btn ae-fade-out">Fade Out</button>
+<button class="ae-btn ae-ease-in-out">Ease In Out (Button Hover)</button>
+
+<table>
+  <thead>
+    <th>Animation</th>
+    <th>Class</th>
+    <th>Usage</th>
+  </thead>
+  <tbody>
+    <tr>
+        <td>Fade In</td>
+        <td><code>.ae-fade-in</code></td>
+        <td>Show element</td>
+    </tr>
+    <tr>
+        <td>Fade Out</td>
+        <td><code>.ae-fade-out</code></td>
+        <td>Hide element</td>
+    </tr>
+    <tr>
+        <td>Ease In Out</td>
+        <td><code>.ae-ease-in-out</code></td>
+        <td>Easing in and out <br /><small>Automatically applied to buttons and image links</small></td>
+    </tr>
+
+  </tbody>
+</table>
+</section>

data/app/views/express_ui/atoms/_buttons.html.erb

@@ -0,0 +1,129 @@
+<section>
+<p>Required. Buttons require the <code>ae-btn</code> class and <code>type="button"</code> attribute.</p>
+
+<h4>Button Sizes</h4>
+<table>
+  <thead>
+    <th>Size</th>
+    <th>Demo</th>
+    <th>Usage</th>
+  </thead>
+  <tbody>
+    <tr>
+        <td>Small</td>
+        <td><button type="button" class="ae-btn ae-btn-sm">Small</button></td>
+        <td><code>.ae-btn-sm</code></td>
+    </tr>
+    <tr>
+        <td>Medium</td>
+        <td><button type="button" class="ae-btn ae-btn-md">Medium</button></td>
+        <td><code>.ae-btn-md</code></td>
+    </tr>
+    <tr>
+        <td>Large</td>
+        <td><button type="button" class="ae-btn ae-btn-lg">Large</button></td>
+        <td><code>.ae-btn-lg</code></td>
+
+    </tr>
+  </tbody>
+</table>
+
+<h4>Button States</h4>
+<table>
+  <thead>
+    <th>State</th>
+    <th>Demo</th>
+  </thead>
+  <tbody>
+    <tr>
+        <td>Default</td>
+        <td><button type="button" class="ae-btn">Default</button></td>
+    </tr>
+    <tr>
+        <td>Hover</td>
+        <td><button type="button" class="ae-btn ae-btn-hover">Hover</button></td>
+    </tr>
+    <tr>
+        <td>Active</td>
+        <td><button type="button" class="ae-btn ae-btn-active">Active</button></td>
+    </tr>
+    <tr>
+        <td>Focus</td>
+        <td><button type="button" class="ae-btn ae-btn-focus">Focus</button></td>
+    </tr>
+  </tbody>
+</table>
+
+<h4>Button Styles</h4>
+<table>
+  <thead>
+    <th>Name</th>
+    <th>Demo</th>
+    <th>Usage</th>
+    <th>Notes</th>
+  </thead>
+  <tbody>
+    <tr>
+        <td>Default</td>
+        <td><button type="button" class="ae-btn">Default</button></td>
+        <td><code>.ae-btn-default</code></td>
+        <td>Actions</td>
+    </tr>
+    <tr>
+        <td>Primary</td>
+        <td><button type="button" class="ae-btn ae-btn-primary">Primary</button></td>
+        <td><code>.ae-btn-primary</code></td>
+        <td>Primary actions</td>
+    </tr>
+    <tr>
+        <td>Secondary</td>
+        <td><button type="button" class="ae-btn ae-btn-secondary">Secondary</button></td>
+        <td><code>.ae-btn-secondary</code></td>
+        <td>Secondary actions</td>
+    </tr>
+
+    <tr>
+        <td>Border</td>
+        <td><button type="button" class="ae-btn ae-btn-primary ae-btn-border">Primary Bordered</button><button type="button" class="ae-btn ae-btn-secondary ae-btn-border">Secondary Bordered</button>
+</td>
+        <td><code>.ae-btn-border</code></td>
+        <td>Adds border to actions</td>
+    </tr>
+    <tr>
+        <td>Disabled</td>
+        <td><button type="button" class="ae-btn ae-btn-disabled" disabled="disabled">Disabled</button></td>
+        <td><code>.ae-btn-disabled</code></td>
+        <td>Requires <code>disabled="disabled"</code> attribute</td>
+    </tr>
+    <tr>
+        <td>Success</td>
+        <td><button type="button" class="ae-btn ae-btn-success">Submit</button></td>
+        <td><code>.ae-btn-success</code></td>
+        <td>Submit, confirm</td>
+    </tr>
+    <tr>
+        <td>Danger</td>
+        <td><button type="button" class="ae-btn ae-btn-danger">Delete</button></td>
+        <td><code>.ae-btn-danger</code></td>
+        <td>Delete, cancel, remove</td>
+    </tr>
+
+  </tbody>
+</table>
+
+
+<p>Buttons can have a badge count. </p>
+
+<button type="button" class="ae-btn ae-btn-default">Notification <span class="ae-badge ae-badge-success">10</span></button>
+
+<p>You can also apply button styles for <code>&lt;input&gt;</code> and <code>&lt;a href="#"&gt;&lt;/a&gt;</code>.</p>
+
+
+<input type="submit" class="ae-btn ae-btn-default ae-btn-md" value="I'm a button"></button>
+<a href="#" class="ae-btn ae-btn-default ae-btn-md" title="Take me to this link">I'm a link</a>
+
+
+<p>To use two or more buttons in a group, see <a href="#ae-button-groups">Button Groups</a>.</p>
+
+</section>
+

data/app/views/express_ui/atoms/_headings.html.erb

@@ -0,0 +1,3 @@
+<section>
+<p>See this section's heading for a sample of styled headings. Headings can be styled by adding an <code>.ae-heading-bottom-border</code> class. This adds a bottom border separator and uppercase text transform.</p>
+</section>

data/app/views/express_ui/atoms/_icons.html.erb

@@ -0,0 +1,13 @@
+<section>
+  <p>ExpressUI uses the Font Awesome icon library via the <code>font-awesome-sass</code> gem.</p>
+  <p>Font Awesome classes are used with the <code>&lt;i&gt;&lt;/i&gt;</code> element. The <code>.fa</code> class is required. Optionally, icon size can be controlled using font size multiplier classes <code>fa-2x</code>, <code>fa-3x</code>, or <code>fa-4x</code>.</p>
+
+  <%= highlight_code_block do %>
+    <%= "<i class=\"fa fa-chevron-right\"></i>" %>
+    <%= "<i class=\"fa fa-chevron-right fa-2x\"></i>" %>
+    <%= "<i class=\"fa fa-chevron-right fa-3x\"></i>" %>
+    <%= "<i class=\"fa fa-chevron-right fa-4x\"></i>" %>
+  <% end %>
+
+  <p>For complete usage instructions, see the official Font Awesome documentation at <a href="http://fontawesome.io/icons/" title="Go to Font Awesome">http://fontawesome.io/icons</a>.</p>
+</section>