Just wondering if the veteran coders here use bootstrap for responsive site projects?
yes or no ?
and why?
Thanks in advanced for your inputs.
IMHO, CSS frameworks are like Sirens luring the unwary to their destruction. They are full of complicated bloat that is supposed to make life easier, but from what we see here makes life harder for a lot of people. I always prefer to start with a clean slate—using only the code needed for the current purpose—than have to unravel and refactor a whole pile of mess supplied by someone else.
Absolutely not. I think they are all junk. For me, the most important part of building a site is the first iteration. That’s your chance to get everything lean, clean and efficient. Once you start to modify it later, it’s harder to keep the code clean, neat and redundancy-free. With a framework, you are already starting with a ton of redundant code that you have to tweak and modify, meaning that from first base you have a mess.
And because you don’t know the base code intimately, you easily get confused about what styles are applying where. People often post here saying their site is a mess on small screens, for example, because the default small-screen styles don’t fit with their design. What a mess.
And I think the important thing to be focusing on is leaning HTML, CSS and JavaScript. Once you start to use frameworks, libraries (jQuery etc.) and other tools (SASS, LESS etc.) you are creating more and more layers of complexity that have to be learned and mastered, and which offer up more tripwires and failure points. Yes, there are time saving aspects to all of these tools, but is all the hassle really worth it? Not to me.
I’m with Ralph on this and although I admire the work and effort that goes into these frameworks I find that ultimately they slow you down and stop you learning how to do things for yourself. By all means look at the code used and take the bits that you need as there are some very useful snippets in there where a lot of common problems are catered for but you do need to understand the code you are using and how it works in order to be able to maintain and alter it later.
It often seems that the people drawn into using the grids are beginners and the least able to fix them when things go wrong.
You should build your own frameworks/default/grid/reset that you can use as a starting point for a project and be sure that you understand why the code is in place and why you are using it.
Some of the hardest questions we have to unravel on the forums are where grids or frameworks have been used and gone wrong and they end up being almost impossible to fix.
I would never twitter bootstrap on a public-facing website, for reasons already outlined by @ralph_m; and @Paul_O_B; , but we do use it for our CRM at work. Which is basically an application for which looks and colors don’t really matter, as long as it’s clear. Which we found bootstrap is. For sites like that bootstrap is really nice because you don’t have to think about stuff like color schemes, fonts, how should the menu look, what to do about tables, etc, it’s all taken care of, and the basic bootstrap theme looks very clear IMHO.
So basically, when creating a site where you’re happy with the default look of Bootstrap, sure, use it. For any other site, roll you own.
I’m managing development (and actually doing most of the development) of a 9000 page website. It needs to be mobile first, responsive, touch optimised and work accross as many browsers as possible, until now I have avoided bootstrap and only gone so far as to use a pre-made layout sheet for a 12 col. grid.
Recently I’ve been looking more deeply at bootstrap and I think provided you know enough HTML/CSS and have a pretty strong idea of what you need using it can be a good idea.
It will take some coordination of our 4 person front-end dev team but a standard method will be most welcome, we will adapt the framework as our site is heavily branded, but what we will end up with is a flexible toolkit.
so, I would say, use it if you know what you are doing and you can make it fit your needs.
we’re at one of those points in tech. like when compiled languages overtook handcoded assembly, or when GUIs overtook command lines - yeah they are less efficient at runtime, but the cost savings in development times means bigger and bigger projects will be made, tech and bandwidth will be made to cope, and people optomising every last bit will struggle to keep up with the scale change in the build effort, it’s sad because it’s a dying art - but you have to move with the times.
Wouldn’t a site that large warrant making your own template? I’d hate to have to debug all the issues with a framework over 9000 pages.
Hi,
Since my previous reply I have had a client specifically request that I create templates (over 80 of them) using bootstrap as my clients team is familiar with bootstrap and wanted to keep things consistent so that they know how to make small changes without asking me all the time.
My experience backs up some of my earlier comments in that I don’t think bootstrap is suitable for beginners for 2 reasons. The first is that is is quite complex in places and unless you understand html and css then you will struggle to adapt it to your needs. The second reason is that although a beginner may be able to use the default system (with no changes) quite easily they will then not learn how to code in html and css and will not progress as quickly as if they had built it themselves.
However for mid to experienced users then bootstrap can be useful and save time in many areas if you don’t mind the extra code overhead. Adding, menus, tab menus, dropdowns, modal boxes, tooltips, alerts all become a few seconds work as long as you don’t change the default appearance too much.
As far as the responsive grid layout goes then as long as your design fits into the grid you will be fine and has responsiveness built in and so will scale nicely. However (there’s always a but), if your design is more complicated and contains fixed width features then you will probably not use the grid features as much because the fixed width elements will just get cut off. This is where you need to have experience in CSS and html so that you can create your own sections of code with appropriate media queries to make the sections scale nicely.
In the end I did actually create the 80 pages quicker than I would have done without using bootstrap but you do end up with twice the code base. Although I have to say the client was happy with a lot of the bootstrap defaults so I didn’t have to change too many things and if you are not careful you end up with sites looking the same so you do need to inject some personality along the line.
Would I use bootstrap again?
I would if the client asks for it or has a team waiting that needs a consistent approach. Usually though I would prefer my own layout and minimised code but would miss the ability to simply drop in place all those features I listed above.
As usual with web designs you can create good or bad sites with bootstrap just as you can with vanilla html and css so in the end you do need some experience in coding to make the most of it.
you also would advise against less & sass?
I don’t use them but some dislike them and some [URL=“http://css-tricks.com/sass-vs-less/”]love them so you probably need to make your own mind up and see if they suit the way you work.
To me it just seems like another layer to get in the way of what you really want to do and another place for things to go wrong.
thanks Paul interesting articles.
If you’re just starting out, I will suggest to go for Skeleton, since its light and all you need is the responsive grid. After that, go for minimal frameworks like kube css or bones theme, responsivegridsystem or create your own responsive css framework.
Basically, all you need is the grid, responsive menu and images.
I was asked to use Bootstrap for a project because the future-maintainers didn’t feel too good about their CSS skills. Bootstrap offered them a few things they definitely wanted:
- something documented (the Bootstrap site pretty much states what each class is supposed to do)
- LESS (I’m not sure why but I think maybe they wanted variables for colours, since they were so picky about their colours they’d actually sent me pantone numbers, which were pretty useless by themselves)
- a grid (grid is an option, responsive is an option (but it was desktop-first, so not really mobile-friendly), fluid non-grid is an option, and px-based is an option and you can mix these)
- something anyone else they called on later would be familiar with
I ranted and wailed and gnashed teeth at Bootstrap as I got elbow-deep in the poop.
It was craploads of bloataceous nonsuccessful cetaceans, for small things. Lots of code partially because they attempted to address every possible edge case in a wide variety of browsers, kinda like what the jQuery guys do. If you actually need to support browsers so old you can’t even install them anymore, then the bloat of Bootstrap is probably exactly what you need. They do drop support for something occasionally, and I think the icon font guy never bothered to do IE6, but they still account for a lot of things.
It had accessibility problems, many of which were merely caused by sh*tty HTML. Examples would be <li class=“heading”>this is styled to look like a heading</li> as the first item of a list, meaning the reasons you would even have a heading (structuring your page) are gone, taking with it accessibility and navigation benefits.
There was a toggle “button” which at the time (this may have been fixed by now) was nothing more than an empty anchor with an arrow image in it and an onclick event. Without an href if wasn’t even focusable in browsers like IE.
Placeholders encouraged in place of actual labels. Arg. No experienced coder would leave them out, but newbies looking at the examples in the docs got placeholder-examples for form elements they certainly used, for I have run across these sites. The point of the documentation is to show what the classes do, but they also have example HTML to go with it.
Lots of stuff that only worked with the mouse, including lots of :hover with no :focus and click events on non-focusable things. Why even pretend to give a rat’s about one special type of mobile phone user (only the ones that start with an “i”) when you deliberately outline:none one of the most used input devices evar? I believe Chaals spent some time on Github trying to explain to the Bootstrap guys why outline:none and utter lack of :focus styles were bad, but I dunno if he actually convinced them, since I stopped following the conversation a while back.
So most of those I spent time fixing myself and rightfully charged the client for it. Also they had chosen the grid, which by default wanted space around everything on the page, but the design called for some full-width boxes and some boxes with grid-spaces. So I simply didn’t add a lot of grid elements so I could style them appropriately, but that mean they got a 80% grid page and a 20%… normal page. Dunno if that’s making things difficult for them today. The CSS (in this case) would have been much simpler without all the <span class=“row_blah”> in it, actually, but this was only a few pages and not a whole 9000+ page setup. The client also didn’t really need browser calculations of widths in % with tens of decimal places (width: 30.057743229837293%;), especially since no browser actually reads past 2 if that. But Bootstrap’s grid does offer that.
I ended up learning LESS, which I use today in my job only because someone decided on it long ago. Unless you’re using some of its advanced features (it can do some calculations, and non-cascading inheritance, guards, and overrides), it’s pretty much just writing sloppy CSS with harder debugging (unless you install plugins to do simple dumb stuff like show you line numbers). I save no time using LESS with a decent text editor, but it might have saved me time if I were using a MickeyMouse editor like Notepad++, because you type just a little bit LESS. Thus the name, I suppose.
SASS, and especially SASS+Compass are apparently way better alternatives to LESS, which to me doesn’t really mean anything. “OO” on a declarative language smacks to me of bags of syntactic sugar on a pile of ketchuped and tobasco-sauced bacon. Which obviously some people really, really like.
I just looked at some info on the changes to bootstrap. Boostrap 2, I didn’t think was too bad.
bootstrap3 actually seems worse and some of the names for the classes now go on & on.