Skip to main content

SASS

Take advantage of the Bootnews past, current and future updates, by learning how to create your own content without changing the core styles of Bootnews.

Create a New Style

To avoid file loss, overrides of your custom styles or any other conflicts during the upgrade process, create or modify your styles with assets/scss/custom/.scss files.

You can create new style from assets/scss/custom/custom-styles.scss

Customized Bootstrap

Bootnews has taken the advantage of Bootstrap's SASS variable and changed the core Bootstrap style to avoid duplicated codes, styles and also, reduce the size of the Bootnews CSS files.

What does it mean? This means that Bootstrap's colors, sizing, forms and many other components are called from assets/vendor/bootstrap/scss/, assets/scss/theme/*.scss and assets/scss/_variables.scss, overridden and generated back to assets/css/theme.css using Gulp and SASS.

You can add or remove Bootstrap component from assets/scss/theme.scss

You can editing Bootstrap variables from assets/scss/_variables.scss

You can call Bootstrap css & theme css from assets/css/theme.css

Customized Theme

Bootnews colors, sizing, forms and many other components are called from assets/scss/theme/ to assets/scss/_variables.scss, overridden and generated back to assets/css/ using Gulp and SASS.

You can add or remove Bootnews component from assets/scss/theme.scss

You can editing Bootnews variables from assets/scss/_variables.scss

You can call Bootnews css from assets/css/theme.css

Refresh after Changes

After modifying theme.scss or _variables.scss, saving the SCSS file and the Gulp task will be required to proceed with changes. You can use npm run start task, and 2 files will automate updated after make changes in scss file.
assets/css/theme.css
assets/css/theme.css.map

Please read build tools documentation in Build Tools