UTS Style Guide

1.1 Colors View in a new window

Use the color() function to add colors to CSS properties. Documentation is available in John Albins Github site.

Twig: chroma-kss-markup.twig

Example

default

Descriptive color names for use in "functional" color names below.

color(white) uses the color: #fff

color(rich black) uses the color: #000

color(black) uses the color: #323232

color(blue) uses the color: #0f4beb

color(rich blue) uses the color: #0d41d1

color(red) uses the color: #ff2305

color(dark grey) uses the color: #767676

color(gun metal grey) uses the color: #707070

color(darker grey) uses the color: #595959

color(grey) uses the color: #b2b2b2

color(light grey) uses the color: #ebebeb

color(medium grey) uses the color: #7a7a7a

color(mid-light grey) uses the color: #ccc

color(extra-light grey) uses the color: #ddd

color(super-light grey) uses the color: #f5f4f5

color(ultra-light grey) uses the color: #f1f1f1

color(green) uses the color: #32cd32

color(orange) uses the color: #f09d38

color(off white) uses the color: #fcfcfb

color(maroon oak) uses the color: #5d0b0b

color(dark blue) uses the color: #123286

primary

Colors used by design components.

Markup

<!-- This markup is auto-generated from Sass with chroma-kss-markup(). Do not modify. --><div class="kss-style"><h3 class="chroma-kss__title">default</h3><p class="chroma-kss__description">Descriptive color names for use in "functional" color names below.</p><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(white)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(rich black)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #323232"></span><code class="chroma-kss__variable">color(black)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#323232</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #0f4beb"></span><code class="chroma-kss__variable">color(blue)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#0f4beb</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #0d41d1"></span><code class="chroma-kss__variable">color(rich blue)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#0d41d1</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #ff2305"></span><code class="chroma-kss__variable">color(red)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#ff2305</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #767676"></span><code class="chroma-kss__variable">color(dark grey)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#767676</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #707070"></span><code class="chroma-kss__variable">color(gun metal grey)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#707070</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #595959"></span><code class="chroma-kss__variable">color(darker grey)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#595959</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #b2b2b2"></span><code class="chroma-kss__variable">color(grey)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#b2b2b2</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #ebebeb"></span><code class="chroma-kss__variable">color(light grey)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#ebebeb</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #7a7a7a"></span><code class="chroma-kss__variable">color(medium grey)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#7a7a7a</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #ccc"></span><code class="chroma-kss__variable">color(mid-light grey)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#ccc</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #ddd"></span><code class="chroma-kss__variable">color(extra-light grey)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#ddd</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f5f4f5"></span><code class="chroma-kss__variable">color(super-light grey)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f5f4f5</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f1f1f1"></span><code class="chroma-kss__variable">color(ultra-light grey)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f1f1f1</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #32cd32"></span><code class="chroma-kss__variable">color(green)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#32cd32</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f09d38"></span><code class="chroma-kss__variable">color(orange)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f09d38</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fcfcfb"></span><code class="chroma-kss__variable">color(off white)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fcfcfb</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #5d0b0b"></span><code class="chroma-kss__variable">color(maroon oak)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#5d0b0b</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #123286"></span><code class="chroma-kss__variable">color(dark blue)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#123286</code></span></div><h3 class="chroma-kss__title">primary</h3><p class="chroma-kss__description">Colors used by design components.</p></div>

1.2 Breakpoints View in a new window

Use the respond-to() mixin to use named breakpoints. Documentation is available in the Breakpoint wiki pages.

Mobile first breakpoints

big-phone-up - 400px+
tablet-portrait-up - 600px+
tablet-landscape-up - 900px+
laptop-up - 1200px+
desktop-up - 1600px+

Device specific breakpoints

small-phone-only - 0 to 399px
phone-only - 0 to 599px
tablet-portrait-only - 600px to 899px
tablet-landscape-only - 900px to 1199px
laptop-only - 1200px to 1599px

1.3 Assets View in a new window

Eyeglass incorporates an asset management system that can be used with the asset-url() function. All assets are relative to the src directory.

e.g. asset-url(components/nav/hamburger.png)

1.4 Inline SVG View in a new window

Eyeglass Inline SVG allows us to inline svg files as a correctly url-encoded data URI. use the embed-svg() function, with a url relative to the src directory.

e.g. embed-svg(form/select/select-arrow.svg)

1.5 Typey View in a new window

Typey is used to manage and resize units and font sizes. Some documentation is available in Jacks typey repo.