express_ui 0.1.0.rc1

data/app/views/express_ui/molecules/_table_with_filtering.html.erb

@@ -0,0 +1,55 @@
+  <div class="ae-table-responsive">
+    <div class="ae-table-filter">
+      <div class="ae-filter">
+        <%= render "express_ui/molecules/form_group_single_line" %>
+      </div>
+      <div class="ae-filter">
+        <%= render "express_ui/molecules/forms_radio" %>
+      </div>
+      <div class="ae-filter">
+        <%= render "express_ui/molecules/forms_select" %>
+      </div>
+      <div class="ae-filter">
+        <a href="#" title="Reset">×</a>
+      </div>
+    </div>
+    <table>
+      <thead>
+        <th><a href="#" title="created_at">Created At </a></th>
+        <th width="30%"><a href="#" title="address">Address</a></th>
+        <th><a href="#" title="contract_effective_date">Contract Effective Date </a></th>
+        <th><a href="#" title="closing_date">Closing Date</a></th>
+        <th><a href="#" title="owner">Owner</a></th>
+        <th><a href="#" title="creation_step">Creation Step</a></th>
+        <th><a href="#" title="paid">Paid</a></th>
+        <th width="15%"><a href="#" title="action">Actions</a></th>
+      </thead>
+      <tbody>
+        <tr>
+          <td>January 07, 2016  </td>
+          <td><a href="#">658 NW 9th Ct, Boca Raton, FL 33486, USA</a></td>
+          <td>January 07, 2016  </td>
+          <td>January 29, 2016  </td>
+          <td></td>
+          <td>step_2</td>
+          <td>false</td>
+          <td><button type="button" value="Delete" class="ae-btn ae-btn-danger">Delete</button></td>
+        </tr>
+        <tr>
+          <td>January 07, 2016  </td>
+          <td><a href="#">2714 Southern Parkway West</a></td>
+          <td>January 07, 2016  </td>
+          <td>January 29, 2016  </td>
+          <td></td>
+          <td>step_2</td>
+          <td>false</td>
+          <td><a href="#">View</a></td>
+        </tr>
+        <tr>
+          <td>Small Office</td>
+          <td>Top Producer</td>
+          <td>$1,299.00</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>

data/app/views/express_ui/organisms/_header.html.erb

@@ -0,0 +1,24 @@
+<section>
+<p>Contains the logo, <code>&lt;nav&gt;</code> menu, and other auxiliary menus. Scroll to the top of this page to see <code>&lt;header&gt;</code> in action. </p>
+
+<table>
+	<thead>
+		<th>Header Usage</th>
+		<th>Usage</th>
+		<th>Notes</th>
+	</thead>
+	<tbody>
+	<tr>
+		<td>Default</td>
+		<td></td>
+		<td><p>The default <code>&lt;header&gt;</code> is used in this page.</p></td>
+	</tr>
+	<tr>
+		<td>Fixed</td>
+		<td><code>.ae-header-fixed</code> </td>
+		<td><p>Add this class to make the <code>&lt;header&gt;</code> stick to the top of the window as the user scrolls.</p></td>
+	</tr>
+	</tbody>
+</table>
+
+</section>

data/app/views/express_ui/shared/_header.html.erb

@@ -0,0 +1,10 @@
+<header class="ae-header-fixed">
+  <a href="#" title="ExpressUI" class="ae-logo"><%= image_tag("ExpressUI_logo.png", :alt => "Express UI", :width => "120") %></a>
+  <nav class="ae-nav-main main-nav ae-nav-right">
+    <ul class="ae-list-inline">
+      <%= nav_link_to 'About Express UI', about_path %>
+      <%= nav_link_to 'Style Guide', styleguide_url %>
+      <%= nav_link_to 'UI Components', uicomponents_path %>
+    </ul>
+  </nav>
+</header>

data/app/views/express_ui/shared/_search_box.html.erb

@@ -0,0 +1,6 @@
+<form class="ae-form-single ae-search-form">
+  <div class="ae-form-field ae-has-icon">
+    <i class="fa fa-search"></i>
+    <input class="ae-text-field ae-input-md" type="text" name="search"  placeholder="Enter a search keyword" id="ae-search-box" />
+  </div>
+</form>

data/app/views/express_ui/shared/_sidebar_left.html.erb

@@ -0,0 +1,4 @@
+<div class="ae-sidebar sidebar ae-sidebar-left ae-sidebar-has-icons">
+	<nav class="anchorific js-ae-sidebar"></nav>
+</div>
+

data/app/views/express_ui/shared/_sidebar_right.html.erb

@@ -0,0 +1,5 @@
+<div class="ae-sidebar sidebar ae-sidebar-right">
+  <h2>Form Title</h2>
+  <%= render "express_ui/molecules/form_group_horizontal" %>
+</div>
+

data/app/views/express_ui/styleguide/about.html.erb

@@ -0,0 +1,22 @@
+<%= render "express_ui/shared/header" %>
+<div class="ae-template-full-width">
+  <div class="ae-container">
+    <div class="ae-content content">
+
+     <h1>About Express UI</h1>
+
+    <p>Devs and designers alike are often plagued with these dilemmas:</p>
+    <p>Developers: I need to add two buttons, “Save” and “Cancel”. But I don’t want to have to think how to style it so I can focus on other things like validation.”</p>
+    <p>Designers: I have two buttons, “Save” and “Cancel”. I already mocked up these buttons in Sketch, where should I write the CSS for it? How should I hand it off to the Dev?</p>
+    <p>Express UI is a collection of ready-made components for quickly designing up AppExpress web apps. This system builds on Brad Frost’s Atomic Design concept. ExpressDesign helps take some burden off developers and designers by avoiding styling repetitions and inconsistencies.</p>
+    <p>We’ve written this guide to be super human-readable, so you should find it relatively easy to search for what you need. Use the search bar above (or just hit Cmd + F anywhere within the page) to find components, classes, HTML tags, and see implementation guidelines</p>
+
+    <h3>Dependencies</h3>
+    <p>(List Dependencies)</p>
+    <h3>Related Reading</h3>
+     https://administrate-prototype.herokuapp.com/admin/products?direction=asc&order=description&search=ker-plunk
+    <div class="ae-btn-group ae-btn-group-right">
+    <%= link_to 'Style Guide &raquo;'.html_safe, styleguide_path, class: 'ae-btn ae-btn-primary ae-btn-md' %>
+    </div>
+  </div>
+</div>

data/app/views/express_ui/styleguide/index.html.erb

@@ -0,0 +1,79 @@
+<%= render "express_ui/shared/header" %>
+<div class="ae-template-content-sidebar-fixed">
+  <%= render "express_ui/shared/sidebar_left" %>
+
+  <div class="ae-content content">
+
+    <%= render "express_ui/shared/search_box" %>
+
+    <h1>Style Guide</h1>
+
+    <div class="js-anchorific-content">
+      <h2>Atoms</h2>
+      <ul>
+        <li><h3>Global Settings</h3>
+          <%#= render "express_ui/atoms/variables" %>
+          <%= render "express_ui/atoms/mixins" %>
+        </li>
+        <li>
+          <h3>Animation</h3>
+          <%= render "express_ui/atoms/animations" %>
+        </li>
+        <li><h3>Avatar</h3></li>
+        <li><h3>Button</h3>
+          <%= render "express_ui/atoms/buttons" %>
+        </li>
+        <!-- <li><h3>Image</h3></li> -->
+        <li>
+          <h3>Typography</h3>
+          <%= render "express_ui/atoms/typography" %>
+        </li>
+        <!-- <li><h3>Video</h3></li> -->
+      </ul>
+
+      <h2>Molecules</h2>
+      <ul>
+        <li><h3>App Store Badges</h3></li>
+        <li><h3>Button Group</h3>
+          <%= render "express_ui/molecules/button_group" %>
+        </li>
+        <li><h3>Container</h3>
+          <%= render "express_ui/molecules/container" %>
+        </li>
+        <li><h3>Flash Messages</h3>
+          <%= render "express_ui/molecules/flash_messages" %>
+        </li>
+        <li><h3>Forms</h3>
+          <%= render "express_ui/molecules/forms" %>
+        </li>
+        <li><h3>Form Groups</h3>
+          <%= render "express_ui/molecules/form_groups" %>
+        </li>
+        <li><h3>Lists</h3></li>
+        <li><h3>Nav</h3>
+          <%= render "express_ui/molecules/nav" %>
+        </li>
+        <li><h3>Table</h3>
+          <%= render "express_ui/molecules/table" %>
+        </li>
+        <li><h3>Tooltip</h3></li>
+      </ul>
+
+      <h2>Organisms</h2>
+
+      <h2>Pagination</h2>
+      <ul>
+        <li>Dialog</li>
+        <li> <h3>Header</h3>
+          <%= render "express_ui/organisms/header" %>
+        </li>
+        <li><h3>Footer</h3></li>
+      </ul>
+
+      <h2>Templates</h2>
+      <ul>
+        <li> <%= render "express_ui/templates/templates" %> <li>
+      </ul>
+    </div>
+  </div>
+</div>

data/app/views/express_ui/templates/_header.html.erb

@@ -0,0 +1,15 @@
+<section>
+<header>
+  <a href="#" title="ExpressUI" class="ae-logo"><%= image_tag("ExpressUI_logo.png", :alt => "Express UI", :width => "120") %></a>
+  <nav class="ae-nav-main">
+    <ul class="ae-list-inline ae-nav-left">
+      <li class="ae-nav-item"><a href="#">Manage (Mega Menu)</a></li>
+      <li class="ae-nav-item"><a href="#">View Site</a></li>
+    </ul>
+    <ul class="ae-list-inline ae-nav-right">
+      <li class="ae-nav-item"><a href="#">Profile</a></li>
+      <li class="ae-nav-item"><a href="#">Log Out</a></li>
+    </ul>
+  </nav>
+</header>
+</section>

data/app/views/express_ui/templates/_templates.html.erb

@@ -0,0 +1,57 @@
+<section>
+  <p>All templates consist of a <code>&lt;header&gt;&lt;/header&gt;</code> and <code>&lt;footer&gt;&lt;/footer&gt;</code>.</p>
+
+  <%= highlight_code_block do %>
+    <%= "<header></header>" %>
+    <%= "<div class=\"{template class}\">" %>
+      <%= "<div class=\"ae-container\">" %>
+        <%= "<div class=\"ae-content\">" %>
+          <%= " {Content}" %>
+        <%= "</div>" %>
+      <%= "</div>" %>
+    <%= "</div>" %>
+    <%= "<footer></footer>" %>
+  <% end %>
+  <table>
+    <thead>
+      <th>Template Name</th>
+      <th>Variations</th>
+      <th>Usage</th>
+      <th>Demo</th>
+    </thead>
+    <tbody>
+    <tr>
+      <td>Full-width</th>
+      <td>-</td>
+      <td><code>.ae-template-full-width</code></td>
+      <td><a href=<%= ui_components_templates_full_width_path%>>View Sample</a></td>
+    </tr>
+    <tr>
+      <td>Half-width</th>
+      <td>-</td>
+      <td><code>.ae-template-half-width</code></td>
+      <td><a href=<%=ui_components_templates_half_width_path%>>View Sample</a></td>
+    </tr>
+    <tr>
+      <td>Content and sidebar</td>
+      <td>Scroll<br />Fixed </td>
+      <td>
+        <code>.ae-template-content-sidebar</code><br/>
+        <code>.ae-template-content-sidebar-fixed</code></td>
+      <td>
+        <a href=<%= ui_components_templates_content_and_sidebar_path %>>View Sample</a>
+        <br /><a href=<%= ui_components_templates_content_and_sidebar_fixed_path%>>View Sample</a></td>
+    </tr>
+    <tr>
+      <td>Master-detail</td>
+      <td>Scroll<br />Fixed</td>
+      <td><code>.ae-template-master-detail</code><br/><code>.ae-template-master-detail-fixed</code></td>
+
+      <td><a href=<%= ui_components_templates_master_detail_path %>>View Sample</a><br /><a href=<%= ui_components_templates_master_detail_fixed_path %>>View Sample</a></td>
+    </tr>
+    </tbody>
+  </table>
+
+  <p>The master-detail template implementation on mobile is slightly different. The sidebar degrades into a pop-up whenever it's triggered.</p>
+
+</section>

data/app/views/express_ui/templates/content_and_sidebar.html.erb

@@ -0,0 +1,32 @@
+<%= render "express_ui/shared/header" %>
+<div class="ae-template-content-sidebar">
+
+  <div class="ae-sidebar sidebar ae-sidebar-left">
+    <nav><a href="#">{Sidebar Menu}</a></nav>
+  </div>
+
+  <div class="ae-content content">
+
+    <h1>This is a content and sidebar layout</h1>
+
+    <%= highlight_code_block do %>
+    <%= "<header></header>" %>
+    <%= "<div class=\"ae-template-content-sidebar\">" %>
+      <%= "<div class=\"ae-sidebar ae-sidebar-left\">" %>
+        <%= "<nav>" %>
+          <%= "{Sidebar Menu}" %>
+        <%= "</nav>" %>
+      <%= "</div>" %>
+      <%= "<div class=\"ae-content\">" %>
+        <%= "{Content}" %>
+      <%= "</div>" %>
+    <%= "</div>" %>
+    <%= "<footer></footer>" %>
+    <% end %>
+
+    <div class="ae-btn-group ae-btn-group-left">
+    <%= link_to '&laquo; Back'.html_safe, styleguide_path, class: 'ae-btn ae-btn-primary ae-btn-md' %>
+    </div>
+
+  </div>
+</div>

data/app/views/express_ui/templates/content_and_sidebar_fixed.html.erb

@@ -0,0 +1,34 @@
+<%= render "express_ui/shared/header" %>
+<div class="ae-template-content-sidebar-fixed">
+
+  <div class="ae-sidebar ae-sidebar-left">
+    <nav><a href="#">{Sidebar Menu}</a></nav>
+  </div>
+
+  <div class="ae-content content">
+
+    <h1>This is a content and fixed sidebar layout</h1>
+
+    <%= highlight_code_block do %>
+    <%= "<header></header>" %>
+    <%= "<div class=\"ae-template-content-sidebar-fixed\">" %>
+      <%= "<div class=\"ae-sidebar ae-sidebar-left\">" %>
+        <%= "<nav>" %>
+          <%= "{Sidebar Menu}" %>
+        <%= "</nav>" %>
+      <%= "</div>" %>
+      <%= "<div class=\"ae-content\">" %>
+        <%= "{Content}" %>
+      <%= "</div>" %>
+    <%= "</div>" %>
+    <%= "<footer></footer>" %>
+    <% end %>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultricies orci eu dui sollicitudin suscipit. Suspendisse potenti. Proin vitae vestibulum purus. Curabitur id purus imperdiet, suscipit nibh sit amet, vulputate nisi. Nullam euismod urna in diam tempor, vel faucibus dolor posuere. Aenean euismod elit mauris, vulputate mollis risus iaculis non. Aliquam ultricies velit sapien, et fermentum dui semper vel. Fusce tincidunt dui ac nibh commodo facilisis. Vivamus rutrum vulputate felis, eu finibus quam congue ac. In hac habitasse platea dictumst. Proin fermentum tortor ante, vel ultrices enim lobortis aliquam. Vivamus vel leo viverra, semper est aliquam, volutpat erat. Sed libero metus, interdum et elit in, tincidunt hendrerit erat.</p>
+    <p>Fusce malesuada urna in sodales eleifend. Proin sapien justo, pretium iaculis feugiat condimentum, accumsan a dolor. Vivamus quis lobortis tellus, non posuere arcu. Nullam cursus eget ligula sit amet gravida. Fusce at lectus ut nibh pellentesque bibendum pulvinar at est. Suspendisse nec porta enim, quis aliquam ex. Nulla ut purus commodo, gravida ligula quis, bibendum nulla. Donec dui nulla, condimentum a euismod sit amet, efficitur in felis. Praesent sollicitudin pulvinar arcu ut accumsan. Aenean suscipit sit amet diam ac luctus. Nam quis eros suscipit, finibus quam porta, ullamcorper est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae lacus quis tortor accumsan gravida faucibus at nisi. Integer faucibus, ligula eget dignissim molestie, dolor massa fringilla leo, ac lobortis nisl dolor non nisl. Aenean laoreet quam ac purus auctor facilisis.</p>
+
+    <div class="ae-btn-group ae-btn-group-left">
+    <%= link_to '&laquo; Back'.html_safe, styleguide_path, class: 'ae-btn ae-btn-primary ae-btn-md' %>
+    </div>
+
+  </div>
+</div>

data/app/views/express_ui/templates/full_width.html.erb

@@ -0,0 +1,25 @@
+<%= render "express_ui/shared/header" %>
+<div class="ae-template-full-width">
+  <div class="ae-container">
+    <div class="ae-content content">
+
+    <h1>This is a full-width layout</h1>
+
+    <%= highlight_code_block do %>
+    <%= "<header></header>" %>
+    <%= "<div class=\"ae-template-full-width\">" %>
+      <%= "<div class=\"ae-container\">" %>
+        <%= "<div class=\"ae-content\">" %>
+          <%= " {Content}" %>
+        <%= "</div>" %>
+      <%= "</div>" %>
+    <%= "</div>" %>
+    <%= "<footer></footer>" %>
+    <% end %>
+
+    <div class="ae-btn-group ae-btn-group-left">
+    <%= link_to '&laquo; Back'.html_safe, styleguide_path, class: 'ae-btn ae-btn-primary ae-btn-md' %>
+    </div>
+
+  </div>
+</div>

data/app/views/express_ui/templates/half_width.html.erb

@@ -0,0 +1,25 @@
+<%= render "express_ui/shared/header" %>
+<div class="ae-template-half-width">
+  <div class="ae-container">
+    <div class="ae-content content">
+
+    <h1>This is a half-width layout</h1>
+
+    <%= highlight_code_block do %>
+    <%= "<header></header>" %>
+    <%= "<div class=\"ae-template-half-width\">" %>
+      <%= "<div class=\"ae-container\">" %>
+        <%= "<div class=\"ae-content\">" %>
+          <%= " {Content}" %>
+        <%= "</div>" %>
+      <%= "</div>" %>
+    <%= "</div>" %>
+    <%= "<footer></footer>" %>
+    <% end %>
+
+    <div class="ae-btn-group ae-btn-group-left">
+    <%= link_to '&laquo; Back'.html_safe, styleguide_path, class: 'ae-btn ae-btn-primary ae-btn-md' %>
+    </div>
+
+  </div>
+</div>

data/app/views/express_ui/templates/master_detail.html.erb

@@ -0,0 +1,41 @@
+<%= render "express_ui/shared/header" %>
+<div class="ae-template-master-detail">
+
+  <div class="ae-sidebar ae-sidebar-left">
+    <nav><a href="#">{Sidebar Menu}</a></nav>
+  </div>
+
+  <div class="ae-sidebar ae-sidebar-right">
+    <p>{Detail}</p>
+  </div>
+
+  <div class="ae-content content">
+    <%= render "express_ui/shared/search_box" %>
+
+    <h1>This is a master-detail layout</h1>
+
+    <%= highlight_code_block do %>
+    <%= "<header></header>" %>
+    <%= "<div class=\"ae-template-master-detail\">" %>
+      <%= "<div class=\"ae-sidebar ae-sidebar-left\">" %>
+        <%= "<nav>" %>
+          <%= "{Sidebar Menu}" %>
+        <%= "</nav>" %>
+      <%= "</div>" %>
+      <%= "<div class=\"ae-sidebar ae-sidebar-right\">" %>
+        <%= "{Detail View}" %>
+      <%= "</div>" %>
+      <%= "<div class=\"ae-content\">" %>
+        <%= "{Content}" %>
+      <%= "</div>" %>
+    <%= "</div>" %>
+    <%= "<footer></footer>" %>
+    <% end %>
+
+    <div class="ae-btn-group ae-btn-group-left">
+    <%= link_to '&laquo; Back'.html_safe, styleguide_path, class: 'ae-btn ae-btn-primary ae-btn-md' %>
+    </div>
+
+    </div>
+  </div>
+</div>