Update widget Sass colors to use Bootstrap colors (for Theme compatibility)

[salcode]

When applying a theme, we see conflicts with the colors chosen for the widgets (see attached image).

If we replaced the widget values with Bootstrap native colors using Sass variables set in Bootstrap, we should be able to avoid this problem when a theme is applied.

[salcode]

I'd like to change

$widgetFontColor: #333;

to

$widgetFontColor: $text-color;

This would make Bootstrap Genesis more compatible with a Bootstrap Theme file because the value could be inherited.

Unfortunately, variables.scss (where $widgetFontColor is set) is processed before bootstrap/_variables.scss is processed, which is where $text-color is set.

I'm not sure how to handle this. Perhaps we need two variable files to replace variables.scss.

• One loaded before bootstrap/_variables.scss called override_bootstrap_variables.scss, which would be used exclusively for setting values to override those that exist in Bootstrap (e.g. $link-hover-color)
• One loaded after, called bootstrap_genesis_variables.scss, which would be used exclusively for setting variables that exist only in Bootstrap Genesis (e.g. widgetFontColor).

@codenameEli, I know you had some strong feelings on where variables are assigned. Do you have any thoughts on this?

[codenameEli]

I would think to change the order of import load in the style.css so that Bootstrap variables run before custom. This will work if you set a $text-color variable to any color in your variables.scss file because Bootstraps $text-color is flagged with !default.

See my commit on my fork to see if this is the idea you had in mind, I can separate into a pull request but I had another one in the for a different issue. https://github.com/codenameEli/bootstrap-genesis/commit/1ea6b1e4ea2878c35460208f3695a5248d3fbd33

[salcode]

@codenameEli, my problem with loading the Bootstrap Genesis variables after Bootstrap's Sass files is we no longer have a way to change the Bootstrap values within Bootstrap.

You can see the problem if you want to change the $text-color value.

Current Setup $text-color modification

In this screenshot, I've added $text-color: red; to variables.scss

Loading variables.scss after Bootstrap Sass

In this screenshot, I've made the change you suggested, loading variables.scss after the Bootstrap Sass and I've added $text-color: red; to the beginning of variables.scss

In this case, the change to $text-color is only applied to any CSS defined after the variable is modified.

This is why I think we might need two files.

• one for overriding Bootstrap defaults
• one for using Bootstrap variables when setting our own variables

I don't love this solution but it seems like it might be the best option.

[codenameEli]

Ah I see what you're saying. What if I roll my own Bootstrap settings? As far as going through the "Customize and Download" screen of Bootstrap. Maybe you could offer instructions that if I want to change fonts, colors or the grid to customize Bootstrap on their builder, download and replace the Bootstrap _import files? Just an idea and it would even make it more Bootstrap friendly. http://getbootstrap.com/customize/

[salcode]

Running through the customizer, I get the following files.

Since, I'm now getting CSS instead of Sass, it won't integrate nicely into the project and allow us to extend it. I appreciate the ideas you're throwing out but I still think the two files setup makes the most sense.

• override_bootstrap_variables.scss - pre Bootstrap Sass loading
• bootstrap_genesis_variables.scss - post Bootstrap Sass loading

By default the override file will be empty, since we're not overriding anything by default but it sets the stage nicely for changing the base style guide (as discussed on How to be a Designer that Developers Love) then anything beyond base style changes would be in the Bootstrap Genesis Variables file.

[salcode]

Final Sass file names are:

• variables-bootstrap-core-override.scss
• variables-bootstrap-genesis.scss

These are descriptive, appear next to each other when listed alphabetically, and appear in the order they are loaded when displayed alphabetically.

See #83