How the Heck? The Bootstrap 4 Beta thread

sage
, ,
21

hi,
what about RTL support in beta ?

22

For anyone coming here to find out how to include the Sass map colors in your styles.css, I haven’t seen this reproduced anywhere else.

After you install Sage 9, Bootstrap 4 Beta 1 is a Node Module and the styles are imported into the compiled CSS file. So now I want to use the default theme color, which is currently $blue as seen in the original post above. However, maybe I want to change this to another color to match the site’s branding.

So, as indicated elsewhere, as of Beta 1, you have to copy the the complete $theme-colors Sass map and override the colors in your local variables file (Beta 2 changes this with the addition of map-merge into the Sass map). Once you’ve done that, you can then reference this new color scheme to override the default Bootstrap variables.

In the Bootstrap’s scss/_functions.scss file, there’s a function called theme-color that allows you to pull in the sass map colors fairly easily.

So in Sage’s sage/resources/assets/styles/common/_variables.scss, you can override styles using the following:

$link-color:    theme-color("primary");

When I first did this, I compiled the CSS and found that nothing happened! `theme-color(“primary”) was still showing up. Something was weird.

Turns out, we have to link to or duplicate _functions.scss into the local files. Or at the very least, make a new file called sage/resources/assets/styles/common/_functions.scss and include the theme colors function, which is:

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

Once this file exists, place it above the variables file in sage/resources/assets/styles/main.scss. So, that file will start like this:

@import "~bootstrap/scss/functions"; /* or @import "common/functions"; */
@import "common/variables";

/** Import everything from autoload */
@import "./autoload/**/*";

[...]

This will enable the theme colors to be mapped into your stylesheet and overrride the default colors.

Once Beta 2 lands, the above will slightly change. You can see the PR they’ve added in the link in this post above.

4 Likes
23

@asuh When you mention in this bit…

…isn’t there then an issue that the BS variables haven’t been defined yet, so you’ll get an error, e.g. $gray-600 hasn’t been definded yet:

>  $theme-colors: (
>       primary: $blue,
>        secondary: $gray-600,

…so you either have to define all the variables up front or set fixed values? Presumably better in Beta 2 (as you mentioned) as only need to set the colors that you actually want to change.

24

With Beta 2, the process I described above changed so I will eventually update my post above to reflect this. That makes your question not a problem anymore :slight_smile:

isn’t there then an issue that the BS variables haven’t been defined yet, so you’ll get an error, e.g. $gray-600 hasn’t been definded yet

Local variables you set are all loaded as overrides for existing variables so what you’re describing won’t be a problem. In order for the variables to override Bootstrap’s default color variables, it must first reference Bootstrap’s variables in order to allow the override. So I don’t believe you’ll see the issue you’re asking about.

25

Yes, as you say, should be a lot more straightforward with beta 2 and beyond. My only problem at the moment is that BS has (apparently) dropped support for Bower, so I can’t include beta.2 as a dependency unless I convert to NPM.

2 Likes
26

i can’t seem to get the ‘.d-none’ classes working in sage 8.5.3.

Preformatted textmessageOriginal: Invalid CSS after “…de text-hide();”: expected “}”, was “.d-none;”

.featured-image-caption { 
    // display: none;
			// @include text-hide();
			.d-none;
    // 
    // .hidden-xs-up;
    // @include hidden-xl-down();
    // .d-none;
    // 
    // .hide;
}

Am i missing something obvious?

27

This isn’t really relevant to this thread.

However, you use the ‘.d-none’ class within you html, e.g.

<div class="d-none">

…not within your scss. If you do want to use within your scss then you can do

@extend .d-none;

(see http://sass-lang.com/guide#topic-7)

1 Like
28

Thanks Andy. I thought it may get be related to the beta release and a new method for use in scss. Turns out I just needed the extend. D.

29

I am getting this error http://prntscr.com/ka39u1 on my macos migh sierra. I am trying this command “sass main.scss main.css” from the folder path “/wp-content/themes/sage/resources/assets/styles/” I dont see any solutions to this problem anywhere. Any help is highly appreciated. Thanks!

30

You’ll need to use the build process included with Sage to compile assets