Custom Templates

Search…

Custom Templates

Any styles that you define in this Library are consumed in two ways: as a CSS module or as a CSS bundle.
CSS Bundles
A CSS bundle is a file that contains all the styles needed for a website (typically made available by content delivery networks as a single file such as  bootstrap.min.css). This bundle can be easily loaded into any HTML page, but applications typically need styles from many different sources and ultimately it reaches a size that makes loading it in all pages no longer desirable.
Another issue of CSS bundles is that as more styles are included, class names and selectors may be used in two different places. This can lead to conflicts that require more CSS to adjust, and with no way to ensure it doesn't occur again.
CSS Modules
CSS Modules provide a way to isolate all styles while still allowing you to reference "global" class names in your dependencies.
To achieve such isolation, all selectors are considered "local" and have their class and id names replaced by a unique identifier and you have to import such names into your component implementation to be interpolated into your HTML.
If you use CSS modules, the file needs to be named: MyComponentType.module.scss and imported as import styles from '@c3/ui/MyComponentType.module.scss';.
Otherwise, non-modular CSS files need to be named: MyComponentType.scss and imported as import '@c3/ui/MyComponentType.scss';

Styling - Previous

Density Templates

Next - Tutorial - Create your mini app

Tutorial - Create a mini-app with UI Framework

Last modified 2mo ago

Export as PDF

Copy link

Contents

CSS Bundles

CSS Modules