Fully customizable

As you know, now that you've read the overview documentation, components are "splited" in at least 2 styling parts.

Here's a quick resume of these:

1. bare: This scope named bare represent all the structural CSS of the component.
2. lnf: This scope named lnf (look and feel) represent all the visual CSS of the component.

Example of fully styled button integration:

To integrate the button component inside your stylesheet with all his scopes, here's the code

/* Generating classes like `.s-btn`, etc... */
@sugar.ui.button.classes;

/* Applying button style on a custom element */
.my-button {
    @sugar.ui.button;
}

Example of custom styling button integration:

To integrate the button component inside your stylesheet with only the bare scope applied and apply your ownb custom css, here how:

Customize web-components

The same concept applies to webcomponents like s-date-picker, s-side-panel, etc...

They all comes with their bare styling so you don't need to worry about that.

Regarding the lnf (look and feel) scope, each component can either apply some existing classes from the toolkit like .s-list, etc... or directly apply some styling packed directly inside him.

Default lnf

To import default (theme aware) lnf styling, the component expose usually a sugar mixin that you can use like so:

Your own style

You can obviously simply not importing the default lnf and set your css yourself.

If you make use of the default lnf but that you want to style a particular component yourself, simply follow these instructions:

The s-bare class can be used pretty much on any sugar compliant component where you just want the bare scope.