colors

These are the standard mangolian colors. They can be added to properties using the helper function, mn-color("almostblack").

  • white
    #fffff
  • lightgrey
    #707881
  • darkgrey
    #4c5258
  • styleguidebackground
    #f9f9f9
  • brandblue
    #0083cb
  • almostblack
    #1d1f21
  • disabled
    #cad0d3
  • green
    #6fc49f
  • red
    #ff5a5f

grid

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.

example

<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>

breakpoints

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

visiblity

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.

only xs visible
sm and up visible
md and up visible
lg and up visible
only xl visible

example


<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>

typography

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.

example


$sofiapro: "sofiapro", arial, sans-serif;

font-family: $sofiapro;

type sizes

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") the owls are not what they seem
10px mn-type("small") the owls are not what they seem

sass example

.container-title {
  @include mn-type("title");
  color: $primary-text;
  text-transform: lowercase;	
}

line-height

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.

font weight

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

buttons

These are the basic button styles that are used on v4 of the Grana website. They are used to initialise an action, either in the background or the foreground of an experience. Buttons normally activate through a click or a tap depending on desktop or mobile use.

primary button

Use when it’s the principle call to action on the page. The colour of the primary button should be flexible to the context of its use — as long as it has the primary dominance of the page.

Add the .mn--bt-primary class to a clickable element such as an anchor or button. You must include a colour variation: .mn--bt-primary-blue, .mn--bt-primary-almostblack, or .mn--bt-primary-white.

shop now shop now

example

<a href="#" class="mn--bt-primary mn--bt-primary-blue">shop now</a>
<a href="#" class="mn--bt-primary mn--bt-primary-almostblack">shop now</a>
<button class="mn--bt-primary mn--bt-primary-white">shop now</button>

ghost button

Use this button to replace the primary button there is no other secondary button or when attention should be given to the background image in which the button lives. Refer to above for guidance on button sets.

Add the .mn--bt-ghost class to a clickable element such as an anchor or button. You must include a colour variation: .mn--bt-ghost-blue or .mn--bt-primary-almostblack.

shop now shop now

example

<a href="#" class="mn--bt-ghost mn--bt-ghost-blue">shop now</a>
<a href="#" class="mn--bt-ghost mn--bt-ghost-almostblack">shop now</a>

secondary button

Use for secondary actions of each page. These buttons should not function as links but as actions that change what or how data is displayed on the page (view more, show all, etc).

Add the .mn--bt-secondary class to an anchor tag. You must include a colour variation: .mn--bt-secondary-almostblack or .mn--bt-secondary-white.

shop now shop now

example

<a href="#" class="mn--bt-secondary mn--bt-secondary-almostblack">shop now</a>
<a href="#" class="mn--bt-secondary mn--bt-secondary-white">shop now</a>

siamese button

This variation is used where additional information or icon is attached to the button. The information or icon should give the user more context to the function or action of that button.

Both .mn--bt-siamesetext and .mn--bt-siameseicon can be combined with other buttons styles. The siamese icon has one variation, .mn--bt-siameseicon-arrow.

add to bagIRD1,000,000
shop now

example

<a href="#" class="mn--bt-primary mn--bt-primary-blue mn--bt-siamesetext">
  <div class="mn--bt-siamesetext-inner">
    add to bag<span class="mn--bt-siamesetext-right">IRD1,000,000</span>
  </div>
</a>
<a href="#" 
  class="mn--bt-ghost 
  mn--bt-ghost-almostblack 
  mn--bt-siameseicon
  mn--bt-siameseicon-arrow">shop now</a>

checkbox

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.

example

<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

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.

example

<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>

datatable

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

example

<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>

datatable small

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

example

<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>

datatable lite

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

example

<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>

radio button

Radio buttons are used in situations where there are two or more options, and the user may only select one.

The input field of type radio must have the class .radiobutton and can be wrapped in .field-group. The input field must have a label sibling containing an inline span with the class .radiobutton-label-name. Use checked to choose the initial option.

Add .radiobutton-deselect to the input to allow for deselection.

example

<div class="field-group">
  <input type="radio" name="radio-example" id="radio-example-0" class="radiobutton" checked>
  <label for="radio-example-0">
    <span class="radiobutton-label-name">
      option 1
    </span>
  </label>
 </div>

error radio button

Radio buttons have an error state. Add the .is-error class to the input tag.

example

<div class="field-group">
  <input type="radio" name="radio-error-example" id="radio-error-example-0" class="radiobutton is-error">
  <label for="radio-error-example-0">
    <span class="radiobutton-label-name">
      option 1
    </span>
  </label>
 </div>

slider

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.

html example

<div id="slider-example">
  <div class="ui-slider-range-labels">
    <div class="ui-slider-range-cur"></div>
  </div>
</div>
  

js example

$('#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));

range slider

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.

html example

<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>
  

js example

$('#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));

stepper

The stepper allows users to change the value in increments specified in the step attribute between the min and max values.

html example

<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>

js example

$('#stepper-example').stepper();

blue stepper

A blue variation on the default stepper. Add .stepper-blue to the main stepper element.

outline stepper

An outline variation on the default stepper. Add .stepper-outline to the main stepper element.

switcheroo

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.

example


<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>

switcheroo tight

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.

textfield

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 textfield

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.

hint and helper text

example

<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>

error textfield

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.

error text

example


<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>

textarea

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.