Overview - Quick Start

Introduction

GusUI is a front-end UI library that is written in pure HTML, CSS and JavaScript. That means GusUI can be used in any web environnement, all it needs is a modern browser, such as Google Chrome, Firefox,...
The library is powered by the Web Component technology.

Installation

Using GusUI require the installation of npm, which is the package manager of NodeJS. You'll need both of them in order to install GusUI.
As GusUI is distributed using npm, it is fairly easy to install.

First, make sure you're in a NodeJS project. If not, create one using this command in the terminal from the root of your project :
npm init


Once you're done with setting up the project, just install the library using :
npm install gus-ui


The library folder (called "gus-ui") should have appeared in the "node_modules" folder.
It means the library was successfully imported in your project.

Initiating the library

Once the library is installed in your project, all you need to do is import its main file to access the components.
GusUI is imported as a module in the head part of your HTML file, just as below :
code


The "src" attributes should then lead to the gus_ui.js file, which is at the root of the library folder.
Make sure that all your files are pointing correctly to the library's main file.

Using GusUI

GusUI requires to initiate the UI using a main "gus-ui" element.
You can just create it as a child of your body, as below :
code


The "gus-ui" element has 3 attributes :
mode (String): dark | light -> correspond to the theme of the UI
color-light (#HexColor): correspond to the primary color of the UI in light mode
color-dark (#HexColor): correspond to the primary color of the UI in dark mode


Once you're done setting up the UI, you can allready start creating components inside.
Every other HTML5 component can be created inside the UI.
Now have fun playing with the components.