Skip to content
lucienbertin edited this page Mar 9, 2016 · 4 revisions

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 !