CSS

Customizing the source SCSS files is optional. As an alternative, you can simply use the final CSS files from the dist/assets/css folder.

Any file from src/scss that does NOT start with an underscore _ will get compiled into dist/css.

Variables

You can customize the SCSS variables file in src/scss/_variables.scss.

// Your customizations
$primary: red !default;

...

// Our customizations
$enable-deprecation-messages: false !default;

...

// Defaults
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';
@import 'sidebar-style-guide/sass/variables';
@import 'material-design-kit/src/variables';

Main Application CSS File

You can customize the main application SCSS file in src/scss/app.scss which will get compiled into final CSS to dist/assets/css/app.css.

@import './variables';
@import 'bootstrap/scss/bootstrap';

// Plugins
@import 'bootstrap-custom-checkbox-toggle/bootstrap-custom-checkbox-toggle';
...

// Partials
@import './helpers';
...

// Your custom partials
@import './my-custom-style';
...

Plugins

Plugins are generally customized separately from the main application file in src/scss/vendor/*.scss. These files will get compiled into final CSS to dist/assets/css/vendor/*.css.

src/scss/vendor
├── bootstrap-touchspin.scss
├── dropzone.scss
├── fancytree.scss
├── flatpickr-airbnb.scss
├── flatpickr.scss
├── fontawesome.scss
├── fullcalendar.scss
├── jvectormap.scss
├── material-icons.scss
├── nestable.scss
├── quill.scss
└── sweetalert.scss

Table of Contents

Frontend Matter

Beautifully crafted Bootstrap themes and templates for modern web apps.

Themes

Templates

Company

Illustrations by Freepik Storyset