These are the standard mangolian colors. They can be added to properties using the helper function, mn-color("almostblack")
.
Grid is used to quickly construct layouts. It is a mobile first, responsive, 12 column fluid grid with 20px gutters. It is a float based grid using the Neat library.
<div class="mn--grid-dev">
<div class="mn--row">
<div style="height: 300px;" class="mn--col-dev mn--col-xs-6 mn--col-sm-4 mn--col-md-3 mn--col-lg-2 mn--col-xl-1"></div>
<div style="height: 300px;" class="mn--col-dev mn--col-xs-6 mn--col-sm-4 mn--col-md-3 mn--col-lg-2 mn--col-xl-1"></div>
<div style="height: 300px;" class="mn--col-dev mn--col-xs-6 mn--col-sm-4 mn--col-md-3 mn--col-lg-2 mn--col-xl-1"></div>
<div style="height: 300px;" class="mn--col-dev mn--col-xs-6 mn--col-sm-4 mn--col-md-3 mn--col-lg-2 mn--col-xl-1"></div>
<div style="height: 300px;" class="mn--col-dev mn--col-xs-6 mn--col-sm-4 mn--col-md-3 mn--col-lg-2 mn--col-xl-1"></div>
<div style="height: 300px;" class="mn--col-dev mn--col-xs-6 mn--col-sm-4 mn--col-md-3 mn--col-lg-2 mn--col-xl-1"></div>
<div style="height: 300px;" class="mn--col-dev mn--col-xs-6 mn--col-sm-4 mn--col-md-3 mn--col-lg-2 mn--col-xl-1"></div>
<div style="height: 300px;" class="mn--col-dev mn--col-xs-6 mn--col-sm-4 mn--col-md-3 mn--col-lg-2 mn--col-xl-1"></div>
<div style="height: 300px;" class="mn--col-dev mn--col-xs-6 mn--col-sm-4 mn--col-md-3 mn--col-lg-2 mn--col-xl-1"></div>
<div style="height: 300px;" class="mn--col-dev mn--col-xs-6 mn--col-sm-4 mn--col-md-3 mn--col-lg-2 mn--col-xl-1"></div>
<div style="height: 300px;" class="mn--col-dev mn--col-xs-6 mn--col-sm-4 mn--col-md-3 mn--col-lg-2 mn--col-xl-1"></div>
<div style="height: 300px;" class="mn--col-dev mn--col-xs-6 mn--col-sm-4 mn--col-md-3 mn--col-lg-2 mn--col-xl-1"></div>
</div>
</div>
There are five breakpoints beginning with small screened devices to larger desktop viewports. At a minimum, an element must have .mn--col-xs-[number of columns]
to be the default. You can add subsequent column classes to get the desired layout for each breakpoint: class="mn--col-xs-6 mn--col-sm-3"
label | value |
---|---|
xs | 0px |
sm | 564px |
m | 768px |
lg | 992px |
xl | 1200px |
We can control the visibility of elements based on the media queries, which can be useful in situations where the layout must change to accomodate different screen sizes.
<div class="mn--vis-xs-block mn--vis-sm-none">only xs visible</div>
<div class="mn--vis-xs-none mn--vis-sm-block">sm and up visible</div>
<div class="mn--vis-xs-none mn--vis-md-block">md and up visible</div>
<div class="mn--vis-xs-none mn--vis-lg-block">lg and up visible</div>
<div class="mn--vis-xs-none mn--vis-xl-block">only xl visible</div>
These are the typography standards that are used in Mangolian UI for both desktop and mobile. Sofia Pro is the standard typeface used across the Grana brand. Desktop and mobile typography vary due to the readability and legibility on different screen sizes. Type styles that are named the same should refer back to the device to determine followed style.
The sass variable $sofiapro
contains the recommended font stack.
$sofiapro: "sofiapro", arial, sans-serif;
font-family: $sofiapro;
We have eight different text sizes to be utilized using a mixin. The intent is that each mixin can be added to css modules' type selectors, minimizing the amount of classes used on an element.
px | mixin | actual |
---|---|---|
80px | mn-type("mega") | the owls are not what they seem |
60px | mn-type("submega") | the owls are not what they seem |
40px | mn-type("display") | the owls are not what they seem |
30px | mn-type("headline") | the owls are not what they seem |
20px | mn-type("title") | the owls are not what they seem |
15px | mn-type("body") | the owls are not what they seem |
12px | mn-type("caption") | |
10px | mn-type("small") | the owls are not what they seem |
.container-title {
@include mn-type("title");
color: $primary-text;
text-transform: lowercase;
}
Line-height creates the spacing for text in order to maintain ledgibility for different type sizes. Furthermore, a component's structure, such as margin and padding are contigent on this value. It is important for elements to be attributed with the appropriate line-height.
We have three line-heights: tight, regular, and large. These line-heights do not need to be included as they are baked into the type size placeholders.
There are three weights we use for our type: regular, medium, and semibold. You can add the font-weight property directly to the selector.
weight | actual |
---|---|
400 | regular |
500 | medium |
600 | semibold |
Checkboxes allow users to select multiple options from a set.
The input field of type checkbox
must have the class .checkbox
and can be wrapped in .field-group
. The input field must have a label sibling with the class .checkbox-label
containing an inline span
with the .checkbox-label-box
class. Use checked
to preselect an option.
<div class="field-group">
<input type="checkbox" id="checkbox-example" class="checkbox" checked>
<label for="checkbox-example" class="checkbox-label">
<span class="checkbox-label-box"></span>
</label>
</div>
Colour selection for use on category page quick add, and filtering.
Input field of type checkbox
and radio
can be used. The input tag must have the class .mn--cs-input
. There must be a label sibling with the class .mn--cs-label
containing an inline span
with the class .mn--cs-circle
. Add the colour class to the span tag.
The colour name may be added to a div next to .mn--cs-circle
with a class name of .mn--cs-name
and either .mn--cs-name-sm
or .mn--cs-name-lg
.
The colour selection variation, compact, can be added with .mn--cs-compact
on the div element with .mn--cs
.
The large variation is added with .mn--cs-large
.
<div class="mn--cs mn--cs-compact">
<input type="checkbox" name="compact-cs-check-example" id="compact-cs-example-0"
class="mnc--cs-input" checked>
<label for="compact-cs-example-0" class="mn--cs-label">
<span class="mn--cs-circle compact-cs-blue"></span>
<div class="mn--cs-name mn--cs-name-sm">Grana blue</div>
</label>
</div>
Data tables present raw data sets and give meaning to the data through their arrangement while making sure that the data is easily readable, scannable and comparable. Within the Grana website, whether mobile or desktop, data tables only display information – users should not be able to manipulate or the data that is presented within the cells.
Add .mn--datatable
to the table
tag.
Country | Refund Process | Refund Period | Refund Fee |
---|---|---|---|
Canada | 14 working days | 30 days | CA$17 |
United States | 14 working days | 30 days | US$8 |
<table class="mn--datatable">
<thead>
<tr>
<th>Country</th>
<th>Refund Process</th>
<th>Refund Period</th>
<th>Refund Fee</th>
</tr>
</thead>
<tbody>
<tr>
<td>Canada</td>
<td>14 working days</td>
<td>30 days</td>
<td>CA$17</td>
</tr>
<tr>
<td>United States</td>
<td>14 working days</td>
<td>30 days</td>
<td>US$8</td>
</tr>
</tbody>
</table>
The small data table is used in context where the data table might just be a part of a group of components within a page. Use a minimum padding of 20px in between each column. The widest item in the column (including data and column title) should delineate the column border. The data table should always fit the full width of the mobile grid and define each column by the nearest percentage ratio that fits the data.
Add .mn--datatable
and .mn--datatable-small
to the table
tag.
Country | Refund Process | Refund Period | Refund Fee |
---|---|---|---|
Canada | 14 working days | 30 days | CA$17 |
United States | 14 working days | 30 days | US$8 |
<table class="mn--datatable mn--datatable-small">
<thead>
<tr>
<th>Country</th>
<th>Refund Process</th>
<th>Refund Period</th>
<th>Refund Fee</th>
</tr>
</thead>
<tbody>
<tr>
<td>Canada</td>
<td>14 working days</td>
<td>30 days</td>
<td>CA$17</td>
</tr>
<tr>
<td>United States</td>
<td>14 working days</td>
<td>30 days</td>
<td>US$8</td>
</tr>
</tbody>
</table>
The lite data table is a variation that is applicable for both the large and small versions of the data table. This version allows for a smaller amount of information to be much more readily accessible to the audience. The lite data table consists of only two columns with no divider. The column title is outside of table body without its own row. The height of the rows and the internal padding rules still apply.
Add .mn--datatable
and .mn--datatable-lite
to the table
tag. You can also create a small datatable using .mn--datatable-small
. Be sure to include a colspan
to the header cell.
column title | |
---|---|
value 1 | value a |
value 2 | value b |
<table class="mn--datatable mn--datatable-small mn--datatable-lite">
<thead>
<tr>
<th colspan="2">column tile</th>
</tr>
</thead>
<tbody>
<tr>
<td>value 1</td>
<td>value a</td>
</tr>
<tr>
<td>value 2</td>
<td>value b</td>
</tr>
</tbody>
</table>
A dropdown allows the user to choose between multiple options.
The data attribute field-value
is added to the .field-dropdown-item
with the value to be passed to the hidden input field.
To disable a dropdown item, add the state class .is-disabled
.
<div class="field-group">
<div id="dropdown-example" class="field-dropdown field-dropdown-up">
<span class="field-dropdown-label"></span>
<div class="field-dropdown-list-container">
<ul class="field-dropdown-list">
<li class="field-dropdown-item" data-field-value="AD">Andorra</li>
<li class="field-dropdown-item" data-field-value="AU">Australia</li>
<li class="field-dropdown-item" data-field-value="AT">Austria</li>
<li class="field-dropdown-item" data-field-value="BH">Bahrain</li>
<li class="field-dropdown-item" data-field-value="BE">Belgium</li>
<li class="field-dropdown-item" data-field-value="BN">Brunei</li>
</ul>
</div>
<input type="hidden" name="dropdownExample">
</div>
</div>
$("#dropdown-example").fieldDropdown({
inputName: "dropdownExample",
defaultItem: "BH",
onselect: function(el) {
var isoCode = $(el).data("field-value");
},
});
Add .field-dropdown-invert
next to .field-dropdown
to have the list open upwards.
Links are the primary navigational element on the Grana website. Clicking on a link should always take users to another page. If the action taken by the user will change or manipulate data, use a button instead.
<a href="#" class="mn--link">see what's new</a>
Arrow links should exist as separate elements within a layout and should not be contained in the same container as a text field. They can be used in a number of font sizes depending on usage context. The arrow glyph also has corresponding small, medium, and large sizes.
Comes in two colours, .mn--link-arrow-almostblack
and .mn--link-arrow-white
.
<a href="#" class="mn--link-arrow mn--link-arrow-almostblack">show me where</a>
A slider selects a value within a range of values. The standard slider features one handle to select a single value.
The implementation requires a div element with a unique id, which the slider plugin uses. The element must contain the div .ui-slider-range-labels
with the child element .ui-slider-range-cur
.
Please refer to the jQuery UI Slider API for features.
<div id="slider-example">
<div class="ui-slider-range-labels">
<div class="ui-slider-range-cur"></div>
</div>
</div>
$('#slider-example').slider({
min: 0,
max: 100,
step: 5,
values: [ 20 ],
slide: function(event,ui) {
$(this).find('.ui-slider-range-cur').html('$' + ui.values[0]);
},
});
$('#slider-example').find('.ui-slider-range-cur').html('$' + $('#slider-example').slider('values',0));
A range slider allows a range to be chosen within the min and max values.
Similar to a regular slider, it requires a div element with a unique id, which the slider plugin uses. The element must contain the div .ui-slider-range-labels
with the child elements .ui-slider-range-min
and .ui-slider-range-max
.
<div id="slider-range-example">
<div class="ui-slider-range-labels">
<div class="ui-slider-range-min"></div>
<div class="ui-slider-range-max"></div>
</div>
</div>
$('#slider-range-example').slider({
range: true,
min: 0,
max: 100,
step: 5,
values: [ 20, 50 ],
slide: function(event,ui) {
$(this).find('.ui-slider-range-min').html('$' + ui.values[0]);
$(this).find('.ui-slider-range-max').html('$' + ui.values[1]);
},
});
$('#slider-range-example').find('.ui-slider-range-min').html('$' + $('#slider-range-example').slider('values',0));
$('#slider-range-example').find('.ui-slider-range-max').html('$' + $('#slider-range-example').slider('values',1));
The stepper allows users to change the value in increments specified in the step
attribute between the min
and max
values.
<div id="stepper-example" class="stepper">
<button class="stepper-button stepper-down"></button>
<input type="number" class="stepper-numeric"
min="1"
max="99"
step="1"
value="1"
readonly>
<button class="stepper-button stepper-up"></button>
</div>
$('#stepper-example').stepper();
A blue variation on the default stepper. Add .stepper-blue
to the main stepper element.
An outline variation on the default stepper. Add .stepper-outline
to the main stepper element.
The switcheroo is a component that allows the user to choose an exclusive selection from a number of options. This selection manipulates and changes the content shown to the user.
Include .mn--switcheroo-icon
next to .mn--switcheroo
if there is only an icon.
<ul class="mn--switcheroo">
<li class="mn--switcheroo-panel">
<input type="radio" id="switcheroo-example-credit" class="mn--switcheroo-input" name="switcheroo-example" value="credit" checked>
<label for="switcheroo-example-credit" class="mn--switcheroo-label">
<div class="mn--switcheroo-inner">
<div class="mn--switcheroo-icon-container mn--switcheroo-icon-example-1"></div>
<h4 class="mn--switcheroo-labeltext">credit card</h4>
<p class="mn--switcheroo-subtext">description and text</p>
</div>
</label>
</li>
<li class="mn--switcheroo-panel">
<input type="radio" id="switcheroo-example-paypal" class="mn--switcheroo-input" name="switcheroo-example" value="paypal">
<label for="switcheroo-example-paypal" class="mn--switcheroo-label">
<div class="mn--switcheroo-inner">
<div class="mn--switcheroo-icon-container mn--switcheroo-icon-example-2"></div>
<h4 class="mn--switcheroo-labeltext">paypal</h4>
<p class="mn--switcheroo-subtext">description and text</p>
</div>
</label>
</li>
<li class="mn--switcheroo-panel">
<input type="radio" id="switcheroo-example-cash" class="mn--switcheroo-input" name="switcheroo-example" value="cash">
<label for="switcheroo-example-cash" class="mn--switcheroo-label">
<div class="mn--switcheroo-inner">
<div class="mn--switcheroo-icon-container mn--switcheroo-icon-example-3"></div>
<h4 class="mn--switcheroo-labeltext">cash</h4>
<p class="mn--switcheroo-subtext">description and text</p>
</div>
</label>
</li>
</ul>
There’s a variation of the text only switcher with tighter padding between the panel border and the label. Keep the use of this variation to situations where content within an element is being manipulated or changed.
Include .mn--switcheroo-tight
next to .mn--switcheroo
.
Text input fields allow users on the site to input text, select text, and lookup data via auto-completion. They will usually appear in forms. Users may enter text, numbers, or mixed-format types of input.
Upon touching or selecting the text field two actions occur: The cursor is placed there and The keyboard is displayed (mobile device)
For mobile devices, the auto-correct functionality should be disabled for relevant inputs that include proper names, street names, email addresses, usernames, etc.
The auto-capitalisation functionality for the first letter of each text field and the first letter of each sentence should only be enabled where appropriate and if required by the locale. For example, this is especially relevant for input fields that: ask for proper noun inputs and contains sentence like messages, such as gift card messages
Standard text inputs have the class .field-text
and must be wrapped in .field-group
. The grouping includes the label with .field-label
and optional elements such as .field-helper
.
<div class="field-group">
<label for="field-preinput" class="field-label">Label text</label>
<input type="text" id="field-preinput" class="field-text" name="single-line-field">
<div class="field-helper">hint and helper text</div>
</div>
We can change the appearance and state of a standard input; simply add the .is-error
modifier to the input's .field-group
container. Javascript toggles the error and places a .field-helper
element with the appropriate message.
<div class="field-group is-error">
<label for="field-errorinput" class="field-label">Label text</label>
<input type="text" id="field-errorinput" class="field-text" name="single-line-field">
<div class="field-helper">error text</div>
</div>
Textareas must have the .field-textarea
class and are identical to textfield inputs in that they have the class .field-text
and must be wrapped in .field-group
. The grouping includes the label with .field-label
and optional elements such as .field-helper
. These multi-line fields may have a character counter if the textarea
attribute maxlength
is set.