A Scrivito app derived from the Scrivito Example App comes with lots of styling options, mainly those originating from the included Bootstrap CSS framework. Additionally, it uses several individual styles for giving it a special touch.

All CSS classes available to you for styling the app can be found in the “src/assets/stylesheets” folder in the project directory.

There is one central file, “index.scss”, which is loaded at startup. It not only includes all the other files and subfolders in the “stylesheets” folder but also defines the example-app-specific CSS classes mentioned above.

As can be seen from the .scss file name extension, the Scrivito Example App makes use of SASS, the state-of-the-art CSS precompiler. Next to offering other handy extensions to CSS, SASS allows you to use variables and functions for keeping your styles consistent throughout your website. See Changing Colors in the Example App for an example.

We recommend that you create a dedicated .scss file in the “stylesheets” folder, add your CSS to it, and import the file via the “index.scss” file, like so:

/* imports
================================================== */

@import “_bootstrap”;
@import “_fontawesome”;
@import “_social_cards”;
@import “_grid_layout_editor”;
@import “_my_addons”;

You could even use and import several own .scss files if this helps you with structuring your CSS.

Scrivito apps are based on React and JSX, so you can apply CSS classes via className, like so:

The above snippet originates from a Scrivito widget component in which the Scrivito.ContentTag component is used to render a widget attribute (navTitle in this case). Specifying className as a prop in a Scrivito.*Tag component (or any other React component) causes the prop to be turned into the class attribute of the resulting HTML tag.