Bootstrap 4 Beta
getbootstrap.com
getbootstrap.com
Things that I like about bootstrap are : stability, performance, easy custom builds, community support (almost every problem has been addressed on Stackoverflow), ecosystem (themes, extensions, tools). The design out of the box might look cookie cutter, but if you know basic CSS, it is very easy to customize it with minimal effort. Just lookup examples on codepen/stackoverflow.
Some people complain about bloat but this is amazing : https://getbootstrap.com/docs/3.3/customize/ . I have public facing websites with thousands of visitors per day. The performance rating is better than 90% of the websites.
Truly want to thank @mdo @fat @cvrebert and the rest of the team for this amazing project.
Thanks to Bootstrap, I've managed to build some very professional looking websites, coded entirely from scratch, all with my existing HTML/CSS knowledge.
Just a phenomenally useful framework for non-coders like myself.
But it's got a consistent look and feel to all components, and that look is a mile above anything I could design from scratch.
So in the same way you use it to build professional looking websites with limited HTML/CSS knowledge, I use it to build sites with very limited design knowledge and no sense of aesthetics.
Some engineers like to complain about 'yet another bootstrap template' a lot, and I can understand that it gets a bit dull and boring, but that's much better than the alternatives.
Still bootstrap has been amazing over the years.
After having used bootstrap for so long, I understand it's strengths & shortcomings quite well. I feel there's little to complain with bootstrap, and little to gain by ditching it. Would love to be proved wrong.
Basically bootstrap is not composeable. It provides not just a set of styles - but also a severely restricted visual design. People quickly run into elements that bootstrap was just not designed to be placed into. That's why there are so many forks/extensions of bootstrap, like bootstrap-admin and so on.
So its good to start with and follow the official style guide. But doing anything more, and the restrictions immediately bubble up. And then you quickly run into an entirely different set of problems on organizing your own CSS, like using SASS, BEM, etc.
Its not a question of OOCSS vs BEM, but more of how tolerant/accomodative the framework is in using it in different elements and contexts. Bootstrap's tolerance is relatively low compared to most other frameworks.
BS4's modules and components are highly portable and work in pretty much any context. I don't see how offering a theme customization tool results in a "severely restricted visual design", it allows the freedom to make any visual design you want. BS4 is MUCH more than visuals/UI.
Definitely share that pain. Is there a mature framework that solves it ?
For creating a quick and dirty project it's great. But after a while you find you end up using less and less of bootstrap because moulding it to your requirements becomes a burden. That's prob why you rarely see big complex sites using it.
There's nothing worse than using react or angular and then someone pulls in a library to have a bootstrap control that breaks stuff and doesn't work and is hard to style. Spend hours trying to get it working properly beyond the most basic implementation of the control.
I prefer bulma because it focuses more on the basics and doesn't get in the way. Even after you create stuff you can shape and mould t easily.
>"bootstrap control that breaks stuff"
I like the idea of adapter more than having a separated framework like react-material design or react-bootrap.
https://material.io/components/web/docs/architecture-overvie...
What? Lyft, NASA, FIFA? Is there a list of major sites that are using Bulma? By your appeal to the bandwagon this makes it an inferior framework?
A basic grid and some buttons are nice for a pet site, it doesn't appear to be a robust enough framework for any site of significant size. I guess I could write the CSS and JS for a modal from scratch, or I could just install Bootstrap and never think about it again.
I can take the BS source, comment out half of it and end up with Bulma. If I started with Bulma, I'd have to write lots of code to end up with a framework that rivals BS.
All these issues go away with bulma.
No tool to customise theme is great. I don't want a bootstrap looking theme. It gets in the way... bootstrap is structure and styling throwing in the kitchen sink and half the house but not adding any doors or windows and you can't hide a builder to add more without it costing a kidney.
Then don't use the JS parts of BS?
>No tool to customise theme is great. I don't want a bootstrap looking theme.
These sentences are contradictory. The tool allows you to make a theme that doesn't look like everyone else's. Bulma does not have this option. You will end up with a "Bulma-looking" theme.
>It gets in the way
Unlike Bulma's visual styling? If you don't want a default-looking theme, wouldn't you need to customize it then? Doesn't lacking any tools to do so make this harder? I don't understand this argument.
Same with foundation and semantic UI. Bulma and other small libraries are much more flexible in this regard.
I find full frameworks like bootstrap or quasar to be nicer to deal with.
I think people really au fait with CSS prefer to add only what they need rather than serve Bootstrap entirely.
But that's all optional, Bootstrap is modular [1] [2] [3].
[1] https://getbootstrap.com/docs/3.3/customize/
[2] https://github.com/twbs/bootstrap-sass/blob/master/assets/st...
[3] https://github.com/twbs/bootstrap/blob/v3-dev/less/bootstrap...
That's a drawback. For BS3 or 4 I can just comment out what I don't need. If I do need many of the components and JS modules that Bootstrap provides OOTB, I have to write them myself. I'm using a CSS framework to avoid doing that.
Edit: And can be easily customized.
https://github.com/kbariotis/kostasbariotis.com/blob/master/...
I can just include what I need and override what I want.
https://github.com/twbs/bootstrap/issues/20184#issuecomment-...
That still doesn't address the overall point, which is that Bootstrap 3 is no longer maintained, according to its project Owner, and this or any future vulnerabilities may or may not be patched. That seems like a significant risk to me.
<div class="row"> UNESCAPED USER INPUT </div>
<img src="UNESCAPED USER INPUT">
https://github.com/twbs/bootstrap/issues/20184#issuecomment-...
If you don't want XSS, don't echo untrusted raw user input to the browser. Not in the title tag, not in a paragraph body, not in a data attribute. It's on you, or your application framework. Expecting Bootstrap to combat it is insane.
1) Every class name is prefixed with "uk-": a wise decision to avoid conflicts and make it easy recognise the framework classes.
2) Useful generic classes: UIKit has many helper classes to avoid adding another rule—for removing padding, introducing a small margin, rounding the borders, adding a box shadow.
3) Clean theme: The default UIKit theme looks an order of magnitude better than Bootstrap's.
4) Additional helpful components: Loading spinner, Cards, Notifications, Sortable list. Shipping them by default saves a lot of time in searching and integrating them in your application.
5) Default Icons Support: The icons look clean and beautiful and because they are SVG, they don't require a font file. (Although, requiring Javascript can be turning off for some)
6) Much better components: Try creating an input box with an icon in bootstrap; with UIKit it only takes a little markup.
Whenever I develop with Bootstrap, I have to spend half the time muting the existing styles and introducing new ones. With UIKit, it never felt like a problem.
2) Bootstrap 4 includes dozens of utilities like these and more. Still have some to add, but there are tons.
3) Our theme state is busted in the beta it will be there for final. Open to feedback!
4) v4 has cards. Spinners are slated for v4.1. Toasts are slated for v4.2 I think. Peep the project pulls page :).
5) Everyone else does amazing icons. We pulled our icon font out long ago in v4. Use any SVG library.
6) That’s a solid idea. Care to open an issue for it!? :D
Take a look at the new v4 beta docs and let me know what else is missing or cumbersome for you, please. <3
UIKit has many CSS classes with hover states but not focus states and it's not easy to add them to classes like .uk-hidden because it's not a direct declaration but relies on a parent class. It lacks an equivalent to Bootstrap's .sr-only (visually hide but expose content to screen readers); you can always add such a class yourself but it makes the UIKit framework incomplete. UIKit makes it harder to make a site accessible than if UIKit was not used.
CSS Frameworks are supposed to make the job easier by taking care of problems you're not even aware of; UIKit fails to do that in this respect.
And nope just text. Grey low contrast text.
Once you change the stylesheet the components look ok. Still lot of let's-replace-icky-tables-with-divs.
2) BS 4 added a ton of helper classes, to the point where I find myself using these rather than writing custom CSS.
3) Ultra light font weight, light gray font color, capitalized text might look great, but I prefer better usability. The point with BS (as of my observations that is) has always been to provide a no-bullshit™ style. It doesn't follow trends, it does what's sane.
4) I half-agree. Not sure how useful it is to have "notifications". I personally never needed that and doubt their usability on mostly document oriented websites.
5) BS used to come with icons, but now there are tons of icon sets to choose from. BS is a CSS framework after all.
6) Besides that, what components does UIKit have that BS can't do? Maybe sticky behavior with a delay would be helpful.
BS is 125 KB vs UIKit 256 KB minified though (that's only for CSS), besides all the accessibility issues.
Though IIRC, Apple's UIKit came out a year after the web UIkit.
.uk-list>li::before, .uk-list>li::after {
content: "";
display: table;
}
Personally I agree with the complaint about BS that all sites built with it look similar and honestly, bland.
A framework really can't offer semantic classes, since it doesn't know the semantics of your app/page.
Huge thanks to the contributors and our team for pushing so hard recently. Feels amazing to have a beta out finally.
1. Do you still use a global, class-based, cascading CSS framework like Bootstrap, Semantic UI, etc, to provide baseline styling/theming for your pages and components? And if not, do you just essentially roll your own custom CSS framework in JS? Or are there styling frameworks out there that don't cascade and can compose more naturally with component-oriented approaches to styling?
2. If you do use cascading CSS frameworks in addition to something like styled-components, what are your approaches to limiting the unpredictable side-effects of cascading styles, dealing with specificity and load order issues, and ensuring proper style isolation inside your components?
It seems like using a cascading styling framework could defeat much of the purpose of using a well-isolated component-oriented styling library.
Although on the other hand, the alternative of writing all styling on my own seems like a futile exercise in reinventing a vastly inferior wheel, since so much designer talent has been poured into projects like Bootstrap to the point where an amateur designer like myself could never even approach the same level of polish, flexibility and consistency in their designs.
I'm hoping someone here could enlighten me on a better approach that takes the best of both worlds, or at least share a middle ground they're happy with?
2. This hasn't been a problem. Most of the global styles are based on tags, and classes are already more specific. The legacy class-based stuff is all hash-based too, so there's been no conflicts.
So far I'm enjoying the component-based approach. Render functions look much cleaner and you abstract logic that might have previously looked like
classnames(styles.btn, {
[styles.active]: isActive
})
({ isActive }) => `background: red`
On one hand I don't think I've done enough to reuse styles across components but on the other hand I know I'm never loading styles that aren't used specifically for the current render.
1. This is one such component based styling framework built on top of styled-components. http://jxnblk.com/rebass/
2. In many of the solutions that exist I have found that they aim to work very well with existing CSS as much as possible. I haven't had to deal with many issues. Hopefully by the time I start switching entire projects over to it, everything will be completely stabilized.
https://www.webreflection.co.uk/blog/2016/04/22/about-jquery
Lots of folks like to shit on jQuery these days, but it changed JS forever. We're still using it while focusing on other things, and you can easily swap it out for something else or use a ported version of our JS for React, Angular, etc.
In short, yes, and we'll get there in time <3.
I don't particularly aim to shit on it, but I've been on the vanilla train for awhile now. So when I see something I'd like to try out to solve a specific problem, having it pull in jQuery for a dependency is kind of frustrating.
Especially when (and I'm sure Bootstrap does more with it) the only reason it's pulled in is to replace document.querySelectorAll and fetch/xhr.
Very exciting! I have been slowly removing jQuery from many web apps over the last several years and its good too hear that Bootstrap wants to get there too :)
Now obviously removing jQuery would be a major revision and break the current API. But are there any particular pain points in removing jQuery as far as features go?
A cursory look at the source code (/js/src/*.js) shows that most jQuery usage is simple $(el).hasClass('foo') or $(el).on(evt, handler) so those ones are easily replaced by the native APIs.
Maybe the harder parts to replace are $.data or $.event?
If by some miracle you were able to find a website visitor that didn't already have jQuery in their cache, loading it from a CDN is pretty light.
The article answers your question:
>the most plausible answer is that jQuery is very good at plugins integration, and Bootstrap has few of them
Their solution? A 50-line JS snippet paired with a polyfill (the the user is less-likely to have cached than jQ). Er, ok, but I'm using a framework so I don't have to write this stuff.
Another example:
>OK, OK … I got it, you also want the chained $(element).on(type, handler) one
And then another snippet. Sure, I could rewrite more verbose, less-tested versions of all the things jQuery gets me OOTB, but why? To save downloading one file from a CDN once?
Sorry, that's my bad for forgetting my audience. My day to day job is to keep things running in IE8 in Quirks Mode. (With a really bad WYSIWYG editor to boot, inside of one of over 30 frames loaded on the page)
So in my eyes, IE10 is pretty modern. Not so to the average HN reader. My bad.
Still, IE10 is definitely close enough to standards that most of jQuery is wasted on it. Not all, and the parts that are helpful are indeed better tested than writing something yourself.
But I find once you start targeting IE10+, most of the time jQuery is a thing to hang pseudo globals off of, and a way to type `$` instead of `document.querySelectorAll`. And in that role, it's not worth the cycles it burns.
EDIT: In particular, the thing that gets me is when I go to look up a library and it is only available as a jQuery plugin. But looking inside the code the only uses of jQuery are for selectors, events, and http requests, all three of which are standardized and easy to use without jQuery.
Last I looked at jQuery was a few months ago, and all I saw was standard or compat.
EDIT: Just looked it up, it's still pretty big for my tastes, but I appreciate any reduction in size. Next time I need to bring in jQuery I'll see if I can get away with just slim.
It's in your cache because it's useful; at least your concede that it is likely to be in a user's cache, in which case the added page weight is 0.
Seeing as my argument was so terrible, I'd think you'd have an easier time forming a substantive reply, vs the struggle we see here.
I don't really understand the value added in your personal attacks.
Yes. These "plugins" are making your page heavy and wasteful and I hate browsing websites made by these "luddites" because they're slow and annoying and probably selling my information to advertisers.
>It's in your cache because it's useful; at least your concede that it is likely to be in a user's cache, in which case the added page weight is 0.
It's not like the browser caches the entire JavaScript JIT output. There is a performance impact and more importantly there's a cognative impact from having to use jQuery to interact with Bootstrap on top of whatever sane library (or lack thereof) you're using for everything else.
>Seeing as my argument was so terrible, I'd think you'd have an easier time forming a substantive reply, vs the struggle we see here.
What sort of substantiation do you think I'm missing?
>I don't really understand the value added in your personal attacks.
I didn't issue personal attacks, I attacked your argument. I have no commentary about you as a person leaving aside this one issue I disagree with you on.
All? Everything you notably had to add in this comment?
>using a shitty library
>The time for jQuery is long past
Easily-found examples of opinion without substance.
>probably selling my information to advertisers
You think Bootstrap JS plugins are selling your information? I suggest you take a glance at the open source code.
>cognative [sic] impact from having to use jQuery to interact with Bootstrap
$(div).modal()? I'm ok with that level of cognitive impact.
>I didn't issue personal attacks
So the "people like you" was entirely impersonal? Forgive my misunderstanding.
What, answers to your questions? Cool it down bud. I assumed from the outset that you didn't actually believe jQuery was a good library but rather that you thought it was acceptable for Bootstrap to use it. If we really need to go over why jQuery is a shitty library, well, see the link you responded to in the first place.
>$(div).modal()? I'm ok with that level of cognitive impact.
Not just $(div).modal(), but compounded with the fact that everything else is going to be using something other than jQuery. You're probably using React or Angular or something similarly less stupid than jQuery, and you will have pain points everywhere the two systems have to touch.
>So the "people like you" was entirely impersonal? Forgive my misunderstanding.
Yes, "people like you" who think jQuery is still a good idea in 2017.
I already pointed out that article's shortcomings. You responded with calling jQuery "shitty" and a personal attack.
>You're probably using React or Angular
Oh sure, I didn't suggest using jQuery with Angular. Please reference the title of the post for the context of my argument.
>Yes, "people like you"
So, a personal attack. I'm glad we now agree.
You've been thoroughly corrected already. If you insist on receiving every attack on your argument as a personal slight, then that is your prerogative. But please, leave the rest of us out of your nonsense.
Compared to this overt oversimplification, I don't. I addressed the attacks on my argument as such. I made no mention of a personal attack until it was presented, and if you scan the rest of my comments on the thread you can see I didn't "receive every attack" that way; your generalization is easily and instantly proved false.
I identified a single personal attack, "PEOPLE like YOU" as such, and the owner of the attack agreed with me ("thoroughly corrected", in your words).
I suspect you know this of course, but tried to misrepresent my objections anyway. Please, leave the rest of us out of your nonsense.
Building Bootstrap 4 from source (which is what you want to do for your own themes and customizing) requires a somewhat hefty npm install due to babel, autoprefixer/postcss and clean-css, and in particular due to node-sass which is using libsass/node bindings, thus requiring gyp and Python. I'd imagine a leaner setup based on a precompiled sassc binary for SCSS processing could be useful.
Considering Bootstrap does not support the same browsers that CSS Grid does not work in, this argument doesn't stand.
http://caniuse.com/#search=grid
If you look through the stats of every unsupported browser in the list above, almost all of them are %0.x. Adding them all up still gives you single digits. And with Flexbox as a fallback, you're covering virtually all modern browsers.
I really hope you consider adding this last feature to Bootstrap 4 as I truly believe it will be worth the effort.
If I was going to offer a contribution myself, it might be to work on removing the jQuery dependency.
Additionally, semantic UI deserves the scorn of a thousand linguists for the most misleading (unsemantic? or even antisemtitic?) product name ever: there is nothing semantic about class="col-xs-12 col-m-3 col-x-1"
I mean I can write CSS from scratch and make it responsive, but it generally looks awful without having a designer.
But using bootstrap I can use a default layout, and the default components and it looks respectable.
I rarely use semantic for its grid though. Those are now easy problems to solve. I use it because it gets me a clean and pretty UI I can theme later to adjust the specifics (or get someone who is better at design than me to do it).
I've never heard of bulma until this post so I will give it a look.
I worked with Foundation 5 + 6, Semantic UI, Spectre, Bulma and Bootstrap 2 + 3 (and some more lesser known Frameworks) and I must say that the Bootstrap 4 team really nailed it. All the other frameworks are good, but this is just great to work with.
Took a look at Foundation, and the new XY Grid is really really nice and much better than the current Semantic grid.
https://www.youtube.com/watch?v=Xl5DjEzKn1g
I especially love
1. It also works for Y 2. how you specify responsive, "small-4 medium-6 large-2" means on small devices 4 wide, on medium 6 and on large 2 wide. This makes layouting responsive much easier.
https://getbootstrap.com/docs/4.0/extend/icons/
Then again I am equally shocked that there are so many competing icon sets that look promising.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
This is the correct hash:
sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M
Functional CSS helps us maintaining large scale component-based project fairly easily. You have to know CSS though.
Useful for marketers or authors without coding experience to build pages within a restricted CMS (they can't edit all the code, but they can add classes to components).
Most of it is not components, though; most classes are just a single CSS property and value. This easily bloats into a maintenance nightmare:
<footer class="bg-white black-70 ph3 ph5-ns pv5 pv6-ns bt b--black-10">
It has its place, but something like Foundation is more appropriately considered an alternative to Bootstrap.
It has Flexbox!!! Although our team has added additional classes to get some of the UI done, I am sure, we could have done it using only Bootstrap. We get lazy :P.
The primary reason I like Bootstrap is because of the semantics. Columns are col, Tables are table, Cards are etc. Primary is main action, Danger is error etc. etc. As they say in UX, "Don't make me think!"
Congrats and a massive thanks to anyone who has been working on this fantastic project.
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip with HTML</button>
in bs3, there was no easy way, you had to basically use javascript to achieve it.
<button class="btn btn-default btn-spin">Click Me</button>
I been waiting for something like this to be achievable for some time now.
Bulma has this perfected and it really is handy.
Implementing that .btn-spin yourself wouldn't be too hard either, couple lines of CSS...
I personally don't work on any sites small enough to ignore all the browsers without Grid support yet.
I eventually moved over to bourbon.io with the help of one of the core contributors.
I'm getting a "Bootstrap dropdown require Popper.js" error
The thing I'm most excited about is the flexbox grid.
What's next, ads in the source code?