Other than an intense desire to learn the latest thing and be on top of it, no? But Beta and release are going to be more stable. And that stability means we have to learn new things 
1 Like
Having the colors in a theme-colors map seemed a bit strange at once, but one benefit seems to be that components are only generated in the color variants that you define in this map, and it is easier to add new colors if needed. Also really like the new grid column ordering system.
1 Like
This is really helping me out. I don’t have to remember to do a background variant, button variant, alert variant, text variant, etc. I just add a color to $theme-colors and recompile. Very nice.
Yesterday I noticed that with the beta the old hidden-XX-xxxx classes from the alphas are gone and have been replaced with display helper classes:
hidden-md-up → d-md-none
via Migrating to v4 · Bootstrap
Rather than using explicit
.visible-*classes, you make an element visible by simply not hiding it at that screen size. You can combine one.d-*-noneclass with one.d-*-blockclass to show an element only on a given interval of screen sizes (e.g..d-none.d-md-block.d-xl-noneshows the element only on medium and large devices).
3 Likes
Column offsets are now different
So Card Decks are great, but they’re not responsive. If you have 4 cards in a row, it’s gonna stay 4 cards in a row until you get down to xs size.
A decent work-around if you just need your cards to match height is to use flexbox helpers and the standard grid:
<div class="row">
<div class="col-sm-6 col-lg-4 d-flex">
<div class="card d-flex w-100"> <!-- .w-100 because otherwise the card won't take the full-width -->
<div class="card-body">
<h4 class="card-title">This is a card</h4>
<p>And here's some card text</p>
</div> <!-- /.card-body -->
</div> <!-- /.card -->
</div> <!-- /.col -->
<div class="col-sm-6 col-lg-4 d-flex">
<div class="card d-flex w-100">
<div class="card-body">
<h4 class="card-title">Another card!</h4>
<p>And here's some more card text!</p>
</div> <!-- /.card-body -->
</div> <!-- /.card -->
</div> <!-- /.col -->
</div> <!-- /.row -->
1 Like
This has been my solution to making card decks work better responsively:
@include media-breakpoint-only(sm) {
.card-deck .card {
margin-left: 0;
margin-right: 0;
&:not(:first-child),
&:not(:last-child) {
margin-left: 0;
margin-right: 0;
}
}
}
Have also used @include media-breakpoint-down(md) instead of @include media-breakpoint-only(sm)
1 Like
Aren’t the guidelines to making them responsive at the bottom of that page?
Card columns, yes — card decks, no
hi,
what about RTL support in beta ?
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
@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.
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 
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.
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
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?
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;
1 Like
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.
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!
You’ll need to use the build process included with Sage to compile assets