Make SB Admin 2 variables default, instead of hardcoded

[dpordomingo]

From scss/_variables.scss I saw that it hardcodes the following original Bootstrap variables, so the user is no longer able to define them according to Bootstrap docs:

• $border-color
• $card-cap-bg
• $card-border-color
• $spacer
• $grid-gutter-width <-- I really miss this one, which impacts a lot in the layout
• $dropdown-font-size
• $dropdown-border-color

Also Startbootstrap SB Admin 2 hardcodes the following variables, so they can not be defined by the user:

• $brand-google
• $brand-facebook
• $topbar-base-height
• $sidebar-base-width
• $sidebar-collapsed-width

All these problems were addressed by https://github.com/BlackrockDigital/startbootstrap-sb-admin-2/pull/243, but it was closed by @davidtmiller Could you please help me to understand why was it closed, and how could we solve it?

[dpordomingo]

This should be solved by #321

[dpordomingo]

Until #321 has been merged, this feature is offered by @dpordomingo/startbootstrap-sb-admin-2, already being used in prod as in athenianco/athenian-webapp/package.json, which lets the user to do something like:

$grid-gutter-width: 20px;
@import '~startbootstrap-sb-admin-2/scss/sb-admin-2.scss';

e.g. https://github.com/athenianco/athenian-webapp/blob/master/src/sass/_overrides.scss#L6

[davidtmiller]

So this allows you to override a variable before it's declaration in the SCSS rather than after? I am just trying to build a more thorough understanding of the !default flag - and your previous comment explains it pretty well - I just want to make sure I am getting it right. I'll be adapting this change to the other themes out there as well. Thanks for the time you put into this @dpordomingo

[davidtmiller]

243

[davidtmiller]

321 for the login/register/password images in variables. Thanks again @dpordomingo - Still wrapping my head around !default a bit though if you could shed a little insight.

[dpordomingo]

Thanks @davidtmiller for taking your time to review and merge! Yes, !default modifier makes that the assignation is only done if the variable had no previous value docs about !default.

As a user, it will let me define important parameters of the template you offer. The flow is something like this: In my main.scss

// I define the important parameters:
$body-bg: blue;

// Then I import SB Admin 2 theme
@import 'startbootstrap-sb-admin-2/scss/sb-admin-2.scss';

Your main sb-admin-2.scss stylesheet

// SB Admin 2 theme defines first the important parameters IF THEY HAD NO PREVIOUS VALUE
// that's possible because it now defines the variable with a !default flag, preserving
// previous values.
@import "variables.scss";

// Then SB Admin 2 imports bootstrap, that will use the important parameters from above
// if already defined, or will use its defaults, because bootstrap is also using !default
// flag, preserving previous values
@import "../vendor/bootstrap/scss/bootstrap.scss";

Let me know if I can clarify any other thing, and many thanks for caring.

[dpordomingo]

by the way, do you have any plan for releasing this in the following days? :wink:

[dpordomingo]

Hi @davidtmiller , is it planned any new release including this?

[davidtmiller]

A new release for SB Admin 2 is in the backlog, but it's coming up probably in a week or two based on the rate we're moving. We have our builder alpha coming out within the next day or two, an update to our pro products after that, and SB Admin 2 is slated to come after the pro product updates!