CoralUI Styles Introduction

Most CoralUI styles are baked into each web component, so not much is available as public API. More detail about CoralUI's CSS architecture can be found in the architecture section of Docs & Guides.

CSS Themes

CoralUI has CSS theme support. This generally works by splitting the CSS for a CoralUI component between the component's repository and the theme repository. Any styles that are 'functional', or visual aspects that should not change when the theme changes, are kept with the component. The styles that control the changeable aspects of the visual design of a component are kept in the theme repository. CoralUI's build system merges the separate source files into a single CSS instance. By design, the theme repository contains source CSS for every CoralUI component. There is no need to remove components when creating a custom build. The build system is smart enough to only output CSS for components that are included in the package.json of a build.

There are currently only two themes available for CoralUI; the original CloudUI theme that CoralUI has always been based on, and the new Spectrum theme. At this time, the default build of CoralUI will continue to use CloudUI, but we will switch the default to Spectrum at some point in 2016. In the meantime, a custom build of CoralUI can enable you to use Spectrum right away. You can also grab a pre-built zip of the default CoralUI build with the Spectrum theme on the Spectrum demo version of this website.

It may be helpful to understand how a theme is included into CoralUI. The theme of a build is determined via the build's package.json, just like any other component. To enable a theme, a CoralUI build must include as a dependency coralui-core#4.x. The theme must also be included as a dependency in package.json. For example, including Spectrum would mean adding the latest release of coralui-theme-spectrum.

An example snippet from package.json showing the relevant entries is shown below:

                  {
                    "dependencies": {
                      ...
                      "@coralui/coralui-core": "^4.2.0",
                      "@coralui/coralui-theme-cloudui": "^8.2.8",
                      ...
                  }