Topic: How to Properly Customize MDB
I currently use the following strategy for integrating Bootstrap into VS 2017 and recompiling only what's needed into my own minified CSS file.
https://channel9.msdn.com/Series/aspnetmonsters/ASPNET-Monsters-74-Customizing-Bootstrap-4-in-Your-ASPNET-Core-MVC-Application
It works very well. I can modify the bootstrap variables in my own override scss file and it will compile cleanly.
I want to use MDB as well. It appears that Bootstrap 4 is not fully incorporated into it so that I have to load both Bootstrap and MDB in my main CSS file.
What is the appropriate strategy for modifying MDB so that when a new version comes out, I don't have to reset all your variables.
For example, I want to set my colors up as variables first. Then modify some bootstrap properties and insure they are not overwritten by Bootstrap or MDB.
Eg: $light-stone is defined first in my constants file. Then in my _b4_overrides I have.
//*
//* Body
//*
// Settings for the
<body> element.
$body-bg: $light-stone;
This will apply all the way through the rest of the bundling. I can reinstall bootstrap on an upgrade and not lose any changes. How do I incorporate MDB4 into that?
Below is my main css file to give you an idea of the strategy. Unfortunately MDB is overwriting my variable changes and changing my media queries. TIA for any help on a streamlined customization process.
@charset 'UTF-8';
/*
1. Application wide variables. (non-Bootstrap)
*/
@import "constants";
/*
2. Bootstrap & MDB Pro Imports Section
*/
// Core variables and mixins
@import "../lib/bootstrap/scss/variables";
@import "../lib/bootstrap/scss/mixins";
//* Here is where we can copy variables from <code>_variables.scss</code> to override default values without modifying source files.
@import "bootstrap-variable-overrides";
// Reset and dependencies
@import "../lib/bootstrap/scss/normalize";
@import "../lib/bootstrap/scss/print";
// Core CSS
@import "../lib/bootstrap/scss/reboot";
@import "../lib/bootstrap/scss/type";
@import "../lib/bootstrap/scss/images";
@import "../lib/bootstrap/scss/code";
@import "../lib/bootstrap/scss/grid";
@import "../lib/bootstrap/scss/tables";
@import "../lib/bootstrap/scss/forms";
@import "../lib/bootstrap/scss/buttons";
// Components
@import "../lib/bootstrap/scss/transitions";
@import "../lib/bootstrap/scss/dropdown";
@import "../lib/bootstrap/scss/button-group";
@import "../lib/bootstrap/scss/input-group";
@import "../lib/bootstrap/scss/custom-forms";
@import "../lib/bootstrap/scss/nav";
@import "../lib/bootstrap/scss/navbar";
@import "../lib/bootstrap/scss/card";
@import "../lib/bootstrap/scss/breadcrumb";
@import "../lib/bootstrap/scss/pagination";
@import "../lib/bootstrap/scss/badge";
@import "../lib/bootstrap/scss/jumbotron";
@import "../lib/bootstrap/scss/alert";
@import "../lib/bootstrap/scss/progress";
@import "../lib/bootstrap/scss/media";
@import "../lib/bootstrap/scss/list-group";
@import "../lib/bootstrap/scss/responsive-embed";
@import "../lib/bootstrap/scss/close";
// Components w/ JavaScript
@import "../lib/bootstrap/scss/modal";
@import "../lib/bootstrap/scss/tooltip";
@import "../lib/bootstrap/scss/popover";
@import "../lib/bootstrap/scss/carousel";
// Utility classes
@import "../lib/bootstrap/scss/utilities";
/*
3. MDB Framework
*/
// MDB Framework //
// Mixins
@import "../lib/md-pro/sass/mdb/free/data/prefixer";
@import "../lib/md-pro/sass/mdb/free/data/mixins";
// Variables
@import "../lib/md-pro/sass/mdb/free/data/colors";
@import "../lib/md-pro/sass/mdb/free/data/variables-b4";
@import "../lib/md-pro/sass/mdb/free/data/variables";
//* Here is where we can copy variables from <code>_variables.scss</code> to override default values without modifying source files.
@import "bootstrap-variable-overrides";
//Global
@import "../lib/md-pro/sass/mdb/free/global";
// MDB Free
@import "../lib/md-pro/sass/mdb/free/roboto";
@import "../lib/md-pro/sass/mdb/free/typography";
@import "../lib/md-pro/sass/mdb/free/animations";
@import "../lib/md-pro/sass/mdb/free/waves";
@import "../lib/md-pro/sass/mdb/free/helpers";
@import "../lib/md-pro/sass/mdb/free/buttons";
@import "../lib/md-pro/sass/mdb/free/forms-basic";
@import "../lib/md-pro/sass/mdb/free/cards-basic";
@import "../lib/md-pro/sass/mdb/free/navbars";
@import "../lib/md-pro/sass/mdb/free/hover-effects";
@import "../lib/md-pro/sass/mdb/free/footer";
@import "../lib/md-pro/sass/mdb/free/carousels-basic";
// MDB Premium
@import "../lib/md-pro/sass/mdb/pro/forms-pro";
@import "../lib/md-pro/sass/mdb/pro/tabs";
@import "../lib/md-pro/sass/mdb/pro/msc";
@import "../lib/md-pro/sass/mdb/pro/progress";
@import "../lib/md-pro/sass/mdb/pro/accordion";
@import "../lib/md-pro/sass/mdb/pro/buttons-pro";
@import "../lib/md-pro/sass/mdb/pro/social-buttons";
@import "../lib/md-pro/sass/mdb/pro/cards-pro";
@import "../lib/md-pro/sass/mdb/pro/dropdowns-pro";
@import "../lib/md-pro/sass/mdb/pro/light-box";
@import "../lib/md-pro/sass/mdb/pro/side-nav";
@import "../lib/md-pro/sass/mdb/pro/navbars-pro";
@import "../lib/md-pro/sass/mdb/pro/carousels-pro";
@import "../lib/md-pro/sass/mdb/pro/modals-pro";
@import "../lib/md-pro/sass/mdb/pro/toasts";
@import "../lib/md-pro/sass/mdb/pro/scrollspy";
@import "../lib/md-pro/sass/mdb/pro/charts-pro";
@import "../lib/md-pro/sass/mdb/pro/animations-pro";
@import "../lib/md-pro/sass/mdb/pro/scrollbar";
@import "../lib/md-pro/sass/mdb/pro/ecommerce";
@import "../lib/md-pro/sass/mdb/pro/skins";
@import "../lib/md-pro/sass/mdb/pro/chips";
@import "../lib/md-pro/sass/mdb/pro/parallax";
@import "../lib/md-pro/sass/mdb/pro/stepper";
// DATE & TIME PICKERS
@import "../lib/md-pro/sass/mdb/pro/date_picker/default.scss";
@import "../lib/md-pro/sass/mdb/pro/date_picker/default.date.scss";
@import "../lib/md-pro/sass/mdb/pro/date_picker/default.time.scss";
// SECTIONS
@import "../lib/md-pro/sass/mdb/pro/sections/blog";
@import "../lib/md-pro/sass/mdb/pro/sections/magazine";
@import "../lib/md-pro/sass/mdb/pro/sections/pricing";
@import "../lib/md-pro/sass/mdb/pro/sections/testimonials";
@import "../lib/md-pro/sass/mdb/pro/sections/features";
@import "../lib/md-pro/sass/mdb/pro/sections/team";
@import "../lib/md-pro/sass/mdb/pro/sections/templates";
@import "../lib/md-pro/sass/mdb/pro/sections/social";
/*
4. My components.
*/
/*
5. My pages.
*/
Add comment
Hi,
we are very sorry but we don't support any integration with vs. It is possible to do but we don't have any tutorial or fixed to do this.
Best,
Piotr
Hi Toby,
Did you use our gulp tutorial? At the folder MDBPro are files scss like _custom-skins, _custom-variables, _custom-styles. So If you want use your own styles/variables you can put that to files. We are using gulp to minify/compile files and etc. If you will add some code to that files it will be compile to mdb.css and next minify to mdb.min.css.
Is that what you need to know? Let me know. If not I will try to help you again.
Gulp tutorial: Link
Best,
Piotr
Hi,
I have just bought MDB for a project and I'm interested in this solution as well.
If this is not possible, then I could have used the free version instead.
All I want and need is a single file, containing Bootstrap, the MDB styles and on top my own stuff - cleanly rendered - with my own colors..
I can't believe that there is no proper method described either on this site or somewhere else.
I have been trying to get it compiled for the last 2 hours or so. So.. it would be appropriate to describe this process in more detail since
this is a well used practice.
Thanks for asking this question.
Regards
Toby
@godminders: I like your approach. Did you find a solution meanwhile? Would be interested.
Regards from Germany, Leo
Hi godminders,
the best way to initialize your changes without a loss during the update mdb or bootstrap is to create your own file sass and adding it to a file sass/mdb.scss. During each update line with the path to your file disappears from mbd.scss. But add it again and compile restore previous settings.
Regards
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: Yes
- Provided link: No