Customization

Prompt allows you to easily customize the styling as well as content of the common elements including top navbar or heros.

Customize Styling (SCSS)

Prompt comes with the power of Sass (scss). Scss lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again.

You can easily modify the themes by simply changing few variables. You even don't need to change anything in Prompt's source code. You can easily defined the override variables in src/assets/scss/skins/default.

You can even create a completely new theme by simply copying the src/assets/scss/skins/default folder and then override the values available in the file _variable.scss or _custom-variables.scss.

Partial Templates (Gulp file includes)

The gulp-file-include package is used to make partials easier to use for the development. The following partials are available with the context variables:

1. head.html - contains mainly the head element
   • @@pageTitle (string) - Allows you to change the page title
2. navbar[1-6].html - 6 differet styled top navigation bar
   • @@classList (string) - Allows you to pass additional class names on navbar
   • @@fixedWidth (boolean) - Allows you to make the fixed width of the navbar
   • @@sticky (boolean) - Makes the navbar top sticky if set to true
   • @@hideSearch (boolean) - Allows to show/hide the search
   • ctaButtonClass (string) - Allows you to pass class names for CTA button available on right
3. footer-scripts.html - Contains the links to javascript files
4. navbar.html - Contains the top menu content

You can easily create new .html partials inside the /partials folder and point to them from any file by specifying the path to the partial file and using the @@include keyword.