Bootstrap is a lovely little thing. I use it for all new projects, as it kindly stops me from being nerd-sniped by CSS features and cross-browser comparability quirks. I usually end up needing to supplement it or replace it eventually, but it gives you so much for so little.
This!! All my little dashboards and apps I use bootstrap for them initially. Once they've come to a suitable position where the bootstrap framework gets in the way by being a little clunky/big/not specialised enough in certain ways/just looking boring (:D) I go ahead and rip it out. But that feels like the whole point of a framework called bootstrap right? Like its name is literally its purpose :).
I'd like to know, too. I've been using bootstrap in a couple of places and every time we change a page to use it, it feels like it'll be 10 times harder to rip it out later.
Does anyone know of an scss-based UI framework, where I can just call mixins into my css? Or is that even possible with bootstrap?
Adapting html to a UI framework's code feels like a completely upside down approach.
Ok this is an excellent question. The way I do it is by first converting stuff to semantic names. If it's a somewhat serious project I'm likely to have done that from very early on. I use a method similar to https://www.sitepoint.com/sass-semantically-extend-bootstrap... to do this.
Later, I start converting this stuff to be what I actually want in either a custom CSS or by integrating some other framework.
Note though. I explicitly mentioned this is for my little dashboards and apps. When I start this process, pages will look broken from time to time and there might be pages that look Frankensteined. I've never done this on a serious app although I want to do that for one client I'm consulting for. Since I wrote all the code myself, here's my speculation on how I'll do it.
Since I have a fairly structured way of arranging my divs and my forms, I'm going to hack together a parser using beautifulsoup/htmlparser to get the bootstrap stuff out and convert those to semantic names. So it'll be something that goes through a file, and then tells me it found a div.row here (show me the surrounding lines to get me an idea of where it is) and then ask me to input the semantic name. It'll spew out the sass files I want and change the jinja templates.
From there I'm going to attempt to plug in material just because I like it so much :D
No I'm afraid I don't. You are right that this is a lot of pain for a UI framework that's supposed to save you time. But because I've done this a few times over it's become fairly simple once it's coupled together with some vim macros and snippets. But it's not a very good workflow that someone else can adopt quickly. I just found bootstrap to be super comfortable to get started and I also built some generators that auto generate templates for me when I work on my little projects. When I wrote those I made them to use bootstrap and I can't be bothered going back to change them now
Bootstrap is bloated and identifiable within a second of opening a webpage, it's eventually removed from every project that goes anywhere. But it's a slow and painful process, because it has hooks in all over the place.
It's better to start out with some very simple css boilerplate, the app is new it doesn't need to look like Twitter... if the app is new it probably shouldn't look like Twitter anyway, it's current-year.
Someone set up a hot or not style web app that asked whether the screenshot was of a bootstrap site or not. It was harder than you give credit for, and interestingly it was hard both because many Bootstrap sites don't look like stereotypical Bootstrap, but also because many non-Bootstrap sites do look like stereotypical Bootstrap.
Haven't you heard? It's now a popular trend, to claim that you do things differently just to be different, even though it doesn't make logical sense, and takes a lot of work. We call it the hipster hunger games.
If you are using LESS or Sass, it's really not hard at all to only include the parts of Bootstrap that you need. In my experiences, I often need just need maybe half of it and don't bother much with the Javascript stuff. I don't think Bootstrap really has performance or size as a first priority. It's really just a big toolkit, ready to go so you can whip out a functioning app.
This is true of a lot of frameworks. I've honestly not been a huge bootstrap fan, and Foundation 5 and 6 also can be built with SASS and you can easily remove components you don't use.
If you're trying to maximize compatibility while also get designs up quickly, any modern framework is preferable to no framework at all.
I've used semantic UI before and I loved it. But I'd never use it for anything else but a desktop use case. Apart from the css size the render time is very, very slow.
The first time I looked at semantic-UI, I honestly thought it was a joke. "Anything can be a <button>, just throw this class on it!" I see they've toned down their "just use divs and spans" examples a bit, but many of their examples are still terrible from an accessibility standpoint [1] and are anything but semantic.
SUI is designed with 3,700+ variables under the hood, and a six level deep theming system (site default theme -> site packaged theme -> site user theme -> component default theme -> component packaged theme -> component user theme).
It becomes very possible to build large codebases around SUI that can be extended over the course of a startups growth that can build all of the company-specific changes purely in theming variables, custom components and css "override" files. After setting up your core UI in SUI you can simply fork our doc style guide to use as branded style guide for your company.
Deploying a new "on brand" microsite can be as simple as copying over a theme folder, tweaking things like @primaryColor @fontSize, @fontFamily, and changing some button shading to create a new variant.
With regards to the build size, most of why we are larger is that SUI includes 50+ components. With our gulp pipeline you can narrow it down to only the components you want. There's even a PR that I'm looking at which, when merged, will let you specify only the specific parts of a single component you want to include in your build, narrowing down file size even more.
Seconded. Semantic-UI is for practical work: if you need a reasonably good-looking app/site right now, go with it. You will be laughed at by purists (so many divs! large! suboptimal!), but you'll get the job done quickly, and they won't.
Also, Semantic UI is the most complete library that I've found. If you build an app, that is really important, you don't want to find out one day that there is a gaping hole because a certain widget hasn't been implemented.
Could you provide some specific examples? That's almost word for word what people say about Bootstrap, too, and it'd be nice to know what shaped your opinion.
Again, here my vote goes for SUI, it's cleaner and better designed.
Untreated Bootstrap is so widely used that without extra styling it looks just another UI with no personality. Design is a sensitive, subjective topic however. Sometimes you want that crude industrial look that Bootstrap has :)
Yes. Use it with care, file size is indeed more bloatish. If you need plugins for bootstrap, then you are probably not using it properly. Bootstrap is just a scaffolding framework you should replace after a time.
Semantic UI is a production ready app UI framework.
Bot have legit uses, but I think they cover a bit different use-cases.
If I'm building a small in-house intranet with no design resource and a plugin provides a good solution, then why am I using it "wrong"? Isn't that the kind of thing Bootstrap is perfect for? I'm certainly not going to spend much time optimising it.
It was just a general feeling because Bootstrap is intended for scaffolding and getting started fast. Not sure what plugins do you use, but for example Semantic UI has lots of UI already built in that you might find in third party plugins for BS.
> I'm certainly not going to spend much time optimising it.
if it's a quick hackish tool for your team then it's certainly fine
Every use case is a bit unique. I've built apps with bootstrap, but I gradually removed it later because I simply rewrote everything I used from it.
There are pros and cons of Bootstrap just like there are with all tools.
As an example, DataTables works out of the box with Bootstrap and Foundation, but not with SemanticUI. Same with Select2, Symfony, JetBrains IDEs.
The more bespoke your application, the more Bootstrap will either be useless or counter-productive. But if you're building a standard UI, Bootstrap is great. It's easy to find junior devs who can use it, and there's good documentation and support.
I've also never heard this. And IMHO this is very wrong way to think about it. Bootstrap is a comprehensive set of well designed and coordinated UI widgets and paradigms. And it's all customizable, so you don't have to get stuck with that "bootstrap look".
Because it's way faster to test ideas and also look reasonably well. However, over time it will get in the way and you'll be better off extracting the stuff you actually use. At least it was my latest experience with it.
That's an impressive set of UI elements, and impressively consistent.
But their use of jQuery in front page examples hardly inspires confidence. I tried to find out in a few clicks whether jQuery is required, and couldn't.
I made the switch about a year ago and love it. There are some edge cases that you run into every so often but on the whole, it works great. I also appreciate that it is more minimalist than bootstrap.
It seems potentially cool, but the propensity for their docs to seem to assume that I'm going to have my inspector open to poke around at their classes and HTML structure is pretty annoying.
Understanding grid on Semantic UI has been very difficult for me. I just couldn't get it to work. And also there aren't many tutorials. Since I was spending lot of time, I gave up and used Bootstrap, whole thing was finished in 2 hours.
semantic-ui has some nice components and their look and feel is nice, but it breaks in a lot of ways when you try to create something yourself. This is the big benefit of BootStrap; it's robust and lets you fiddle.
It's not a big knock on semantic-ui's part; there aren't a lot of products that don't break within an hour or so after I start using them, it is however, a big plus to bootstrap that it rarely does break when I try something.
Go to http://semantic-ui.com/ and try tabbing through the page. Here are some things you might notice:
1. The menu button doesn't get focused (or they disabled the style that makes focus apparent). It's not possible to open it with the keyboard either by pressing space or by pressing enter.
2. Tab a few more times until you get past the BEM and SMACSS links. Notice how those three tabs can't be selected with the keyboard?
3. Sign up button has no obvious focus.
4. Dropdown menu cannot be accessed with keyboard nor does it have a focus style. The same applies for the buttons in that area as well.
5. Many of the elements in the "Unbelievable Breadth" section either don't allow you to focus or have styled the focus in a really non-obvious way.
Basically, it looks pretty and you can use your clicker, but Semantic "UI" screams to me "works for me so fuck everyone else"
Couldn't agree more, this framework seems like a misnomer. How can you call it "semantic" without making it accessible at even the most basic levels? Bootstrap runs circles around this framework in this regard.
Susy is nice, but note that it's just a very fancy CSS layout calculator. Bootstrap, Foundation, and SemanticUI are full-fledged frontend frameworks. They're incomparable.
While we're plugging our favourite Bootstrap alternatives, I just want to give a shoutout to Bourbon: http://bourbon.io/
I find it a lot more flexible than Bootstrap, but equally useful for fundamentals and cross-browser support. It is also less opinionated about the HTML markup and styling, at the cost of requiring more setup (rather than just, say applying classes) than Bootstrap. But with the additional modules of Neat, Bitters, and Refills, you can get the same sort of UI suite going quite easily.
This is apples vs. hammer comparison. Totally different tools for different purposes.
Bootstrap is for copy-paste website/app sketching and bourbon is for speeding up SASS coding. I tried it, but I ended up using 1-2 functions of it, so it got dropped.
I remember that before BootStrap came to the scene, we used to work with BluePrint CSS. BluePrint gave a nice canvas and concealed all the IE6 related issues. However, once Google Chrome became mainstream, it was time to move up to the next level. BootStrap emerged to the scene and completely won over so many hearts. The world is a better place because of BootStrap! Many many thanks for the team that put this together.
Bootstrap is awesome, but initial loading of my apps was taking a while. I reconfigured to use the Skeleton framework. Not nearly as feature packed, but works amazing well at a very tiny fraction of Bootstrap's size.
I'm surprised how many stars Font-Awesome has. If you consider that using fonts for icons is an anti-pattern the fact that a font icon is so popular is mind boggling.
Doesn't Foundation require jQuery? Seems like it's a non-starter for anything written in the past 2 years. Maybe Bootstrap does too, I haven't used it in ages.
Really? I've subscribed to a few web SAAS apps recently and they all seem to have most of their requisite jquery (in one case, quite a bit of the whole thing) compiled into their app.js.
Fair enough. I don't do a lot of event dispatching (well, bubbling), so I haven't found it a clear win for my use case, but it's only 10k more than jQuery (gzipped), so I can see that it would be good for a lot of them. As I move to something more componentized instead of the goulash I have now, I suspect that this will change.
