Getting started with LuccaUI

Install

First install lucca-ui by lauching the following command in your project directory :

bower install lucca-ui -S

---

Important: Lucca-ui has no real dependencies, but it is highly recommended to use normalize (css reset).

---

Import it

You'll have to firstly import the font Source Sans Pro, you can use this code in your less file :

// Google Fonts
@import "http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic,700italic";

After that, you must import the main lucca-ui less file in your own one (don't forget to replace PROJECT_PATH with the path leading to your project directory):

// Lucca UI
// ====
@import "PROJECT_PATH/bower_components/lucca-ui/src/lucca-ui";

Overriding

You can choose to override some things such as colors. To do that you'll have to tell lucca-ui where to find your overridings by overriding those two variables :

@theme: "";
@themeDir: "";

For example, by giving those two values :

@theme: "luccaUI-overrides";
@themeDir: "/";

Lucca-ui will fetch your new colors in the file located at /luccaUI-overrides/definitions/colors.overrides.less .

You'll find what are the available colors in the main file.

Enjoy !

Go to the demo page to know what you can do with this magnificent tool !