Version 0.40.0

Introduction

Full documentation

Full documentation of Saagie UI is available in the Saagie Design System.

Installation

Install Saagie UI in your project with NPM:

npm install saagie-ui --save

CSS (not recommended)

Add the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

<link rel="stylesheet" href="/saagie-ui/dist/css/saagie-ui.css">

SCSS (recommended)

Import the SCSS in your project main SCSS file.

@import "~saagie-ui/src/scss/index";

JavaScript

Some of our components require the use of JavaScript.

Import the individual component JS into your own wrapper component.
And follow each component documentation to configure and init components.

Example:

import { Tooltip } from 'saagie-ui';

new Tooltip(myElement, {}).init();

Starter HTML template

Be sure to have your pages set up with the latest design and development standards.
That means using an HTML5 doctype, including a viewport meta tag for proper responsive behaviors and add the #sui-root ID on the <body> tag (or any other root tag) to enable Saagie UI helpers classes.
Put it all together and your pages should look like this:`

<!doctype html>
<html lang="en">
  <head>
    <title>Hello, world!</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Import the CSS -->
    <link rel="stylesheet" href="/saagie-ui/dist/css/saagie-ui.css">
  </head>
  <body id="sui-root">
    <h1>Hello, world!</h1>
  </body>
</html>