Scopes

In the toolkit, most of the UI elements style (and some other things) can be applied through mixins like @sugar.ui.button(); for example. These mixins can takes some arguments and one of them is scope.

This scope argument tells the mixin which "part" of the element css you want to generate. Here's some values that this argument can take that will make things a lot more simple to understand:

  • bare: This correspond to the structural css like paddings, sizes and functional css for something like dropdown that need some css just to work properly.
  • lnf: This means "look and feel" and correspond to all the css that make an element visually pleasing like colors, border-radius, etc...

These two scopes are the main ones that are usually available with every mixins that print out some styling css for "components" or "UI".

Some mixins can have more scopes available. Let's take for example the @sugar.ui.avatar mixin.

This mixins offer some additional "behaviors" like:

  • shape: An avatar can be "circle", "rounded" or "square"
  • interactive: An avatar can have an "hover" state to let the user know that it can interact with

These are some small features that need to tweak a little bit the css. It would be not optimal to generate these "tweaks" classes like so:

Each mixins API are documented either through the styleguide for more visual exploration, or through the API for more technical specifications.

Bugs
are not our friends...

Don't hesitate to declare an issue if something does not works as expected.

Declare my issue on Github Talk about it on Discord

The more we are,
the stronger we become.

Don't hesitate to tell some words to you friends about us. The goal is to became more and more each days to help each others...

Support us on Patreon! Share on Facebook! Make a tweet!

The more we are,
the stronger we become.

Don't be afraid to join us on Discord.

Join us on discord!

We love,
Open source!

All of our codebase can be found on Github. We hope that you may contribute to help us make our tools even better!

Discover our codebase!

Welcome on