I didn’t mean to offend. This thread can be unlisted if it’s inappropriate or purile.
I was referring to the Bootstrap people
Oh! Yeah! The jerks.
This might be useful?
I haven’t tried it yet, but map-merge
might let us update the map one item at a time?
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.
So this will break in new Sage 8.5/9 installs but what about existing ones?
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.
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.
Neat.
Is there any reason then to upgrade if you find Bootstrap alpha v6 fine?
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
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.
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-*-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).
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 -->
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)
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 ?