@terminus/ui-styles

Styles

A collection of base CSS for the UI library and a collection of SCSS mixins and functions.

Table of Contents

• Usage
  • Base CSS
  • Mixins, variables & functions
• SCSS helpers
  • Breakpoints
    • Available breakpoints
  • Controls
    • Input placeholder
  • Layout
    • Flexbox
    • Grid
    • Opposite direction
    • Responsive ratio
    • Take space
  • Scrollbars
    • Visible scrollbars
    • Hidden scrollbars
  • Shapes
    • Triangle
  • Spacing
  • Typography
    • Typography styles
    • Truncate overflow
  • z-index

Usage

NOTE: Many styles are now driven by our design tokens. See available tokens here.

Base CSS

Import base CSS and theme styles in the root stylesheet:

@import '~@terminus/ui-styles/terminus-ui.css';

Mixins, variables & functions

Import helper mixins in any SCSS file that needs access:

@import '~@terminus/ui-styles/helpers';

.example {
  @include take-space;
}

SCSS helpers

Breakpoints

Predefined breakpoints for a responsive layout. We should be building 'mobile first' so the available breakpoints are designed from smallest to largest.

.foo {
  width: 100%;
  
  @include bp(layout-gt-sm) {
    width: 30%;

    &:not(:last-of-type) {
      margin-right: 2%;
    }
  }
}

Available breakpoints

• layout-xs
• layout-gt-xs
• layout-sm
• layout-gt-sm
• layout-med
• layout-gt-med
• layout-lg
• layout-gt-lg
• layout-xl

Controls

Input placeholder

Easily style the placeholder for an input:

input {
  @include input-placeholder {
    color: red;
  }
}

Layout

Flexbox

flex-container

Parameters and their defaults:

flex-container($direction: row, $wrap: nowrap, $mainAxis: normal, $crossAxis: normal)

Example usage:

.foo {
  @include flex-container($direction: row-reverse, $crossAxisAlign: center);
}

.bar {
  @include flex-container(row, nowrap, flex-start, center);
}

flex-item

Parameters and their defaults:

flex-item($flexGrow: 0, $flexShrink: 1, $flexBasis: auto, $order: 0, $alignSelf: auto)

Example usage:

.foo {
  @include flex-item($flexGrow: 1, $flexBasis: 50%, $alignSelf: baseline);
}

.bar {
  @include flex-item(1, 1, 100%);
}

center-content

Example usage:

// Children of `.foo` will be verticaly and horizontally centered:
.foo {
  @include center-content;
}

Grid

grid-container

Parameters and their defaults:

grid-container($columns: null, $rows: auto, $gap: 1em)

Example usage:

.foo {
  @include grid-container(150px auto 150px, repeat(3, 100px));
}

.bar {
  @include grid-container(repeat(5, 6vw), repeat(5, 6vw));
}

grid-column

Parameters and their defaults:

grid-column($start: null, $end: null)

Example usage:

.foo {
  @include grid-column(1, 4);
}

.bar {
  @include grid-column(1, span 3);
}

.baz {
  @include grid-column;
}

Opposite direction

Return the opposite direction.

.foo {
  $direction: bottom;

  @if $direction == bottom {
    top: 100%;
  }

  // Will output: `border-top: 4px solid black;`
  border-#{opposite-direction($direction)}: 4px solid black;
}

Responsive ratio

Parameters and their defaults:

responsive-ratio($x, $y, $pseudo: true, $image: null)

Example usage:

.foo {
  @include responsive-ratio(3, 4);
}

.bar {
  @include responsive-ratio(20, 9, true, url('/images/landing-hero.jpg'));
}

Take space

Parameters and their defaults:

take-space($margin: 0)

Example usage:

// .inner will completely fill the space inside .outer
.outer {
  position: relative;
  .inner {
    @include take-space;
  }
}

// .inner will fill the space inside .outer leaving a 1em space around itself
.outer {
  position: relative;
  .inner {
    @include take-space(1em);
  }
}

Scrollbars

Visible scrollbars

Set the style to make the scrollbars always visible:

.container {
  @include visible-scrollbars;
}

.container-2 {
  @include visible-scrollbars(red);
}

Hidden scrollbars

Set the style to make the scrollbars always hidden:

.container {
  @include hidden-scrollbars;
}

Shapes

Triangle

Create a triangle element. Useful for tooltips etc.

Parameters and their defaults:

triangle($direction: top, $color: currentcolor, $size: 1em)

input {
  @include triangle(top);
}

Spacing

NOTE: We should be migrating to rely on design tokens for spacing rather than this mixin.

ul {
  margin-bottom: spacing;

  li {
    margin-bottom: spacing(large, 2);
  }
}

Typography

Typography styles

A mixin to assist setting font styles.

NOTE: We are transitioning our typography styles to be set through design tokens in place of this mixin.

.foo {
  @include typography;
}

.bar {
  @include typography(display, 2, monospaced);
}

Truncate overflow

Truncate text and show an ellipsis.

.foo {
  @include truncate-overflow;
}

z-index

We manage our z-index' through a Sass list. This allows infinite scalability without relying on large numbers.

.foo {
  @include z(drawer);
}

.bar {
  @include z(global-header);
}