express_ui 0.1.0.rc1

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

@@ -0,0 +1,6 @@
+<h4>Mixins</h4>
+<section>
+<p>Mixins define styles that can be re-used throughout the stylesheet without needing to resort to non-semantic classes like .float-left. Mixins can also contain full CSS rules, and anything else allowed elsewhere in a Sass document. They can even take arguments which allows you to produce a wide variety of styles with very few mixins."</p>
+
+<p><small>Source: SASS Reference. See <a href="http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixins">SASS Reference</a> for the full documentation on `@mixins`</small>.</p>
+</section>

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

@@ -0,0 +1,201 @@
+<section>
+<table>
+  <thead>
+    <th>Font Family</th>
+    <th>Variable</th>
+    <th>Value</th>
+    <th>Usage</th>
+  </thead>
+<tbody>
+<tr>
+<td><b>Lato Bold</b></td>
+<td><span class="citation">@header-font</span></td>
+<td>font-family: ‘Lato’, sans-serif</td>
+<td>Headings</td>
+</tr>
+<tr>
+<td>Lato</td>
+<td><span class="citation">@body-font</span></td>
+<td>font-family: ‘Lato’, sans-serif</td>
+<td>Body</td>
+</tr>
+</tbody>
+</table>
+<p>ExpressUI uses Lato for both headings and body text. It should be specified otherwise when headings and body fonts differ. ExpressUI automatically imports Lato via Google Fonts</p>
+
+<h4>Headings</h4>
+<%= render "express_ui/atoms/headings" %>
+
+<h4>Icons</h4>
+<%= render "express_ui/atoms/icons" %>
+
+<h4>Inline and Block Elements</h4>
+
+<p>Assign margin and padding to headers to make sure they are spaced well against other elements</p>
+
+<table>
+  <thead>
+    <th>Element</th>
+    <th>Demo</th>
+    <th>Notes</th>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>&lt;p&gt;&lt;/p&gt;</code></td>
+      <td><p>A paragraph (from the Greek paragraphos, &quot;to write beside&quot; or &quot;written beside&quot;) is a self-contained unit of a discourse in writing dealing with a particular point or idea. </p>
+      <td>Wraps block elements</td>
+    </tr>
+
+    <tr>
+      <td><code>&lt;a href="#" title=""&gt;&lt;/a&gt;</code></td>
+      <td><a href="#" title="Describe where the link is taking the user">This is a text link</a></td>
+      <td>Always add a descriptive <code>title</code> attribute to links</td>
+    </tr>
+
+    <tr>
+      <td><code>&lt;strong&gt;&lt;/strong&gt;</code></td>
+      <td><strong>I'm very important</strong></td>
+      <td>Strong is used to indicate strong importance</td>
+    </tr>
+
+    <tr>
+      <td><code>&lt;em&gt;&lt;/em&gt;</code></td>
+      <td><em>I'm slightly important</em></td>
+      <td>Add emphasis</td>
+    </tr>
+
+    <tr>
+      <td><code>&lt;i&gt;&lt;/i&gt;</code></td>
+      <td><i>icon</i></td>
+      <td>For font icons</td>
+    </tr>
+
+    <tr>
+      <td><code>&lt;sup&gt;&lt;/sup&gt;</code></td>
+      <td>Rotate the image by 90<sup>º</sup></td>
+      <td>Slightly elevate text above the normal line</td>
+    </tr>
+
+    <tr>
+      <td><code>&lt;small&gt;&lt;/small&gt;</code></td>
+      <td><small>Terms and conditions apply</small></td>
+      <td>For fine print</td>
+    </tr>
+
+    <tr>
+      <td><code>&lt;code&gt;&lt;/code&gt;</code></td>
+      <td>&lt;html&gt;&lt;/html&gt;</td>
+      <td>For inline code</td>
+    </tr>
+
+    </tbody>
+</table>
+
+<p>See list of deprecated tags at <a href="https://www.codehelp.co.uk/html/deprecated.html" title="Deprecated tags"> https://www.codehelp.co.uk/html/deprecated.html </a></p>
+
+<h4>Status</h4>
+<p>Status labels can be used to denote the state of an item or page, e.g., when an item has incurred a “cancelled” or “successful” state.</p>
+<p>The <code>.ae-status</code> class is required.</p>
+<table>
+<thead>
+<tr>
+<th>Class</th>
+<th>Demo</th>
+<th>Usage</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>.ae-status-success</code></td>
+<td><span class="ae-status ae-status-success">Success</span>
+</td>
+<td>Finished, done, successful, correct,</td>
+</tr>
+<tr>
+<td><code>.ae-status-cancelled</code> or <code>.ae-status-error</code></td>
+<td><span class="ae-status ae-status-cancelled">Cancelled</span></td>
+<td>Cancelled, alert</td>
+</tr>
+<tr>
+<td><code>.ae-status-pending</code></td>
+<td><span class="ae-status ae-status-pending">Pending</span></td>
+<td>Pending, ongoing, reminder, warning</td>
+</tr>
+<tr>
+<td><code>.ae-status-deleted</code></td>
+<td><span class="ae-status ae-status-deleted">Deleted</span></td>
+<td>Deleted, removed</td>
+</tr>
+</tbody>
+</table>
+
+<p>Use badges to indicate the number of items for a specific notification or link.</p>
+<p>The <code>.ae-badge</code> class is required.</p>
+
+<table>
+<thead>
+<tr>
+<th>Class</th>
+<th>Demo</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>.ae-badge-success</code></td>
+<td><span class="ae-badge ae-badge-success">1</span>
+</td>
+</tr>
+<tr>
+<td><code>.ae-badge-cancelled</code> or <code>.ae-badge-error</code></td>
+<td><span class="ae-badge ae-badge-cancelled">10</span>
+</td>
+</tr>
+<tr>
+<td><code>.ae-badge-pending</code></td>
+<td><span class="ae-badge ae-badge-pending">100</span>
+</td>
+</tr>
+<tr>
+<td><code>.ae-badge-deleted</code></td>
+<td><span class="ae-badge ae-badge-deleted">1000</span>
+</td>
+</tr>
+</tbody>
+</table>
+
+
+<h4>Text Utilities</h4>
+<table>
+<thead>
+<tr>
+<th>Class</th>
+<th>Value</th>
+</thead>
+<tbody>
+<tr>
+<td><code>.ae-u-text-left</code></td>
+<td>text-align: left</td>
+</tr>
+<tr>
+<td><code>.ae-u-text-center</code></td>
+<td>text-align: center</td>
+</tr>
+<tr>
+<td><code>.ae-u-text-right</code></td>
+<td>text-align: right</td>
+</tr>
+<tr>
+<td><code>.ae-u-text-justify</code></td>
+<td>text-align: justify</td>
+</tr>
+<tr>
+<td><code>.ae-u-float-left</code></td>
+<td>float: left</td>
+</tr>
+<tr>
+<td><code>.ae-u-float-right</code></td>
+<td>float: right</td>
+</tr>
+</tbody>
+</table>
+</section>

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

@@ -0,0 +1,50 @@
+#### Variables
+
+Define brand colors
+
+
+Color | Variable | Value | Usage
+--- | --- | --- | ---
+<span class="ae-swatch ae-swatch-primary-color"></span> | $primary-color | #6699CC | The same ÆLOGICA blue is used as primary color. <br/><br/> Button background, button text, links <br/>
+<span class="ae-swatch ae-swatch-secondary-color"></span> | $secondary-color | #999999 | No notes
+<span class="ae-swatch ae-swatch-success"></span> | $success | #3c763d | <a href="#status">See notes</a>
+<span class="ae-swatch ae-swatch-cancelled"></span> | $cancelled | #a94442 | <a href="#status">See notes</a>
+<span class="ae-swatch ae-swatch-pending"></span> | $pending | #faf2cc | <a href="#status">See notes</a>
+<span class="ae-swatch ae-swatch-deleted"></span> | $deleted | lighten($secondary-color, 30%) | <a href="#status">See notes</a>
+<span class="ae-swatch ae-swatch-border-light"></span> | $secondary-color <br />             $border-light | #aeaeae | No notes
+<span class="ae-swatch ae-swatch-body-color"></span> | $body-color | #666 | Body text color
+<span class="ae-swatch ae-swatch-link-color"></span> | $link-color | #6699CC | Links
+<span class="ae-swatch ae-swatch-body-lighter"></span> | $body-lighter | #999 | Lighter font color
+<span class="ae-swatch ae-swatch-icon-color"></span> | $icon-color | #333 | No notes
+<span class="ae-swatch ae-swatch-gray-background"></span> | $gray-background | #F7F7F7 | Panels, wells, even table row
+<span class="ae-swatch ae-swatch-dark-gray-background"></span> | $dark-gray-background | rgba(#ccc, 0.1) | Panels, wells, odd table row background
+<span class="ae-swatch ae-swatch-thead-color"></span> | $thead-color | #888 | Table head row background
+
+Adjusting colors
+
+Using SASS's color adjustment functions, you may fine-tune colors by specifying the variable and amount of adjustment. Use this sparingly as changing up colors too much may cause brand color disconnect.
+
+Color | Variable | Usage
+--- | --- | ---
+<span class="ae-swatch ae-swatch-primary-color-lighten"></span> | `lighten($primary-color, 20%)` | Lightens $primary-color by 20%
+<span class="ae-swatch ae-swatch-secondary-color-darken"></span> |`darken($secondary-color, 20%)` | Darkens $secondary-color by 20%
+
+Learn more at http://sass-lang.com/documentation/Sass/Script/Functions.html
+
+Define helper variables
+
+
+Variable | Value | Usage
+--- | --- | ---
+$line-height | 14px | Sets amount of space above and below inline elements
+$container | 960px | Page elements fit within this width
+
+Media Query values
+
+Variable | Value | Typical Models
+--- | --- | ---
+$smartphone | 480px | iPhones 4, 5, 6, 7, Samsung Galaxy
+$tablet | 768px | iPads
+$laptop | 1024px | Macs
+$desktop | 1440px | Macs, wide screens, iMacs
+

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

@@ -0,0 +1,90 @@
+<section>
+<p>A button group is a container for a set of buttons that may or may not be related to each other. This is great for grouping form actions, such as Save and Cancel, Save and Confirm, and so on.</p>
+<p><strong>Required</strong>. Add <code>.ae-btn-group</code> and <code>.ae-btn-group-*</code> to the buttons’ parent element to align them to the left, center, right, or justified.</p>
+<p><i class="fa fa-mobile"></i> <strong>Mobile view</strong>. Button groups will always stack buttons vertically as block elements.</p>
+<table>
+<thead>
+<tr class="header">
+<th>Alignment</th>
+<th>Class</th>
+<th>Notes</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>Left</td>
+<td><code>.ae-btn-group-left</code></td>
+<td>Buttons are forced to the left</td>
+</tr>
+<tr>
+<td></td>
+<td colspan="2"><div class="ae-btn-group ae-btn-group-left">
+    <button class="ae-btn ae-btn-primary" type="submit">Save</button>
+    <button class="ae-btn ae-btn-default" type="cancel">Cancel</button>
+</div>
+</td>
+</tr>
+<tr>
+<td>Center</td>
+<td><code>.ae-btn-group-center</code></td>
+<td>Buttons are forced to the center</td>
+</tr>
+<tr>
+<td></td>
+<td colspan="2"><div class="ae-btn-group ae-btn-group-center">
+    <button class="ae-btn ae-btn-primary" type="submit">Save</button>
+    <button class="ae-btn ae-btn-default" type="cancel">Cancel</button>
+</div>
+</td>
+</tr>
+<tr>
+<td>Right</td>
+<td><code>.ae-btn-group-right</code></td>
+<td>Buttons are forced to the right</td>
+</tr>
+<tr>
+<td></td>
+<td colspan="2"><div class="ae-btn-group ae-btn-group-right">
+    <button class="ae-btn ae-btn-primary" type="submit">Save</button>
+    <button class="ae-btn ae-btn-default" type="cancel">Cancel</button>
+</div>
+</td>
+</tr>
+<tr>
+<td>Justified</td>
+<td><code>.ae-btn-group-justified</code></td>
+<td>Button widths will auto adjust based on width</td>
+</tr>
+<tr>
+<td></td>
+<td colspan="2">
+<p>Individually wrap buttons in <code>&lt;div class=&quot;ae-btn-group&quot;&gt;&lt;/div&gt;</code> to justify-align them. Adjust screen size to see how the buttons automatically fill the width.</p>
+
+<div class="ae-btn-group ae-btn-group-justified">
+    <div class="ae-btn-group">
+        <button class="ae-btn ae-btn-primary" type="submit">Save</button>
+    </div>
+    <div class="ae-btn-group">
+        <button class="ae-btn ae-btn-default" type="cancel">Cancel</button>
+    </div>
+</div>
+</td>
+</tr><tr>
+<tr>
+<td>Full width</td>
+<td><code>.ae-btn-group-full-width</code></td>
+<td>Buttons appear at the far left and far right</td>
+</tr>
+<tr>
+<td></td>
+<td colspan="2">
+<p>Add <code>.ae-btn-left</code> or <code>.ae-btn-right</code> to buttons to position them.</p>
+<div class="ae-btn-group ae-btn-group-full-width">
+    <button class="ae-btn ae-btn-default ae-btn-left" type="cancel">Cancel</button>
+    <button class="ae-btn ae-btn-primary ae-btn-right" type="submit">Save</button>
+</div>
+</td>
+</tr><tr>
+</tbody>
+</table>
+<section>

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

@@ -0,0 +1,32 @@
+<section>
+<p>A container is used to keep elements confined within a prescribed width. This is to prevent elements from “scattering” throughout the page. Its behavior, width, and paddings are affected by the parent template it follows. </p>
+<p>More info on <a href="#templates" title="Templates">Templates</a> here.</p>
+<table>
+<thead>
+<tr>
+<th>Width</th>
+<th>Usage</th>
+<th>Notes</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>Fixed</td>
+<td><code>.ae-container</code></td>
+<td>Uses a fixed width, which can be set in <code>variables.sass</code>. This is set to <code>960px</code> by default.</td>
+</tr>
+<tr>
+<td>Full or fluid</td>
+<td><code>.ae-container-full</code></td>
+<td>Stretches throughout the width of the screen</td>
+</tr>
+
+<tr>
+<td>Table</td>
+<td><code>.ae-container-table</code> for the parent container <code>&lt;div&gt;</code><br/><br/> <code>.ae-container-table-cell</code> for the direct children container <code>&lt;div&gt;</code> </td>
+<td>Makes a <code>&lt;div&gt;</code> and its children behave like a table and table cells, respective.</td>
+</tr>
+
+</tbody>
+</table>
+</section>

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

@@ -0,0 +1,49 @@
+<section>
+<p>Flash messages provide a system of feedback to users after an action is done.</p>
+<p>See <a href="#status">Status</a> for the list of actions.</p>
+<table>
+<thead>
+<tr class="header">
+<th>Action</th>
+<th>Usage</th>
+</tr>
+</thead>
+<tbody>
+<tr class="odd">
+<td>Success</td>
+<td><code>.ae-alert-success</code></td>
+</tr>
+<tr class="even">
+<td>Error</td>
+<td><code>.ae-alert-error</code></td>
+</tr>
+<tr class="odd">
+<td>Pending</td>
+<td><code>.ae-alert-pending</code></td>
+</tr>
+<tr class="even">
+<td>Info</td>
+<td><code>.ae-alert-info</code></td>
+</tr>
+</tbody>
+</table>
+
+<div class="ae-alert ae-alert-success">
+  <p>Congratulations! <a href="#" title="Click here to do something">Click here to do something</a>.</p>
+  <a href="#" class="ae-alert-action" title="Click here to do something">×</a>
+</div>
+
+<div class="ae-alert ae-alert-error">
+  <p>Error. <a href="#" title="Click here to do something">Click here to do something</a>.</p>
+  <a href="#" class="ae-alert-action" title="Click here to do something">×</a>
+</div>
+
+<div class="ae-alert ae-alert-pending">
+  <p>Warning. <a href="#" title="Click here to do something">Click here to do something</a>.</p>
+  <a href="#" class="ae-alert-action" title="Click here to do something">×</a>
+</div>
+<div class="ae-alert ae-alert-info">
+  <p>Information. <a href="#" title="Click here to do something">Click here to do something</a>.</p>
+  <a href="#" class="ae-alert-action" title="Click here to do something">×</a>
+</div>
+</section>

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

@@ -0,0 +1,14 @@
+<form class="ae-form-horizontal">
+  <div class="ae-form-field">
+    <label for="email">Email</label>
+    <input class="ae-text-field ae-input-md" type="email" name="email" value="user@email.com" id="email" placeholder="user@email.com" />
+    <p class="ae-hint">The email you used to sign up.</p>
+  </div>
+  <div class="ae-form-field">
+    <label for="password">Password</label>
+    <input class="ae-text-field ae-input-md" type="password" name="password" value="Enter password" id="password" placeholder="Enter password" />
+  </div>
+  <div class="ae-actions">
+    <button class="ae-btn ae-btn-primary ae-btn-md" type="submit">Log In</button>
+  </div>
+</form>