30 comments

  • Zach ReedZach Reed, over 4 years ago

    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."

    21 points
  • Mark Otto, over 4 years ago

    Co-creator of Bootstrap here—holler if y'all have any questions or feedback :).

    18 points
    • Petri Pottonen, 4 years ago

      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!

      0 points
      • Leon KLeon K, 4 years ago

        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?

        0 points
        • Petri Pottonen, 4 years ago

          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.

          0 points
      • Mark Otto, 4 years ago

        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.

        1 point
    • Andy LeverenzAndy Leverenz, 4 years ago

      Simply want to say thanks!

      0 points
    • Eric Chu, over 4 years ago

      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?

      0 points
      • Mark Otto, 4 years ago

        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 :).

        0 points
    • Martin LeeMartin Lee, 4 years ago

      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?

      1 point
      • Mark Otto, 4 years ago

        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 :).

        0 points
    • Matt Ashwood, over 4 years ago

      Looking forward to using this. Please don't ever switch to BEM syntax.

      2 points
      • Mark Otto, 4 years ago

        No plans to. Definitely not for v4, that'd be far too much of a departure for folks already familiar with Bootstrap. :)

        0 points
    • Surjith S MSurjith S M, 4 years ago

      Woohoo.. Pretty excited on the v4. Here are some questions

      • What is the best / modular way to customize the source / sass files, and to update newer version hassle free?
      • Will you keep a Less Port ?
      • I see some bugs there, How can I report? (v4 specifically)
      • I see you've truncated class names on /theme demos. How did you do that?
      • Do you plan to make /themes as a marketplace where everyone can upload with a commission basis? I assume there are many authors love to upload their item so the makers can earn a percentage :)

      And thank you for making bootstrap. You made my life easier :)

      1 point
      • Mark Otto, 4 years ago
        • We're going to be adding more variables to v4 to help with customization. Hopefully most things can be tackled with just those—it's how we've done it with Themes to pretty solid success so far. Basically load Bootstrap's variables and mixins, then override with your own variables, then include the components. That way you don't modify the source and can easily swap new versions.
        • We don't have the time to do an official Less port right now I'm afraid. Hopefully when we get closer to release we can work with someone on that.
        • Yes! Please report bugs on our issues tracker at https://github.com/twbs/bootstrap/issues :D.
        • We've obfuscated the classes, yeah. It's a Gulp plugin that I'm forgetting the name of right now, but it's to protect us from folks yoinking the code without buying. It's shitty to do, but we've put a lot of time into these :).
        • Hopefully soon!

        And stoked to hear Bootstrap has made an impact on you—puts a big grin on my face whenever I hear that :D.

        1 point
    • Patrick SmithPatrick Smith, 4 years ago

      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.

      0 points
      • Mark Otto, 4 years ago

        It will, yes! When we fully implement it, you'll have more control over order of columns, vertical alignment, same-height columns, etc.

        1 point
  • Ossama Ben, over 4 years ago

    Loved that they introduced Cards!

    1 point
  • ian marquetteian marquette, over 4 years ago

    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.

    1 point
    • Mark Otto, 4 years ago

      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.

      3 points
  • Mitch WarrenMitch Warren, over 4 years ago (edited over 4 years ago )

    I really love the docs, very concise and easy to digest quickly.

    I'll be interested to see how Foundation will compete with this.

    0 points
  • Kyle CesmatKyle Cesmat, over 4 years ago

    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/

    0 points
    • Simon LarocheSimon Laroche, over 4 years ago

      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.

      0 points
      • Mitch WarrenMitch Warren, 4 years ago

        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.

        0 points
  • Cody IddingsCody Iddings, over 4 years ago

    Those bootstrap themes seem pretty rad too!

    0 points