Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Bootstrap 4 Alpha 6 Released

blog.getbootstrap.com

Post reply on HN
Print view View original

21–30 of 64 posts

Re: Bootstrap 4 Alpha 6 Released

#21

Post by acomjean »

woah wrote: post #5
usaphp wrote: post #2

What is the best way to extend bootstrap without loosing an ability to update it in the future and also do not have a ton of duplicated code?

Use the Bootstrap Sass files. In particular, overwriting the variables as much as possible instead of just overriding the compiled css will give you flexibility, as they try to preserve those across versions. If you've minimized the amount of overriding css that you've written, then rewriting it will be easier.

This.

I've upgraded bootstrap styles using "Less" which is being replaced by "Sass". It takes a little bit to get set up (the jet brains phpstorm app builds it), but once its done its pretty great.

You can also customize your download leaving out the parts of bootstrap you don't want. (I originally did that for and older version bootstrap, while keeping some of my page styles). The customizer seems to now give you a json file, so you can download updates with the same settings as your original download, I have not tried this though.

http://getbootstrap.com/customize/

Re: Bootstrap 4 Alpha 6 Released

#26

Post by icc97 »

usaphp wrote: post #2

What is the best way to extend bootstrap without loosing an ability to update it in the future and also do not have a ton of duplicated code?

This tutorial [0] / [1] (using LESS) worked well for me. I recently did the upgrade from 3.3.6 - 3.3.7.

You create a directory just outside bootstrap and reference that from `bootstrap.less` inside the bootstrap core to override the bootstrap variables. Then you just have to modify `bootstrap.less` in the core bootstrap directory after upgrading.

  [0]: https://www.smashingmagazine.com/2013/03/customizing-bootstrap/
  [1]: https://github.com/thomaspark/bootswatch/

Re: Bootstrap 4 Alpha 6 Released

#28

Post by axlee »

jordanlev wrote: post #22
porkloin wrote: post #14

I sincerely hope BS4 is the last nail in IE9's coffin.

Out of curiosity, is there anything significant other than flexbox that's not in IE9 but is in IE10/11?

I'm pretty sure IE9 does not support CSS transitions or CSS animations in general. There is also a lack of support of most CSS gradients. Websockets and web workers aren't supported either. A lot of HTML5 form elements are also missing.

Re: Bootstrap 4 Alpha 6 Released

#29

Post by bgentry »

I'm not sure that mdo and the rest of the team get enough credit or thanks for all the work they put into Bootstrap, so here's another:

Thank you!

I'm loving the changes made in v4, especially switching to 100% SCSS. Bootstrap itself has had such a huge impact on getting projects off the ground.

Re: Bootstrap 4 Alpha 6 Released

#30

Post by ebbv »

usaphp wrote: post #2

What is the best way to extend bootstrap without loosing an ability to update it in the future and also do not have a ton of duplicated code?

The way I prefer to do this is we have our own SCSS files which get compiled along side bootstrap, and they are all more specific than the Bootstrap SCSS so they get precedence.

For example, we might want our default alerts to all be purple or something. We can add a class "my-namespace" to the body, or to a closer parent of the alert and then add the following to our "my-namespace" SCSS. If I wanted to change the "alert-info" background to orange I could also include a rule for that.

Hopefully in production you'd be using color variables instead of hex codes, but:

    .my-namespace {
        .alert {
            background-color: #aa00aa;

            .alert-info {
                background-color: #dd8800;
            }
        }
    }
Now you're overriding Bootstrap without touching Bootstrap's SCSS. I far prefer this method than the method I see a lot of folks using where they just go mucking around in the Bootstrap SCSS directly.
Post reply on HN