Get started with LuccaUI 2.0 - LuccaSA/lucca-ui GitHub Wiki
Run bower install lucca-ui in your favorite command tool.
In order to compile your project scss files (and luccaUI!), you will need a sass transpiler of your choice. The original Ruby transpiler is fine, but we strongly recommend using a libSass based one.
For example, install the node-sass wrapper: npm install node-sass.
Next, you may want to automate transpilation through the use of Grunt (or Gulp). We won't explain how to create a task in one of these automators here (grunt-sass is awesome for Grunt). Nevertheless, it must be noted that you need to give libsass several paths for it to be able to find all the files required for your project:
...
options:{
outputStyle: 'compressed', // 'expanded', 'compressed', 'compact'
sourcemap: 'inline',
includePaths: [
// (optional) Path to your lucca-ui theme overrides
'scss/my-theme',
// Add this in order to be able to create a partial (non exhaustive) theme
// As of yet (sass 3), there's no way to make an @import optional
// See here: https://github.com/sass/sass/issues/779
'bower_components/lucca-ui/scss/themes/sample',
],
},
...your/project/scss/main.scss
#myAwesomeApp {
@import "bower_components/lucca-ui/scss/lucca-ui.namespaced";
}One of the core principles behind luccaUI was to get a style framework that does not bleed accross your page. There are two ways to achieve this:
- Using a namespace
- Prefixing all classes
Note: both options are not mutually exclusive. You can use both if so desired.
The idea is to import luccaUI in a specific namespace, ie an html selector. Thus, all classes will only take effect on elements inside this parent element.
In practice:
#myApp {
@import "bower_components/lucca-ui/scss/lucca-ui.namespaced";
}In this case, luccaUI styles will only apply to elements placed inside the <div id="myApp"></div> element.
If your don't want to namespace luccaUI, just import the global dist like this:
@import "bower_components/lucca-ui/scss/lucca-ui.global";Here, the goal is to apply styles on the condition the defined element bears an extra specific class. The default prefix is .lui ; but it can be freely modified to anything through the $prefix variable. For example:
$prefix: ".lucca";
@import "bower_components/lucca-ui/scss/lucca-ui.global.scss";<button class="lucca primary button">My button</button>
```
> Note: you can disable prefixing by setting the `$prefix` variable to null, ie `$prefix: '';`.
## Objects: references, adjectives, elements, utilities and plugins
There are several distinct objects in LuccaUI:
- **references**: these are pure variables that do not define any style by themselves. They serve as common references for the other objects. The color scheme, or the sizing scale, are references.
- **adjectives**: these are global adjectives that can be applied to anything. It applies a set of properties to said element. The raised shadow effect and rounded border-radius are examples of adjectives. *Note: adjectives are often used as @extend basis.*
- **elements**: these are the meat of the framework. They are your semantic UI building blocks: `button`, `label`, `menu`, and so on... They often have different styles (`filling button`, `wired button`) and extras.
- **utilities**: a collection of mixins and functions.
- **plugins**: elements that do not have their place in the core framework but are nonetheless distributed in the component all the same. The main plugin is the `angular-ui-reskin` one, which can be used as an alternative stylistic approach to Bootstrap for Angular UI Bootstrap components.
## Theming
LuccaUI comes with sensible defaults, but most of the elements styles can be customized. This is where the **theming** feature comes in.
Theming consists in overriding said defaults based on your needs. It must be noted that any theme will inherit all the defaults set in the luccaUI default theme.
[[More about theming|Theming-(2.0)]]