Bootstrap 4 alpha (blog.getbootstrap.com)
almost 8 years ago from David Barker
almost 8 years ago from David Barker
I made this same comment on HN:
"One amazing thing to note is that in v3.3.5 (last stable) bootstrap.min.css was at ~123kb. The new 4.0.0 alpha bootstrap.min.css is at ~88kb. WOW. That's just amazing. Congrats to everyone who worked on this project. I'm always so impressed with the work done on it!
Also, I want to add, I don't care where you land on the side of the debate whether to use Bootstrap or not, there is some very smart minds behind the project and there always something to learn from the source code."
"... and there always something to learn from the source code. !important"
Co-creator of Bootstrap here—holler if y'all have any questions or feedback :).
Very exited about moving to Sass and the optional flexbox grid!
My first thought would be that I'd like to use modernizr to detect flexbox support, and then use the flexbox grid if supported. and have the old float-based grid as fallback Meaning the code could be something like:
body.flexbox .row{ display:flex; //etc. }
body.no-flexbox .row{ //fallback float based grid } `
It seemed like the flexbox was a boolean in the variables. So would something like my example be possible? Smart? Stupid? What are your thoughts here?
Cheers!
Why would you want this? You would have to load 2 grid systems, which will increase the file size of your CSS file, and you cant use the extra flexbox features as you want to be able to fall back to the normal grid while still having stuff look the same. Or is there something I am missing?
Can't say much before I'll (perhaps) try an approach like this for a live project and find out whether it makes sense or not. So it's of course possible that it's not worth the effort. That's why I was curious to hear if Mark would have any thoughts here on whether it'd be possible/smart/stupid.
But to answer your questions: I'd want to do it because I'd like to start using flexbox but the browser support isn't quite there yet for production. Using same class names and framework along with modernizr seems like a plausible and easy way to get to use flexbox.
It seems like the fallback grid would add about 8kb extra to my CSS, which I can live with if that would be the only problem.
I could use extra flexbox features and not really care about stuff looking the same. Meaning that I'd focus on providing a nice experience for good browsers but also have something that would probably get the info across for crappy browsers. So let's say I'd have 3 product features (like the 3 grey circles in http://getbootstrap.com/examples/carousel/ for exmample) with images along each other. For flexbox they could use "space-between" and equal height columns etcetc. but crappy browsers would just display them side to side, still providing an adequate enough experience.
Okay! That make sense.
Adding that kind of dependency is a huge shift for us. Major releases are the time for that, but we've never needed for anything else. I'd rather put the power in the hands of developers to customize their build to specific needs rather.
Simply want to say thanks!
Thanks!
Hey Mark,
I tweeted this at you but I figure I'd get more exposure here:
Bootstrap Themes look so rad. Planning on allowing 3rd parties to create themes?
Eventually, maybe! We've got a really solid build system and development environment for them. We want to pump out some more and see how it goes for the first few before we get to that point though :).
Great, thank you :) Thank you for all your hard work.
Very excited to see the new version shaping up nicely. Thanks to you and everyone else involved.
Suggestion... It might be helpful to list the equivalent pixel values for people designing or saving out graphics. Looking through the documentation, it wasn't clear what the rem media query values and container widths equate to in pixels.
Also, it appears that while the breakpoints are exactly the same as the old pixel widths, the container widths are slightly different. (at least inspecting the docs site) The old large container width was 1170, the new is 1156. Care to comment on the differences there?
That's a good point. It'd be dependent on our base font size for the HTML element, but we could at least tell folks what it is for the defaul value there. If you're feeling generous and have some free time, you can open an issue to track it :).
Looking forward to using this. Please don't ever switch to BEM syntax.
No plans to. Definitely not for v4, that'd be far too much of a departure for folks already familiar with Bootstrap. :)
Woohoo.. Pretty excited on the v4. Here are some questions
And thank you for making bootstrap. You made my life easier :)
And stoked to hear Bootstrap has made an impact on you—puts a big grin on my face whenever I hear that :D.
Does the flexbox based grid have any advantage over the float grid?
Would be great to be able to use a grid that has a lot of the power of flexbox, but falls back to floats (with less capabilities) if it is not supported.
It will, yes! When we fully implement it, you'll have more control over order of columns, vertical alignment, same-height columns, etc.
Loved that they introduced Cards!
Yeah I like that feature too. And flexbox!
Just looked through the documentation. I really wish they'd remove the default left and right padding from the .row class. Looks like they've just switched it from pixels to ems.
Why would we remove it? Rows have margin to outdent the columns so that background colors are more readily handled, and so that grid content is aligned with the rest of the page.
I really love the docs, very concise and easy to digest quickly.
I'll be interested to see how Foundation will compete with this.
I've built many sites with bootstrap until I couldn't handle the code bloat/LESS anymore. I've used foundation for two recent client projects, and am really disappointed by how unsupported the majority of their components are. The project itself seems to be losing focus.
Excited to see consolidation of a few similar components into cards, It's a great UI pattern. Also cool to see the inclusion of a flexbox grid. I think the most exciting thing is the filesize and overall cleanup that has been done. Great work to the team!
Also, great job releasing the three 'official' themes. Great way for you all to capitalize on your hard work with this project. http://themes.getbootstrap.com/
Yeah using foundation in our last project felt like we were using a dead project. Ive always liked how easy its been to customize bootstrap, you you can end up with a pretty lean project if its not your first time.
Yes! I feel this way too. I keep struggling to make Foundation's JavaScript components work with my projects (either because they're buggy or just low quality) - to the point where I just don't trust those parts of Foundation any more and source those things from Bootstrap.
I do love Foundation, but at this point it feels like progress is just happening too slowly - and if it does come out, It'll probably only support IE11+. I appreciate Bootstrap v4 for including IE9 - that was a nice suprise.
Those bootstrap themes seem pretty rad too!
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now