gajo357 / bootstrap-themes

Themes for Bootstrap

Free DevExpress Bootstrap v4 Themes

This repository contains free and open source themes that were created for websites built using Bootstrap v4 or later.

Table of Contents

• What's Included
  • DevExpress Blazing Berry
  • DevExpress Office White
  • DevExpress Purple
• Getting Started
• Customization
• Copyright and License
• More Information

What's Included

DevExpress Blazing Berry

Open CSS File | Open Minimized CSS File | View Demo

DevExpress Office White

Open CSS File | Open Minimized CSS File | View Demo

DevExpress Purple

Open CSS File | Open Minimized CSS File | View Demo

Getting Started

The /dist/ folder includes nested folders whose names correspond to theme names: blazing-berry, office-white, and purple. Each nested folder contains the following theme-related files:

1. Theme stylesheets that you can apply to your application.

• bootstrap.css - a ready-to-use CSS file.
• bootstrap.min.css - a ready-to-use minimized CSS file.

2. Theme source files that you can customize to create your own theme.

• _variables.scss - a file with variables.
• _styles.scss - a file with custom CSS rules.
• {theme_name}.scss - a theme file that imports variables, the default Bootstrap theme, and custom CSS rules. Do not change the import order is this file.

Customization

Do the following to customize the theme source files and compile the resulting theme:

1. Clone or download this repository.
2. Open the dist/{theme_name}/_variables.scss file and modify variable values. You can also add your own variables.
3. Open the dist/{theme_name}/_styles.scss file. Modify CSS rules or create custom rules. You can use a browser’s Developer Tools to inspect UI elements.
4. Install Node.js and npm if they do not exist on your machine.
5. Go to the folder where the package.json file is located. Open the console window and run npm install to install all the dependencies.
6. Execute the npm i --global gulp command to install the gulp globally.
7. Run gulp to compile all themes once or gulp watch to turn on the watcher that recompiles themes as soon as you change source SCSS files.

This creates two new CSS files (bootstrap.css and bootstrap.min.css) in each theme's folder or overwrites the existing files according to your changes.

Copyright and License

Copyright © 2018-2020 Developer Express Inc. All trademarks or registered trademarks are property of their respective owners. This project code is released under the MIT License.

More Information

Read this blog post for more information about this repository.