Bootstrap general comments

[MrPhil]

The Bootstrap library seems to have generated quite a bit of buzz, and has been used to create a responsive version of osC. I decided to try out some tutorials on working with Bootstrap. While overall, it seems promising, I did find some shortcomings in the user experience that would need to be overcome before I would use this library for a website. I'm assuming that the Bootstrap version (3.3.2) found on maxcdn.bootstrapcdn.com is the standard one, and not an old one or one customized to the tastes of MaxCDN.

 

In no particular order...

1. Preset color indicators (info, warning, error, etc.) need an indicator icon too, not just a color. I think this should be built in to the class (i-in-circle for information, !-in-triangle for error, etc.) and not have to be provided by the page author in the text.
2.  Buttons have too subtle a color change when hovering or pressed. There is a dashed outline, but it's easy to overlook. Someone who can't see colors at all should be able to easily see what button or pill they're hovering over and see easily that they've pressed the button.
3. In general, toggled buttons need more than just slight color change to indicate their state. They need an indicator (such as a small filled box) to show a toggled state. Perhaps a box could be used for checkbox behavior, and a filled disc for radio button behavior. Whatever is done, it should be built in and not something added by the page author.
4. The breadcrumbs separator is /, which I would change to ». This can be changed in CSS .breadcrumb content: "/\00a0" to "\00bb\00a0". I think the >> separator is much more commonly used than a / and looks better.
5. In the tutorials, some transitions were supposed to "fade", but they all seemed instantaneous. Has anyone else had problems with "fade" not working? I'm testing on a laptop -- I don't have a smartphone.
6. A modal dialog doesn't automatically disable what's underneath! The page author needs to add data-backdrop="static" in the launch button. I haven't tested this enough to see if that makes the entire page deactivated, or just that one control. Anyway, a modal dialog should by default deactivate the entire page.
7. The "hamburger" icon in collapsed navbar needs a title= to show what the hell it is. In <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> add title="Expand hidden entries". That really ought to be the default behavior. Right now, the page author has to remember to manually add it.

Anyway, after a fairly quick play with a few sites' tutorials, those are my gripes about the Bootstrap user experience. I don't think the folks at Twitter followed accepted guidelines (especially accessibility). What do others think about this?

 

Now, assuming these CSS and JS libraries are the current state of the art, what's the best way to improve upon them? Using better color contrasts and adding various indicators shouldn't hurt anyone used to the default Bootstrap. Is it practical to add your own CSS to override their settings, or is it better to modify the provided CSS files? How about JS, if any changes are needed there? How much risk is there of ending up forking Bootstrap by having your own customized versions of their files, versus how much risk is there of later releases changing properties, etc. and invalidating your add-on local CSS overrides?

 

Another thing is, how robust is Bootstrap when dealing with older browsers? Does it degrade reasonably gracefully for those poor saps forced to use IE6, or does it fall over dead? A few years ago, I looked at a CSS framework called 52framework, which put a lot of effort into backwards compatibility with older browsers. It's not responsive, so it doesn't overlap all that much with Bootstrap.

[oscMarket]

@@MrPhil, these are valid questions, but to be honest, it is hard to answer them.

 

Frameworks are a personal taste, they come in many flavors.

I discussed about that taste many times here on osC, as my personal view and not looking to deep into bootstrap's pro's/con's, as they are not of my interests, i found it not a good idea to code upon bootstrap.

Bootstrap should be optional within.

 

For that reason i made a flexible osC that is capable of using templates.

Within these templates you are able to choose your own framework.

I admit i have not done all yet, for example the alert messages still need to be template capable.

perhaps some functions inside the html_output also require some changes, however that could be solved to use your own html_output in the template.

 

To come back to your original questions, take the time to see what the net writes about the con's/pro's for Bootstrap.

you will notice there are many different views on that.This put's all back to my original statement.... it is a case of taste.

And yes you can overwrite bootstrap's original css with your own included css, i would not overwrite original bootstrap css files.

Your critics for the framework's handling things could be discussed on the frameworks own github page.

you will quickly notice that you are not the only one who has something to say about it.

 

One thing i can tell you, it is fun to work with, but i know that you are a critical, but positive person, so i can not guarantee you will have fun with it :)

[Bob Terveuren]

Hi

 

I've built a couple of parallax type Bootstrap sites for clients and my take was that once all the geegaws are built in there's a heck of a load of code in there making a big page load - the Bootstrap makes the column setup easy to work out though and if you start pulling in modal stuff and extra jQuery for things like filterable lists (http://isotope.metafizzy.co/filtering.html) then it can get quite flexible - it's a different mindset from PHP/MySQL - loading all the stuff into the browser then displaying it piecemeal depending on the user interaction rather than running back and forth to the server all the time.

 

To answer some of your points - it is lousy with older IE versions - there's a respond.js and a file called html5shiv.js that you can call using <!-- if IE which helps a bit.

Buttons can be sexed up a bit using the likes of http://charliepark.org/bootstrap_buttons/

 

Best method of css is to include your own 'override.css' after the Bootstrap ones - that makes it easier to track your changes but further bloats the code - last parallax page I did has about 250k of css  and 250k of javascript - the guy that wanted that page lives in a large conurbation with oodles of connectivity and 4G, I live in the middle of nowhere with no 4G and not so good everything else so that site, to me here, is useless.

jQuery also needed tweaking - again I tended to use overrride.js rather than start editing the core js files- more bloat.

 

I also found that whilst relying on CDN is 'the way' some files would hang the page at times (font-awesome for one) so a lot of those ended up on the local server.

 

It all seems along way from 'you must cater for non javascript users', 'don't forget your W3 validations', and accessibility is ignored (you can add in the accessibility stuff yourself but it's extra work)

 

Building from scratch I'd use HTML5boilerplate and build on that (time and money allowing) - [http://www.initializr.com/] otherwise Bootstrap is quick and dirty

 

My biggest 'beef' is that everything looks the same ;-)

[oscMarket]

Do not forget to look @ http://getbootstrap.com/customize/ you could take all components you want within bootstrap.

[burt]

Never ever EVER change any external library file. 

 

You can over-ride any part of any .css file that we use in osCommerce (including the bootstrap .css) by amending 1 file:   user.css

[MrPhil]

Interesting responses so far (keep 'em coming!).

 

There are many frameworks out there, so many that it's hard to choose. I'm starting to look at Bootstrap (mobile first, reasonable on laptop/desktop) simply because osC appears to be going that way and it would be useful to have skills in that area (at the least, to be able to work on osC). Bootstrap looks to be widely enough adopted that it could be a valuable job skill to have. I looked at 52framework a while back not looking at responsive/mobile (which it's not built for), but as something that could make use of HTML5/CSS3's new features without stranding users of older browsers. It looks like Bootstrap is more dependent on newer browsers, but it would be unacceptable if it breaks down badly (is unusable) on old browsers.

 

On the question of whether to modify Bootstrap files, I find it interesting that they provide tools to generate your own custom versions (layout changes, omit unused widgets), yet the general advice is not to modify (instead, override with your own file). If you're going to serve your own copies of the standard files, to avoid server outage or congestion problems at MaxCDN, what's the drawback of modifying them (slightly)? Either way, you're still responsible for making sure you don't fall too far out of date. Just keep good records of the changes you made, so when you update to a new level of Bootstrap, you know what you did. The alternative is to directly load Bootstrap libraries from a standard source (such as MaxCDN) and supply an override, which bloats the source some more. On the other hand, not directly loading someone else's library (i.e., use your own copy) insulates your site from breaking unexpectedly when Bootstrap makes a change. Thoughts?

 

"Everything looks the same" certainly is a valid reason to tweak a standard library to get a unique look. It's not just lack of good design principles in Bootstrap; it's the cookie-cutter approach that makes your site look like a million others.

 

Finally, regarding the overall problem of code bloat with these libraries, it's going to be a problem any time you want to do something that wasn't built into HTML from the very start (anyone want to chew out Sir Tim for failing to anticipate smartphones?) and require additional code. Pruning your private libraries of any widgets you don't use, and using the minified versions will help, but the biggest gain might be from directly customizing the libraries rather than overriding with an additional large file. It sounds like extra work for a page author if they want compact code. Too bad this kind of stuff isn't built right into the browsers, as part of HTML! Maybe HTML6/CSS4?

[oscMarket]

@@MrPhil, when you change specific settings yourself in the bootstrap css, there is a BIG chance you break the whole layout, as there any many cross-depending css references in it.

But you can only find out if you play with it.

[Bob Terveuren]

Hi Phil

 

I think a lot of Bootstrap and jQuery does exist within modern browsers/HTML5 - thing is that it is sooooooooooo much easier to use the packaged stuff - makes us lazy I guess.

 

Faster download speeds too have allowed us to bundle more 'stuff' into pages - there's a lot of articles and papers on this and most seem to pull their data from www.httparchive.org (if you have the time there are some interesting facts in there) - have a look at figure 1 on this page - 1995 average page size 14.1k - Jan 2014 -  1622k .

So I guess bloat is no longer considered a problem by most people (it just goes against the grain as I was always told to keep page sizes down) - however IMHO most of the Web is commercially driven so is targeting the % of the population that will spend money is what they'll aim at and if that takes 1622k of code and the customer will accept the download time so be it.

 

Backward compatibility is also no longer apparently an issue with most - possibly they look at the user stats for the old browsers (IE 6.0 = 1.31%) and decide that the 1.31% are old gits too tight to buy a decent laptop let alone one of them thar' new fangled tablets so are not in the target segment - again that goes against the grain here but who am I not to move with the times?

 

I do have an XP laptop with IE 6.0 (but I cheat on that and use Chrome) and no tablet (nor even a smartphone) so I am officially an old git - however I would go with your idea of designing for the phone, then tablet, then desktop - you can split the page into those three approximate sizes using about 3k of css or 30k of Bootstrap css and then work on.

 

Maybe we should try for a 'less is more' approach? That make me a Luddite? Or just an Old Git?

[oscMarket]

@@Bob Terveuren

@@MrPhil

 

i have a challenge for you both......

containing 7 folders, 77 files total size (on disk) 312 kB (319.488 bytes), all template files.(bootstrapped html code)

Above folders and files running in a template folder,this allows you to make your 'less is more' approach ON TOP of the CORE files from @@burt bootstrap version.

 

( you could even use a lighter framework, perhaps only responsive capable and an easy to use grid system, no fancy stuff... or if you require and it has optionals, use them)

What you need to do is "find" hard-coded html left overs within.

 

The advantage of this system is that on each osC upcoming version, your templated files stay untouched.

Because this is now a 1 man project (what eventually will be contributed, and hopefully accepted/adapted to core), it would be nice to see some veterans puzzle the last pieces out.

 

I will soon update to Github.