How the Heck? The Bootstrap 4 Beta thread

sage
, ,
1

So Bootstrap 4 Beta was released today, and it includes some significant changes from Alpha 6, including how colors are referenced.

Rather than

$brand-primary: blue;

We now have

$theme-colors: (
  primary: $blue,
  secondary: $gray-600,
  success: $green,
  info: $cyan,
  warning: $yellow,
  danger: $red,
  light: $gray-100,
  dark: $gray-800
) !default;

I’ve worked with Sass maps before, but only to automate mixins and such. What’s our best way to override one or two of these values? Or will we be copying the whole map into our _variables.scss file and editing it there?

This is compounded by the fact that the above references the $gray- colors, which Sage’s _variables.scss doesn’t have access to since it’s called first in main.scss and those values don’t exist yet.

So this is an interesting problem. I’d love to start updating some of my in-progress projects for Bootstrap Beta, but I’m not sure how best to tackle these basic issues. Anyone with more Sass experience have thoughts?

Thanks!

3 Likes
2
4 Likes
3

I didn’t mean to offend. This thread can be unlisted if it’s inappropriate or purile.

4

I was referring to the Bootstrap people :wink:

4 Likes
5

Oh! Yeah! The jerks.

1 Like
6

This might be useful?

I haven’t tried it yet, but map-merge might let us update the map one item at a time?

3 Likes
7

Ugh. This is the solution:

But it didn’t make it into Beta 1.

It seems to me that without this fix the entire Bootstrap color system must be imported into Sage’s _variables.scss in order to override a single color, like the primary color. See extended conversation here:

This is profoundly annoying, but with @ben’s ‘OK’ I can make a PR with the color system copied to _variables.scss and the primary overridden to Sage’s traditional green.

2 Likes
8

So this will break in new Sage 8.5/9 installs but what about existing ones?

9

I don’t care for it. Last time I tried Bootstrap 4 was around May and I ended up rolling the project back to Bootstrap 3 because of this type of stuff. At the time the colors weren’t in maps, but it seemed like everything else was - spacers, break points, columns, container widths.

I know it’s probably an “old man yells at cloud” scenario on my part, but I don’t see the benefit here. It seems like being clever just for the sake of being clever.

10

With the way existing Sage dependencies are written, if you run yarn, it’ll break.

Update package.json to read…

    "bootstrap": "4.0.0-alpha6",

(remove the “^”)

And you’ll be fine.

1 Like
11

Neat.

Is there any reason then to upgrade if you find Bootstrap alpha v6 fine?

12

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 :slight_smile:

1 Like
13

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
14

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.

15

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-*-none class with one .d-*-block class to show an element only on a given interval of screen sizes (e.g. .d-none.d-md-block.d-xl-none shows the element only on medium and large devices).

3 Likes
16

Column offsets are now different

17

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
18

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
19

Aren’t the guidelines to making them responsive at the bottom of that page?

20

Card columns, yes — card decks, no