Overview

For styling, although it feels like doing oldschool HTML and CSS, you'll be implicitly using CSS Modules. GlueCodes Studio gives you a beautiful balance between scoped and global styling. So, you can theme your app globally and at the same time style chosen parts of the UI in isolation. You'll simply be using CSS classes and because of the implicit scoping you can safely duplicate class names among different Slots. There are several stylesheet types:

• The ones imported from [dependencies] e.g. Bootstrap or Font Awesome
• Globals, created in the studio
• Those scoped to:
  • Slot
  • Reusable Slot
  • Widget
  • Built-in Widget

Here is an order how they get applied (the later overrides the earlier):

For Slots and Reusable Slots:

1. Bootstrap (we might introduce other CSS frameworks in the future)
2. Global and [dependency] imports
3. Scoped styles

For Widgets:

1. Built-in Widget
2. Bootstrap (we might introduce other CSS frameworks in the future)
3. Global and [dependency] imports
4. Widget overrides of its customizable classes

To glue these stylesheets together we introduced unique imports. Given in your app you have a global style named myAwesomeTheme and your dependencies look like this:

In any scoped stylesheet you can import dependency and global stylesheets like below:

The rule here is that the names of imported styles must match either global style name or import local name found in dependencies. Note that bootstrap and fa are reserved and if you wish to update their URLs don't rename them as they are internally used to glue your project together.

CSS Classes

You can use CSS classes in a traditional way and the studio does scoping for you using CSS Modules. It's combined with our unique CSS imports. Imagine the bellow slot someName has a CSS:

The CSS classes will be taken from the right stylesheets and only globalClass won't be hashed to achieve scoping:

To illustrate it further, you can see how the class names could be applied on an Extended Tag:

How It Looks In Practice?

After you install content block Apple it will look just like on the picture:

It has <h2> element and its original CSS:

Then you import Global Styles with CSS to style all elements in your projects with class="title" just like you can see below:

Then you can use scoped CSS of the apple Widget:

The IDE will add color and margin-top to original file and swap margin-bottom for the one from Global Styles. At the end the IDE takes scoped CSS of the Widget and swap color from Global Style. Final CSS will look like that:

And this is how the Widget apple will look at the end: