UI Styles

UI Styles serves as the basis of every UI Element and 6M Component by containing several brand-themes. That way it is possible to switch fluently between different themes on runtime.

Download

With this sketch library you have access to the TUI Theme.

diamond TUI Styles Add Library to Sketch https://www.sketch.com/s/10dbc247-ef41-488a-959b-6d0672e79d61

Install

To use UI Styles in your development enviroment, you need to install tuidesign as a dependency. Therefore create a .npmrc file in your project folder that contains:

registry=https://bin.source.tui/artifactory/api/npm/tui-npm

afterwords run following command in your terminal:

npm install --save tuidesign

Usage

In order to have access to all variables, the stylesheet must be imported into all SCSS files.

// main.scss
@import "./node_modules/tuidesign/ui-style/styles/main.scss";

UI styles uses SCSS maps to order the several variables it contains. To access those you need to use the mixin useTheme, that also generates a fallback for older browsers like IE11 and Edge. That mixin looks like that:

@include useTheme([css property], "[map].[key]")

Example:

@include useTheme(color, "color.default");

The example would set the color of the selected element to the value of the key default. For multiple property settings you use the mixin this way.

Example:

@include useTheme((color: "color.default", background-color: "color.white"));

The value of a key depends on the brand of the parent element. You can set the brand by using the attribute brand="".

Example:

<div brand="tui">
  ...content
</div>

Usage

Grid System

Tuidesign is based on a responsive mobile-first grid system with 12 columns. All breakpoints, grid and spacings are defined as variables and mixins.

Breakponts

// _layout.scss

$breakpoints: (
  xs: 320px,
  sm: 480px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1440px
) !default;
// _component.scss

.element {
  color: red;

  @include respond-to(xs) {
    color: blue;
  }
}
// component.css

.element {
  color: red;
}

@media (min-width: 320px) {
  .element {
    color: blue;
  }
}

Layout

// _config.scss
$layout-columns: 12 !default;
$layout-gutter-width: 20px !default;
$layout-float-breakpoint: 1200px !default;
$layout-max-width: ($layout-float-breakpoint + $layout-gutter-width) !default;
// component.scss
.container {
  max-width: $layout-max-width;
}
// component.css
.container {
  max-width: 1220px;
}

Layer system

The layer system helps with the uniform hierarchical structure of elements and components within the views.

// _config.scss
$layers: (
  hidden: -1,
  default: 0,
  custom: 1,
  dropdown-backdrop: 900,
  dropdown: 1000,
  fixed: 1100,
  overlay-backdrop: 1200,
  overlay: 1300,
  popover: 1400,
  tooltip: 1500
) !default;
// component.scss
.overlay {
  z-index: layer(overlay);
}
.element {
  z-index: (layer(default) + 1);
}
// component.css
.overlay {
  z-index: 1300;
}
.element {
  z-index: 1;
}

Spacing

// _config.scss
$spacing-xsmall: 5px !default;
$spacing-small: 10px !default;
$spacing-medium: 20px !default;
$spacing-large: 30px !default;
$spacing-xlarge: 50px !default;
$spacing-xxlarge: 80px !default;
$spacing-xxxlarge: 130px !default;
// component.scss
.element {
  padding: $spacing-medium;
}
// component.css
.element {
  padding: 30px;
}

Motion

For the use of our motion system we have created three mixins, which should simplify the use of micro interactions and motion.

CSS Transition

For the implementation of a transition there is a mixin of the same name. This contains the browser prefixes and also offers some presets for the duration as well as for the timing-function.

@include transition(attribute name, duration, timing-function, delay);

attribute name: Here you can define which css attribute should be animated.

duration: This defines the duration of the transition. there are three presets for this:

  • fast: 0.2s
  • medium: 0.5s
  • slow: 0.6s

timing-function: This property specifies the speed curve of the transition. The property is initially set as ease-in-out but if needed the brandcurve can be chosen by using the value overshoot.

  • initially: ease-in-out
  • overshoot: cubic-bezier(.65, .05, .4, 1.3);

delay Defines the timedelay until the transition starts.

Transition Mixin 
@mixin transition($attribute, $duration, $timing: ease-in-out, $delay: 0s) {

  @if $duration == "fast" {
    $duration: .2s;
  } @else if $duration == "medium" {
    $duration: .5s;
  } @else if $duration == "slow" {
    $duration: .6s;
  } @else {
    @error "The second attribute, duration, can only be assigned three values(slow, medium, fast)";
  }

  @if $timing == "overshoot" {
    $timing: cubic-bezier(.65, .05, .4, 1.3);
  }

  -webkit-transition: $attribute $duration $timing $delay;
  -moz-transition: $attribute $duration $timing $delay;
  -ms-transition: $attribute $duration $timing $delay;
  -o-transition: $attribute $duration $timing $delay;
  transition: $attribute $duration $timing $delay;
}
Example 

.rectangle {
  height: 50px;
  width: 50px;
  color: red;
  transform: rotate(0deg);
}

.active {
  @include transition(transform, slow);

  transform: rotate(360deg);
}
Click
me!

CSS Animation

For the implementation of a animation there are two mixins necessary. One for the keyframes and the other for the animation itself.

Keyframes:

The keyframes mixin contains the browser prefixes for Google Chrome, Safari, Android Browser, Firefox, Opera, Internet Explorer and Edge.

@include keyframes(animation name) {
  content
}

animation name: Identifies the keyframes so they can be used in an animation.

content: Here the content is placed that defines the animation of css attibutes.

Keyframes Mixin 
@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
 @content;
 }
  @-moz-keyframes #{$name} {
 @content;
 }
  @-o-keyframes #{$name} {
 @content;
 }
  @keyframes #{$name} {
 @content;
 }
}

Animation:

The animation mixin contains browser prefixes and also offers some presets for the duration as well as for the timing-function and a set of other properties.

@include animation(animation name, duration, timing function, iteration, delay, direction, $fillmode);

animation name: Here you can call the keyframes you want to animate.

duration: This defines the duration of the transition. there are three presets for this:

  • fast: 0.2s
  • medium: 0.5s
  • slow: 0.6s

timing-function: This property specifies the speed curve of the transition. The property is initially set as ease-in-out but if needed the brandcurve can be chosen by using the value overshoot.

  • initially: ease-in-out
  • overshoot: cubic-bezier(.65, .05, .4, 1.3);

iteration: Here you can define the number of iterations the animation should have (from 1 to infinite). Initially set on 1.

delay: Defines the timedelay until the animation starts. Initially set on 0s.

direction: This defines if the animation plays in the direction given by the keyframes or backwards. Initially set on normal.

fillmode: Defines if the animationed attribute stays in its final status or retunrs to its start value. Initially set on forwards.

Animation Mixin 
@mixin animation ($animation, $duration, $timing: ease-in-out, $iteration: 1, $delay: 0s, $direction: normal, $fillmode: forwards) {

  @if $duration ==  "fast" {
    $duration: .2s;
  } @else if $duration ==  "medium" {
    $duration: .5s;
  } @else if $duration ==  "slow" {
    $duration: .6s;
  } @else {
    @error "The second attribute, duration, can only be assigned three values(slow, medium, fast)";
  }

  @if $timing ==  "overshoot" {
    $timing: cubic-bezier(.65, .05, .4, 1.3);
  }

  -webkit-animation: $animation $duration $timing $delay $iteration $direction $fillmode;
  -moz-animation: $animation $duration $timing $delay $iteration $direction $fillmode;
  -ms-animation: $animation $duration $timing $delay $iteration $direction $fillmode;
  -o-animation: $animation $duration $timing $delay $iteration $direction $fillmode;
  animation: $animation $duration $timing $delay $iteration $direction $fillmode;
}
Example 

@include keyframes(rotate) {
  0% {transform: rotate(0deg);},
  100% {transform: rotate(360deg);}  
}

.rectangle {
  height: 50px;
  width: 50px;
  color: red;
  @include animation(rotate, slow, overshoot, infinite);
}