/Smile

LIPS Design System

Primary LanguageCSS

Smile

Smile is our design system. It contains guidelines for interface components and page layouts. It's connected to the brand guidelines in order to create consistent voice and tone content and illustrations. Also, every interface guideline is programmed with Sass and are documented automatically by SassDoc here.

Table of contents

Getting started

Adding Smile to a project

There are two different files that can be imported. Both contain the same essential styles, but one is designed for devices with less computer power.

  • Determine a system of device detection that determines which version of Smile is going to be imported.
  • Add the correct hyperlink reference to the link tags.
  • Choose a correct name for Smile Budget.
<head>
  <!-- Smile -->
  <link rel="stylesheet" href="smile.min.css">
  <!-- Smile Budget -->
  <link rel="stylesheet" href="smile-budget.min.css">
</head>

Developing for Smile

Prerequisites

  1. Xcode
  2. Homebrew
  3. Node
  4. npm
  5. Sass
  6. Gulp
  7. Gulp Dependencies
npm install --save-dev

Cloning

  1. Clone the repo
  2. Change to the correct branch.

Further Reading

  • Testing - Design and carry out unit tests for mixins and functions using True and Gulp.
  • Documentation - Write complete and useful documentation for Sass using SassDoc and Gulp.