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