Bootstrap 4 alpha(blog.getbootstrap.com)

almost 6 years ago from David Barker

  • Mark Otto, almost 6 years ago

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

    18 points
    • Account deleted almost 6 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, almost 6 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
        • Account deleted almost 6 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, almost 6 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, almost 6 years ago

      Simply want to say thanks!

      0 points
    • Eric Chu, almost 6 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, almost 6 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, almost 6 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, almost 6 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, almost 6 years ago

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

      2 points
      • Mark Otto, almost 6 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, almost 6 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, almost 6 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, almost 6 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, almost 6 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