Colors

The colors are defined as a map in _common/_colors.scss.

Usage:

    .primary-blue {
            background: color('primary', 'primary');
        }
    
        .phone-input {
            color: color('input', 'border')
        }

Color Palette

Primary

primary

light

translucent

divider

disabled

Buttons

primary

hover

alternative

Text

primary

subheading

title

subtitle

body

highlight

input

Anchor

negative

alternative

Borders

primary

light

gallery-item

Background

primary

secondary

light

gallery-item

translucent

hover

Input

primary

disabled

border

focus

mobile-border

Feedback

success

warning

error

info

text

<h1>Color Palette</h2>
    
    	<h3 class="subheading subheading--divider">Primary</h3>
    	<div class="color-container">
    		<div class="color color--primary-primary">primary</div>
    		<div class="color color--primary-light">light</div>
    		<div class="color color--primary-translucent">translucent</div>
    		<div class="color color--primary-divider">divider</div>
    		<div class="color color--primary-disabled">disabled</div>
    	</div>
    
    	<h3 class="subheading subheading--divider">Buttons</h3>
    	<div class="color-container">
    		<div class="color color--buttons-primary">primary</div>
    		<div class="color color--buttons-hover">hover</div>
    		<div class="color color--buttons-alternative">alternative</div>
    	</div>
    
    	<h3 class="subheading subheading--divider">Text</h3>
    	<div class="color-container">
    		<div class="color color--text-primary">primary</div>
    		<div class="color color--text-subheading">subheading</div>
    		<div class="color color--text-title">title</div>
    		<div class="color color--text-subtitle">subtitle</div>
    		<div class="color color--text-body">body</div>
    		<div class="color color--text-highlight">highlight</div>
    		<div class="color color--text-input">input</div>
    		<div class="color color--text-modal">modal</div>
    	</div>
    
    	<h3 class="subheading subheading--divider">Anchor</h3>
    	<div class="color-container">
    		<div class="color color--anchor-negative">negative</div>
    		<div class="color color--anchor-alternative">alternative</div>
    	</div>
    
    	<h3 class="subheading subheading--divider">Borders</h3>
    	<div class="color-container">
    		<div class="color color--borders-primary">primary</div>
    		<div class="color color--borders-light">light</div>
    		<div class="color color--borders-gallery-item">gallery-item</div>
    	</div>
    
    	<h3 class="subheading subheading--divider">Background</h3>
    	<div class="color-container">
    		<div class="color color--background-primary">primary</div>
    		<div class="color color--background-secondary">secondary</div>
    		<div class="color color--background-light">light</div>
    		<div class="color color--background-modal">modal</div>
    		<div class="color color--background-gallery-item">gallery-item</div>
    		<div class="color color--background-translucent">translucent</div>
    		<div class="color color--background-hover">hover</div>
    	</div>
    
    	<h3 class="subheading subheading--divider">Input</h3>
    	<div class="color-container">
    		<div class="color color--input-primary">primary</div>
    		<div class="color color--input-disabled">disabled</div>
    		<div class="color color--input-border">border</div>
    		<div class="color color--input-focus">focus</div>
    		<div class="color color--input-mobile-border">mobile-border</div>
    	</div>
    
    	<h3 class="subheading subheading--divider">Feedback</h3>
    	<div class="color-container">
    		<div class="color color--feedback-success">success</div>
    		<div class="color color--feedback-warning">warning</div>
    		<div class="color color--feedback-error">error</div>
    		<div class="color color--feedback-info">info</div>
    		<div class="color color--feedback-text">text</div>
    	</div>

Grid

Usage:

    .row {
            @include row();
        }

You can define how many columns that element takes by sending it as a parameter. The base grid has 12 columns.

    .col {
            &--3 {
                @include column(3);
            }
        }

You can also send the total number of columns as a second parameter.

    .col {
            &--3 {
                @include column(3, 24);
            }
        }

Or have a column that takes the full-width.

    .col {
            &--full-width {
                @include column(12);
            }
        }

1

11

2

10

3

9

4

8

5

7

6

Full width

<div>
    	<div class="row">
    		<div class="col col--1 col--centered">1</div>
    		<div class="col col--11 col--centered">11</div>
    	</div>
    	<div class="row">
    		<div class="col col--2 col--centered">2</div>
    		<div class="col col--10 col--centered">10</div>
    	</div>
    	<div class="row">
    		<div class="col col--3 col--centered">3</div>
    		<div class="col col--9 col--centered">9</div>
    	</div>
    	<div class="row">
    		<div class="col col--4 col--centered">4</div>
    		<div class="col col--8 col--centered">8</div>
    	</div>
    	<div class="row">
    		<div class="col col--5 col--centered">5</div>
    		<div class="col col--7 col--centered">7</div>
    	</div>
    	<div class="row">
    		<div class="col col--6 col--centered">6</div>
    		<div class="col col--6 col--centered">6</div>
    	</div>
    	<div class="col col--centered col--full-width">Full width</div>
    </div>

Typography

Usage:

.typography {
        &--heading {
            @include heading();
        }
        &--subheading {
            @include subheading();
        }
        &--title {
            @include title();
        }
        &--subtitle {
            @include subtitle();
        }
        &--body {
            @include body();
        }
        &--button-text {
            @include button-text();
        }
        &--anchor {
            @include anchor();
        }
    }

uniQ - Uniplaces Internal CSS Framework/Toolkit

<div class="typography typography--heading">
    	uniQ - Uniplaces Internal CSS Framework/Toolkit
    </div>
    <div class="typography typography--title">
    	uniQ - Uniplaces Internal CSS Framework/Toolkit
    </div>
    <div class="typography typography--subheading">
    	uniQ - Uniplaces Internal CSS Framework/Toolkit
    </div>
    <div class="typography typography--subtitle">
    	uniQ - Uniplaces Internal CSS Framework/Toolkit
    </div>
    <div class="typography typography--body">
    	uniQ - Uniplaces Internal CSS Framework/Toolkit
    </div>
    <div class="typography typography--button-text">
    	uniQ - Uniplaces Internal CSS Framework/Toolkit
    </div>
    <div class="typography typography--anchor">
    	uniQ - Uniplaces Internal CSS Framework/Toolkit
    </div>