Styling Applications with Themes

DV Themes

To make it easier to style common app components, we have created a collection of themes that you can import and use in your applications. These style sheets also provide a guide for styling components in general. For example, to use DV's default styling for navbars, include the following into your app's styles.css.

@import "~@deja-vu/themes/dist/css/navbar.css"

Third Party CSS Frameworks/ Style Sheets

You are more than welcome to use popular CSS frameworks or style sheets to style your application. In fact, most of our sample applications use Angular Material and Bootstrap by including the following in the styles.css files:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import "~bootstrap/dist/css/bootstrap.min.css";

By simply adding/ removing/ updating the import statments in the app style sheet, users can harness any pre-built UI components and styles.

Other popular CSS Frameworks include:

| Framework | Example Import Statement | | --------- | ------------------------ | | Semantic UI | @import "~semantic-ui-css/semantic.min.css" | | Foundation | @import "~foundation-sites/dist/css/foundation.min.css" | | Materialize | @import "~materialize-css/dist/css/materialize.min.css" | | UIkit | @import "~uikit/dist/css/uikit.min.css" | | Pure | @import "~purecss/build/pure-min.css" | | Bulma | @import "~bulma/css/bulma.min.css" | | Milligram | @import "~milligram/dist/css/milligram.min.css" |

Note

The order of the imports is important as the styles are applied in a top down manner.