7 ms·

Bootstrap 3.4.0 released

206 points by pplonski86 8y ago

PacifyFish 8y ago
I recently started using Semantic UI instead of bootstrap, and I felt productive in ~20 minutes. It was amazing. Never going back!
- thwy12321 8y ago
  Same here! Semantic ui is an amazing library, and the documentation makes it really easy to understand. With almost no experience in javascript, react, and semantic-ui-react, I was able to get a basic website running in no time. Mind blowing how much better technology is getting on certain fronts.
- russian_bot 8y ago
  What were the benefits over using Bootstrap? Interested. I use bootstrap a lot, so I feel as if it is easy to be productive, but always exploring alternatives.
  - adpirz 8y ago
    I find Semantic's React library to be great and it's well maintained, so if you're using React, I think it has a leg up over Bootstrap there, also just more keen on the aesthetic and design choices.
- qwerty456127 8y ago
  Excuse me for a stupid question, how does Semantic UI compare to React and Angular? I seek to pick up a framework and start developing browser-based GUI apps and don't know which to choose. I want to just layout GUI widgets and code the logic without using any Photoshop or anything like that.
  - magnetic 8y ago
    They're different things. Semantic is the UI framework that you can use from React (in fact, there is a react-semantic-ui npm) or other. React will deal with lifecycle of objects on the screen and state machines to mutate them, but the actual look & feel of the widgetry is defined by whatever ui framework you decide to use (bootstrap, semantic, blueprint, etc).
    - qwerty456127 8y ago
      Makes sense. Thanks.
  - Techasura 8y ago
    Well, At first semantic UI is a UI library which helps in providing pre-built UI components. React and Angular are Frontend frameworks, which helps in performance and code modularity. Photoshop is a photo editor, although people used to make layouts with it long ago,,, not anymore, instead people are using Sketch. You can of course code the logic using plain simple JS, HTML, CSS and you can make widgets as well, unless you mean desktop widgets - for that you need electron.
    - qwerty456127 8y ago
      I see. Thanks. Can you suggest the quickest and most relevant learning path if I define what I seek more precisely? My relevant experience includes building WinForms apps in VisualStudio (where you just drop a widget on a form, click it and code what it does) and writing simple websites with vanilla HTML+CSS+JS. I've also tried some WPF and loved the MVVM model (AFAIK Angular is somewhat close to it but I also love functional programming so perhaps Reason-React or Elm can make a better choice) but didn't stick with it as I want my apps to run everywhere. I'd like to build a desktop-like (but reasonably webish-looking, responsive and mobile-friendly) single-page app that would be hosted on a static hosting, work in a browser and interact with the world by means of web services (some provided by 3rd parties, some coded myself in Python) and browser APIs. The idea of using a graphics editor like Photoshop or whatever to draw my UI scares the hell out of me, I want all the look&feel pre-designed "out of the box" the way it is in desktop widget toolkits like Qt. I've once studied Bootstrap and it seemed like a toolkit that can make the kind of UIs I want but I feel like I should probably pick up a modern SPA framework like React or Angular rather than code vanilla JS if I want to build a reasonably complex application.
      - pjmlp 8y ago
        From my point of view, the closest to that experience would be Angular + Web Components. There are also some Forms like experiences for Web, for example: https://anvil.works/ https://anvil.works/ https://webflow.com https://webflow.com https://reactstudio.com/ https://reactstudio.com/ https://pagedraw.io/ https://pagedraw.io/ https://webix.com/ https://webix.com/
  - digitaltrees 8y ago
    Quasar-framework is awesome. It is a Vue library with lots of components.
    - wolco 8y ago
      Love the framework.
- mcast 8y ago
  FYI: Semantic UI has one of the largest file sizes for CSS libraries at 730 KB uncompressed, 95 KB gzipped - add in React and you'll reach 1MB in no time. https://gist.github.com/primaryobjects/64a4e7e3351c646f51eee07949215ad4 https://gist.github.com/primaryobjects/64a4e7e3351c646f51eee...
  - z3t4 8y ago
    i guess removing unused rules on deployment would reduce the file size. But a few kb is not much today - with auto playing hd videos on Facebook et. al.
    - mediumdeviation 8y ago
      There's a big difference between a video that streams in while the user watches it, and all the styles and scripts that are needed to render the page itself. If the former is too slow the user just keeps scrolling or the player switches to a lower quality stream. If the latter is too slow the user will just close the tab and move onto something else.
    - reaperducer 8y ago
      And if your coding for a project that isn't full of HD videos, then what?
      - z3t4 8y ago
        With 12,000 kb/s the user will hardly notice the difference. You could add the CSS needed for the first render on the document, and it would save you a round-trip, and with HTTP2 you can send the CSS file together with the document. CSS files can however be cached so the few kb shaved off will only be saved on the first page load. If it's a common file, hosted on a CDN it might already be cached. If you are however worried about bandwidth usage the lowest hanging fruit are the binary files such as video,images, and fonts, then JavaScript trackers and frameworks, then the CSS and further trimming the content by getting rid of unnecessary markup.
- kevmo 8y ago
  I feel that way with pretty much every CSS library that has at least 1,000 stars on GitHub.
- forlorn 8y ago
  I can say the same about Tachyons.
- kondro 8y ago
  The biggest gotcha for Semantic UI is that it requires FlexBox support which is extremely buggy (or non-existent) in IE 10 and 11. Edge is OK (mostly), but there are a lot of users still on IE 10/11.
  - acdha 8y ago
    That's good to know since they carefully avoid mentioning anything about browser compatibility on their site. Bootstrap 4 also uses flexbox but they have done a good job supporting IE 11, which is good: on a general audience site I see ~2.5% of traffic from IE11 worldwide whereas IE10 is ~0.08% so it's much easier to write off. I was also disappointed to see zero mention of accessibility, which is a deal-breaker for government and large business sites.
andrewstuart 8y ago
Which of the CSS frameworks works best with ReactJS?
- dfee 8y ago
  Shameless plug: I just put `rbx` 1.0 together which has 100% coverage and fully implements the Bulma framework for React. Every component has a story, and it’s written in TypeScript (transpiled to JS). I hope to get around to releasing this big update on npm tonight(!) but for now you can use the code straight from GitHub. Also, the wrapping is complete yet minimal - there are only a couple components with state and you can override those with a `managed` flag. Also, every component supports ref forwarding (using of course `ref`), and can render as any other component using the `as` prop. For example, if you want to bring your own Form, Link, or Table framework, this will work with that seemlessly. <Button color=‘primary’ as={Link} to=‘/‘>Go home</Button> https://github.com/dfee/rbx https://github.com/dfee/rbx
  - thomasfedb 8y ago
    Looks promising. Any ideas about handling date/time in a way that's consistent with this and also works across desktop and mobile?
  - sooheon 8y ago
    Awesome, love the storybook. Components>Media>Input is broken FYI.
    - dfee 8y ago
      Haha of course. Probably a change I made earlier today. I’m at dinner now, but will update it in a couple hours.
- diesal11 8y ago
  I've been using reactstrap[0], it's everything you'd expect from bootstrap react bindings and has been great while i've been leaning React this year. No doubt there would be better solutions more tailored to react out there. [0] http://reactstrap.github.io/ http://reactstrap.github.io/
dlbucci 8y ago
Surprised to see this, but good on them for fixing the XSS issues!
- appleiigs 8y ago
  Yeah a lot of people, including me, were waiting that. Not able to rebuild to Bootstrap 4 at this point in time. Google Lighthouse was complaining about that Bootstrap 3 was not secure.
tamalsaha001 8y ago
We have switched to https://bulma.io/ https://bulma.io/ recently. Combined with Vue.js we can finally get rid of Jquery.
- tekknolagi 8y ago
  Your link is wrong because there's no space between the project URL and your adverb.
  - deleted 8y ago
    [deleted]
- CraftThatBlock 8y ago
  You can use Bootstrap without jQuery too. For instance, reactstrap doesn't use jQuery.
- adevx 8y ago
  There is also bootstrap-vue.js.org/ which does not use jQuery.
- soci 8y ago
  What is the main problem of the Jquery dependency that existed in Bootstrap before v4 ?
- fyfy18 8y ago
  If the developers read this, one thing I really liked about Bootstrap (v3 anyway, they've changed it for v4) is that the documentation is a few long HTML pages[0]. As a user, it makes it really easy to see what components are available and to search the documentation (I can just use Ctrl-F). [0] https://getbootstrap.com/docs/3.3/components/ https://getbootstrap.com/docs/3.3/components/
arvidkahl 8y ago
This is great. I appreciate an open-source project looking at the amount of developers working on locked-in legacy projects where dependency upgrades take years. This is a rare moment of empathy in an industry that - judging from other comments here - is ALWAYS on the hunt for the next best thing. Bootstrap has brought me joy and made my life as a developer much easier. Thank you to @mdo & team for keeping it that way.
- winrid 8y ago
  Yeah definitely appreciated. We are still stuck on angular bootstrap 0.13...
  - boredpudding 8y ago
    Do you mean this package or something else? https://www.npmjs.com/package/angular-bootstrap https://www.npmjs.com/package/angular-bootstrap
    - winrid 8y ago
      http://angular-ui.github.io/bootstrap/versioned-docs/0.13.1 http://angular-ui.github.io/bootstrap/versioned-docs/0.13.1
  - Bahamut 8y ago
    A prior maintainer of that lib here - that library is a behemoth. Unfortunately I ran out of time to be able to continue to maintain it, and now work for one of those big tech companies that requires a lot of approvals to participate in open source anymore unfortunately :( . There are a lot of good fixes pre-2.0 though if you can upgrade to it! Probably one of the biggest disincentives for continuing to me though were some of the users - some were outright abusive.
chaitanya 8y ago
You can use bootstrap without jquery today with bootstrap native: https://github.com/thednp/bootstrap.native https://github.com/thednp/bootstrap.native It supports most (if not all) of bootstrap’s components, and works well enough that even large-ish projects can do without bootstrap.js (which needs jquery).
fuckthecops 8y ago
Ant Design is the best UI library in 2018. The amount of components you get out of the box has no comparison.
- fuckthecops 8y ago
  and every other suggestion in this thread is trash
  - feikname 8y ago
    I have no knowledge of the area.. Is this sarcasm or truly your opinion?
  - wishinghand 8y ago
    Your first comment is the sort we're ok with in this community, but the one I'm replying to isn't welcome.
sergiotapia 8y ago
I thought Bootstrap 4 was released months ago? :S
- amatera 8y ago
  And then you thought that millions of websites, a lot of commercialy crafted for customers, adopted it in no time? So an update, to the most used version which has even security isseus is not nessacary? You live in a nice world :)
tannhaeuser 8y ago
Link to bootstrap-sass for 3.4 404's.
- tannhaeuser 8y ago
  It's working now. Congrats to the Bootstrap team for outstanding free maintenance. Looking forward to v5.

206 points by pplonski86 8y ago

I recently started using Semantic UI instead of bootstrap, and I felt productive in ~20 minutes. It was amazing. Never going back!

thwy12321 8y ago
Same here! Semantic ui is an amazing library, and the documentation makes it really easy to understand. With almost no experience in javascript, react, and semantic-ui-react, I was able to get a basic website running in no time. Mind blowing how much better technology is getting on certain fronts.
russian_bot 8y ago
What were the benefits over using Bootstrap? Interested. I use bootstrap a lot, so I feel as if it is easy to be productive, but always exploring alternatives.
- adpirz 8y ago
  I find Semantic's React library to be great and it's well maintained, so if you're using React, I think it has a leg up over Bootstrap there, also just more keen on the aesthetic and design choices.
qwerty456127 8y ago
Excuse me for a stupid question, how does Semantic UI compare to React and Angular? I seek to pick up a framework and start developing browser-based GUI apps and don't know which to choose. I want to just layout GUI widgets and code the logic without using any Photoshop or anything like that.
- magnetic 8y ago
  They're different things. Semantic is the UI framework that you can use from React (in fact, there is a react-semantic-ui npm) or other. React will deal with lifecycle of objects on the screen and state machines to mutate them, but the actual look & feel of the widgetry is defined by whatever ui framework you decide to use (bootstrap, semantic, blueprint, etc).
  - qwerty456127 8y ago
    Makes sense. Thanks.
- Techasura 8y ago
  Well, At first semantic UI is a UI library which helps in providing pre-built UI components. React and Angular are Frontend frameworks, which helps in performance and code modularity. Photoshop is a photo editor, although people used to make layouts with it long ago,,, not anymore, instead people are using Sketch. You can of course code the logic using plain simple JS, HTML, CSS and you can make widgets as well, unless you mean desktop widgets - for that you need electron.
  - qwerty456127 8y ago
    I see. Thanks. Can you suggest the quickest and most relevant learning path if I define what I seek more precisely? My relevant experience includes building WinForms apps in VisualStudio (where you just drop a widget on a form, click it and code what it does) and writing simple websites with vanilla HTML+CSS+JS. I've also tried some WPF and loved the MVVM model (AFAIK Angular is somewhat close to it but I also love functional programming so perhaps Reason-React or Elm can make a better choice) but didn't stick with it as I want my apps to run everywhere. I'd like to build a desktop-like (but reasonably webish-looking, responsive and mobile-friendly) single-page app that would be hosted on a static hosting, work in a browser and interact with the world by means of web services (some provided by 3rd parties, some coded myself in Python) and browser APIs. The idea of using a graphics editor like Photoshop or whatever to draw my UI scares the hell out of me, I want all the look&feel pre-designed "out of the box" the way it is in desktop widget toolkits like Qt. I've once studied Bootstrap and it seemed like a toolkit that can make the kind of UIs I want but I feel like I should probably pick up a modern SPA framework like React or Angular rather than code vanilla JS if I want to build a reasonably complex application.
    - pjmlp 8y ago
      From my point of view, the closest to that experience would be Angular + Web Components. There are also some Forms like experiences for Web, for example: https://anvil.works/ https://anvil.works/ https://webflow.com https://webflow.com https://reactstudio.com/ https://reactstudio.com/ https://pagedraw.io/ https://pagedraw.io/ https://webix.com/ https://webix.com/
- digitaltrees 8y ago
  Quasar-framework is awesome. It is a Vue library with lots of components.
  - wolco 8y ago
    Love the framework.
mcast 8y ago
FYI: Semantic UI has one of the largest file sizes for CSS libraries at 730 KB uncompressed, 95 KB gzipped - add in React and you'll reach 1MB in no time. https://gist.github.com/primaryobjects/64a4e7e3351c646f51eee07949215ad4 https://gist.github.com/primaryobjects/64a4e7e3351c646f51eee...
- z3t4 8y ago
  i guess removing unused rules on deployment would reduce the file size. But a few kb is not much today - with auto playing hd videos on Facebook et. al.
  - mediumdeviation 8y ago
    There's a big difference between a video that streams in while the user watches it, and all the styles and scripts that are needed to render the page itself. If the former is too slow the user just keeps scrolling or the player switches to a lower quality stream. If the latter is too slow the user will just close the tab and move onto something else.
  - reaperducer 8y ago
    And if your coding for a project that isn't full of HD videos, then what?
    - z3t4 8y ago
      With 12,000 kb/s the user will hardly notice the difference. You could add the CSS needed for the first render on the document, and it would save you a round-trip, and with HTTP2 you can send the CSS file together with the document. CSS files can however be cached so the few kb shaved off will only be saved on the first page load. If it's a common file, hosted on a CDN it might already be cached. If you are however worried about bandwidth usage the lowest hanging fruit are the binary files such as video,images, and fonts, then JavaScript trackers and frameworks, then the CSS and further trimming the content by getting rid of unnecessary markup.
kevmo 8y ago
I feel that way with pretty much every CSS library that has at least 1,000 stars on GitHub.
forlorn 8y ago
I can say the same about Tachyons.
kondro 8y ago
The biggest gotcha for Semantic UI is that it requires FlexBox support which is extremely buggy (or non-existent) in IE 10 and 11. Edge is OK (mostly), but there are a lot of users still on IE 10/11.
- acdha 8y ago
  That's good to know since they carefully avoid mentioning anything about browser compatibility on their site. Bootstrap 4 also uses flexbox but they have done a good job supporting IE 11, which is good: on a general audience site I see ~2.5% of traffic from IE11 worldwide whereas IE10 is ~0.08% so it's much easier to write off. I was also disappointed to see zero mention of accessibility, which is a deal-breaker for government and large business sites.

andrewstuart 8y ago

Which of the CSS frameworks works best with ReactJS?

dfee 8y ago
Shameless plug: I just put `rbx` 1.0 together which has 100% coverage and fully implements the Bulma framework for React. Every component has a story, and it’s written in TypeScript (transpiled to JS). I hope to get around to releasing this big update on npm tonight(!) but for now you can use the code straight from GitHub. Also, the wrapping is complete yet minimal - there are only a couple components with state and you can override those with a `managed` flag. Also, every component supports ref forwarding (using of course `ref`), and can render as any other component using the `as` prop. For example, if you want to bring your own Form, Link, or Table framework, this will work with that seemlessly. <Button color=‘primary’ as={Link} to=‘/‘>Go home</Button> https://github.com/dfee/rbx https://github.com/dfee/rbx
- thomasfedb 8y ago
  Looks promising. Any ideas about handling date/time in a way that's consistent with this and also works across desktop and mobile?
- sooheon 8y ago
  Awesome, love the storybook. Components>Media>Input is broken FYI.
  - dfee 8y ago
    Haha of course. Probably a change I made earlier today. I’m at dinner now, but will update it in a couple hours.
diesal11 8y ago
I've been using reactstrap[0], it's everything you'd expect from bootstrap react bindings and has been great while i've been leaning React this year. No doubt there would be better solutions more tailored to react out there. [0] http://reactstrap.github.io/ http://reactstrap.github.io/

dlbucci 8y ago

Surprised to see this, but good on them for fixing the XSS issues!

appleiigs 8y ago
Yeah a lot of people, including me, were waiting that. Not able to rebuild to Bootstrap 4 at this point in time. Google Lighthouse was complaining about that Bootstrap 3 was not secure.

tamalsaha001 8y ago

We have switched to https://bulma.io/ https://bulma.io/ recently. Combined with Vue.js we can finally get rid of Jquery.

tekknolagi 8y ago
Your link is wrong because there's no space between the project URL and your adverb.
- deleted 8y ago
  [deleted]
CraftThatBlock 8y ago
You can use Bootstrap without jQuery too. For instance, reactstrap doesn't use jQuery.
adevx 8y ago
There is also bootstrap-vue.js.org/ which does not use jQuery.
soci 8y ago
What is the main problem of the Jquery dependency that existed in Bootstrap before v4 ?
fyfy18 8y ago
If the developers read this, one thing I really liked about Bootstrap (v3 anyway, they've changed it for v4) is that the documentation is a few long HTML pages[0]. As a user, it makes it really easy to see what components are available and to search the documentation (I can just use Ctrl-F). [0] https://getbootstrap.com/docs/3.3/components/ https://getbootstrap.com/docs/3.3/components/

arvidkahl 8y ago

This is great. I appreciate an open-source project looking at the amount of developers working on locked-in legacy projects where dependency upgrades take years. This is a rare moment of empathy in an industry that - judging from other comments here - is ALWAYS on the hunt for the next best thing. Bootstrap has brought me joy and made my life as a developer much easier. Thank you to @mdo & team for keeping it that way.

winrid 8y ago
Yeah definitely appreciated. We are still stuck on angular bootstrap 0.13...
- boredpudding 8y ago
  Do you mean this package or something else? https://www.npmjs.com/package/angular-bootstrap https://www.npmjs.com/package/angular-bootstrap
  - winrid 8y ago
    http://angular-ui.github.io/bootstrap/versioned-docs/0.13.1 http://angular-ui.github.io/bootstrap/versioned-docs/0.13.1
- Bahamut 8y ago
  A prior maintainer of that lib here - that library is a behemoth. Unfortunately I ran out of time to be able to continue to maintain it, and now work for one of those big tech companies that requires a lot of approvals to participate in open source anymore unfortunately :( . There are a lot of good fixes pre-2.0 though if you can upgrade to it! Probably one of the biggest disincentives for continuing to me though were some of the users - some were outright abusive.

chaitanya 8y ago

You can use bootstrap without jquery today with bootstrap native: https://github.com/thednp/bootstrap.native https://github.com/thednp/bootstrap.native It supports most (if not all) of bootstrap’s components, and works well enough that even large-ish projects can do without bootstrap.js (which needs jquery).

fuckthecops 8y ago

Ant Design is the best UI library in 2018. The amount of components you get out of the box has no comparison.

fuckthecops 8y ago
and every other suggestion in this thread is trash
- feikname 8y ago
  I have no knowledge of the area.. Is this sarcasm or truly your opinion?
- wishinghand 8y ago
  Your first comment is the sort we're ok with in this community, but the one I'm replying to isn't welcome.

sergiotapia 8y ago

I thought Bootstrap 4 was released months ago? :S

amatera 8y ago
And then you thought that millions of websites, a lot of commercialy crafted for customers, adopted it in no time? So an update, to the most used version which has even security isseus is not nessacary? You live in a nice world :)

tannhaeuser 8y ago

Link to bootstrap-sass for 3.4 404's.

tannhaeuser 8y ago
It's working now. Congrats to the Bootstrap team for outstanding free maintenance. Looking forward to v5.