sandwichUI
from the team at 
Last updated: 24 May 2017
sandwichUI
from the team at
Last updated: 24 May 2017
Buttons are used for any link that triggers an action (e.g. opening a menu, changing the state of an element, etc.) Like the rest of the UI, button labels should always be written in sentence case. Related buttons should always appear in a Button List.
NOTE: on the Grav website all buttons are rendered as <a> tags instead of <button> tags, because there is no JS powering the click actions. All the styles apply the same except the <a> needs to have it's display property set to inline-block.
This is the button used for dangerous actions. A dangerous action is anything that is destructive or irreversible (e.g. removing a user, closing an account.) This button style is used any time an action is dangerous, even if that action is also the primary action in the grouping.
<button class="button--danger">Dangerous action</button>If an action is unavailable for some reason, the button should be displayed in this disabled state. Where appropriate let the user know why the button is disabled elsewhere in the UI.
<button class="button--disabled">Disabled action</button>This is the button used for the primary action in a given set of actions. There should never be more than a single primary button in a button grouping. Primary buttons receive keyboard focus by default.
<button class="button--primary ">Primary action</button>This is the button used for secondary actions in a given set of actions. There can be multiple secondary buttons in any given button grouping. Secondary buttons should appear on screen in their keyboard tab-order.
<button class="button--secondary">Secondary action</button>The checkbox control is used to gather boolean input either individually or in a group where users can choose more than one option as a response. All groups of checkboxes are wrapped in a .checkbox-group container, including groups of one.
The checkbox uses the radio-check-sprites.png sprite sheet to override the OS provided controls. If the :checked state isn't available this component falls back gracefully to its OS provided version.
<div class="checkbox-group">
<div class="checkbox">
<input type="checkbox" id="checkbox01" class="checkbox__real-checkbox">
<label for="checkbox01" class="checkbox__label">
Checkbox group checkbox 1
</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox02" class="checkbox__real-checkbox">
<label for="checkbox02" class="checkbox__label">
Checkbox group checkbox 2
</label>
</div>
</div>The disclosure control is used to toggle a hidden section. Currently this control is used only in the prospect card component. Usage outside of that component may require tweaking to it's width.
details
<div class="disclosure-control" id="example-disclosure">
<p class="disclosure-control__text">details</p>
<hr class="disclosure-control__rule">
<div class="disclosure-control__arrow disclosure-control__arrow--down"> </div>
</div>The dropdown control is used to allow selection from a fixed set of options. Like the rest of the UI, the options in a dropdown list should always be written in sentence case.
<div class="dropdown--left">
<div class="dropdown-container">
<p class="dropdown-button">First list item</p>
<ul class="dropdown-menu">
<li class="dropdown-menu__item">First list item</li>
<li class="dropdown-menu__item">Second list item</li>
<li class="dropdown-menu__item">Third list item</li>
<li class="dropdown-menu__item">Fourth list item</li>
</ul>
</div>
</div>The Feedback block is shown when things happen in the system and we need to notify the users about it. The feedback block always appears at the top of the screen, and enforces is's own margins (1 baseline grid unit on top, 3 baseline grid units on the bottom, if you're inserting it as an absolutely positioned element keep this spacing in mind.)
This block is shown when an error occurs. Error messages should always be clear about what went wrong and provide actionable guidance to the user. (e.g. "Message failed to send, please try again.") Error messages should not hide themselves but should be dismissed by a user action, either direct or indirect.
<div class="feedback-block--error">
OMG! Something broke and here's what you can do about it!
</div>This block is shown when we need to provide information to the user about an event in the system that is not an error, warning, or success message. (e.g. "Your contact sync is finished and you now have recommendations waiting.") Information blocks should hide themselves after five seconds if a user does not dismiss them first.
<div class="feedback-block--info">
OMG! Some feedback goes here, it's Y'UUUGE!
</div>This block is shown when a user successfully completes an action. Success blocks should hide themselves after five seconds if a user does not dismiss them first.
<div class="feedback-block--success">
OMG! You win! You're the best! No one does winning better than you!
</div>This block is shown whenever a user takes an action that is non-destructive but is not advisable. (e.g. "You just unsubscribed from all notifications. Click here to undo.") Warning blocks should hide themselves after ten seconds if a user does not dismiss them first.
<div class="feedback-block--warn">
OMG! You did something that is not advisable!
</div>Lists are a foundational way to display data inside the Simppler application. Because so much data related to jobs and job seekers is a list we have multiple types of list in the application to best display this data.
The single-line list is the basic kind of list in the system. Every other list in the system is based on this list.
<ul class="one-line-list">
<li class="list__item">Default list item 0</li>
<li class="list__item">Default list item 1</li>
<li class="list__item">Default list item 2</li>
<li class="list__item">Default list item 3</li>
</ul>The button list is the way to display a group of related buttons.
<ul class="button-list">
<li class="list__item"><button class="button--primary ">Button one</button></li>
<li class="list__item"><button class="button--secondary ">Button two</button></li>
<li class="list__item"><button class="button--secondary ">Button three</button></li>
</ul>The icon list is the primary way to display a group of related icons.
<ul class="icon-list" id="example-icon-list">
<li class="list__item">
<a class="link" href="#">
<img class="icon" src="assets/toolkit/img/social-icons/linkedin.svg" alt="LinkedIn" />
</a>
</li>
<li class="list__item">
<a class="link" href="#"><img class="icon" src="assets/toolkit/img/social-icons/facebook.svg" alt="Facebook" /></a>
</li>
<li class="list__item">
<a class="link" href="#"><img class="icon" src="assets/toolkit/img/social-icons/twitter.svg" alt="Twitter" /></a>
</li>
<li class="list__item">
<a class="link" href="#"><img class="icon" src="assets/toolkit/img/social-icons/github.svg" alt="Github" /></a>
</li>
<li class="list__item">
<a class="link" href="#"><img class="icon" src="assets/toolkit/img/social-icons/dribbble.svg" alt="Dribbble" /></a>
</li>
<li class="list__item">
<a class="link" href="#"><img class="icon" src="assets/toolkit/img/social-icons/googleplus.svg" alt="Google+" /></a>
</li>
</ul>The multi-line list is the most common kind of list in the application. This component allows us to display more complex "list items" in a way that preserves the data's internal hierarchy while still being a simple to manipulate list.
The multi-line list is just a layout framework. The styling of the text in the list is controlled by separate typeface styles.
<ul class="two-line-list">
<li class="list__item">
<div class="list-item--row">List item one row one</div>
<div class="list-item--row">List item one row two</div>
</li>
<li class="list__item">
<div class="list-item--row ">List item two row one</div>
<div class="list-item--row">List item two row two</div>
</li>
<li class="list__item">
<div class="list-item--row">List item three row one</div>
<div class="list-item--row">List item three row two</div>
</li>
<li class="list__item">
<div class="list-item--row">List item four row one</div>
<div class="list-item--row">List item four row two</div>
</li>
</ul>The tag list is only way tags are displayed in the application. While the tag element could hypothetically be used outside the list, there is no current use of it that way in our application or websites.
<ul class="tag-list">
<li class="list__item"> Foo tag</li>
<li class="list__item"> A long tag</li>
<li class="list__item"> A really really really long tag</li>
<li class="list__item"> tag</li>
<li class="list__item"> Bar tag</li>
<li class="list__item"> The best tag</li>
<li class="list__item"> The bestest tag</li>
<li class="list__item"> Foo tag</li>
<li class="list__item"> A long tag</li>
<li class="list__item"> A really really really long tag</li>
<li class="list__item"> Foo tag</li>
<li class="list__item"> A long tag</li>
<li class="list__item"> A really really really long tag</li>
</ul>The radio button control is used to gather boolean input. Radio buttons are always wrapped in a .radio-group container.
The radio button uses the radio-check-sprites.png sprite sheet to override the OS provided controls. If the :checked state isn't available this component falls back gracefully to its OS provided version.
<div class="radio-group">
<div class="radio-button">
<input type="radio" name="rdio-example" id="rdio1" class="radio-button__real-radio" checked>
<label for="rdio1" class="radio-button__label">
radio button
</label>
</div>
<div class="radio-button">
<input type="radio" name="rdio-example" id="rdio2" class="radio-button__real-radio">
<label for="rdio2" class="radio-button__label">
radio button
</label>
</div>
</div>The search field is used any time we are exposing a search action. It's style is based on the textfield element. Like the rest of the UI, the placeholder text should always be written in sentence case. The placeholder text should reflect what ever the searchable data is and written in the format, "Search for..."
<form class="search-field" role="search" id="example-search-field">
<input class="search_field__input" type="search" placeholder="Search for a specific job">
<a class="search-field__search-button">
<img class="search-field__icon" src="assets/toolkit/img/ui-icons/search-nobg.svg">
</a>
</form>Second only to lists, tabular data makes up a large portion of the data in the Simppler system. Tables are ONLY used to display tabular data. Tables always have a header. Columns always have a title, unless the column contains a button list or an icon list. Rows always alternate between having a background and not, to differentiate between rows.
All tables respond to smaller viewports by pinning their first column and allowing the additional columns to scroll along the x-axis. Column widths, alignment, and the width of the pinned table column will need to be overridden for each individual table, as the content dictates these values.
Currently the Recruiter app includes an "Accordion table" element. This table as designed and built does not work on mobile viewports and so has not been included here. The accordion table is currently being redesigned and will be added once a mobile friendly version is complete.
| Job | Potential | Reffered | Response |
|---|---|---|---|
| San Francisco, CA USA | 1284 | 150 | 45% |
| San Francisco, CA USA | 5789 | 10 | 15% |
| San Francisco, CA USA | 98 | 52 | 85% |
<table class="responsive-table">
<thead class="table__header">
<tr>
<th class="column" id="jobs-col">Job</th>
<th class="column" id="potential-col">Potential</th>
<th class="column" id="ref-col">Reffered</th>
<th class="column" id="response-col">Response</th>
</tr>
</thead>
<tbody class="table__body">
<tr class="row">
<td class="column job-cell">
<div class="job-cell-title">
<a href="#">Account Executive</a>
</div>
<span class="job-location">San Francisco, CA USA</span>
</td>
<td class="column potential-cell"><a href="#">1284</a></td>
<td class="column ref-cell"><a href="#">150</a></td>
<td class="column response-cell">45%</td>
</tr>
<tr class="row">
<td class="column job-cell">
<div class="job-cell-title">
<a href="#">Big Data Engineer</a>
</div>
<span class="job-location">San Francisco, CA USA</span>
</td>
<td class="column potential-cell"><a href="#">5789</a></td>
<td class="column ref-cell"><a href="#">10</a></td>
<td class="column response-cell">15%</td>
</tr>
<tr class="row">
<td class="column job-cell">
<div class="job-cell-title">
<a href="#">VP Sales</a>
</div>
<span class="job-location">San Francisco, CA USA</span>
</td>
<td class="column potential-cell"><a href="#">98</a></td>
<td class="column ref-cell"><a href="#">52</a></td>
<td class="column response-cell">85%</td>
</tr>
</tbody>
</table>Tags are used to display relevant meta-data. In there most basic state tags are informational only and are not interactive. In some cases, the tag element can be used to show interactive meta-data (e.g. a filter currently being applied to a data set.)
Interactive tags ALWAYS have a UI icon that represents the action that happens when the tag is clicked. Currently the only action we support in the applications is "remove" which is shown with the close icon. If additional interactive tags are added the definition of interactive tag will need to be expanded.
<span class="tag-item--interactive">Some clickable tag content</span>The basic tag item is mostly a stylistic designation for meta data in the UI. The only place we are currently using the tag styling is on list-items in a tag list.
<span class="tag-item">Some tag content</span>Textfields are the primary means of taking input from users in the Simppler applications. This is the base textfield element, it is the basis for more complicated field types like auto-complete fields. The textfield is not used to gather text input longer than 100 characters.
When a field fails validation, this invalid state is shown. The text field label becomes the validation error message in the format: [FieldName] should be [ValidationType] or [FieldName] should not contain [Type]. E.g. "First name should not contain numbers" and "Phone number should be like 555.555.5555." Validation failure messages must always begin with the field's label so the label is never lost.
<div class="textfield textfield--floating-label is-invalid is-focused">
<input class="textfield__input" type="text" id="invalid-field" value="invalid value">
<label class="textfield__label" for="sample3">[FieldName] should be a [ValidationType]</label>
</div>Basic text inputs should be labeled such that the label can stand in for hint text. Users should never be unclear about what kind of information a field is asking for.
<div class="textfield textfield--floating-label">
<input class="textfield__input" type="text" id="text-field">
<label class="textfield__label" for="text-field">Text field label</label>
</div>The textarea is used to capture long-form text input. It's primarily used in views that allow a user to compose a message or edit a template. By default a text area should show no less than 4 lines of text, to distinguish it visually from the text input controls and make it clear longer text is expected to be entered.
<textarea class="textarea" id="example-textarea">This is someplaceholder text to show off the styling of this textarea.
¯\_(ツ)_/¯
</textarea>