What's wrong with the markup is that it conforms to the Bootstrap documentation, and the way the Bootstrap docs recommend writing HTML is absolute garbage.
<i class="dipshit-icon"> is the spacer.gif of my generation.
Can you point us to your popular time-saving framework that does all of this the correct way then?
Yes I'm purposely being snarky here because while I can accept that your are allowed to not like the choices the Bootstrap designers made, this kind of attitude doesn't help.
Bootstrap provides a ton of other valuable benefits to a web project's lifecycle, apart from catering to the one-man pedantic HTML developer who doesn't care about everyone else's jobs (IA, design, prototyping, etc) and dismisses the whole thing because it doesn't cater to his/her views.
Calling a project garbage and dismissing it in this manner is just short-sighted and, well, selfish. If Bootstrap's code was really that bad, wouldn't it be less popular? Wouldn't someone have produced a better competing product?
It's popular because it's pretty, not because its code is nice.
If you're genuinely interested in a framework that is actually sanely implemented (IMO), check out Foundation:
http://foundation.zurb.com/
It's unfortunate that it's not more popular, since it was the framework that actually inspired Bootstrap, but I can see why people think bootstrap is 'prettier'...
There are many better products than Bootstrap. I don't know why they aren't more popular. I guess the real problem is that craftsmanship is out of style.
Using Bootstrap is what is short sighted, because following its recommended implementation will create problems down the road, not just for me, the pedant, but the whole team.
I also find it very frustrating that Bootstrap encourages such markup. To be fair, the icons are by far the worst culprit; less-than-perfectly-semantic markup is a by-product of almost every grid framework out there, and much of the remaining markup is fairly clean, albeit a little verbose.
What would be super-awesome would be a version of Jetstrap that is framework-agnostic - i.e. one in which the available classes and their suggested structure is customisable. That sounds like a much harder problem to solve, but probably one that's worth someone doing.
It's actually already possible with our architecture, and we are using it for other markup/frameworks in some specific applications of the Jetstrap code. For the time being though we want to focus on Bootstrap for Jetstrap.
Maintenance. If somebody designed a site to look a certain way on a certain size of screen using "span-whatever" classes, you have to either a) remove them and rewrite the CSS b) change each one to the correct number of "spans" or c) override span6 to actually mean span8 in some cases.
This becomes an even bigger nightmare when you're designing for resolution independence, which everyone should be doing all the time.
If I want a different separation character for inline lists, I should be able to make that change in the CSS instead of doing a find-replace for every instance of <span class=sep>/</span>. That's what the CSS :after pseudo element was designed for.
The "hide" class should be added by JavaScript if its going to be added at all, because having a "hide" class with no way to toggle it off is wasting the users time and bandwidth and you should be ashamed.
I could go on and on, but I have run in to all these issues and more on real-world projects, and in my opinion, whatever marginal decrease in development time you get from bootstrap is not worth the technical debt that comes with it.
But as a matter of practice any major restyling is almost certainly going to involve changes to the structure, organization and even content of the HTML anyways.
With smaller changes it seems trivial either way. If I just want to do subtle restyling to a Bootstrap based website I don't really need to throw the baby out with the bathwater do I?
Now correct me if I'm misunderstanding the meaning of "semantic" here but basically you're saying the HTML has no influence on layout or design. That just doesn't make much sense to me.
In this way all design has to be done strictly through CSS. Everything kind of "thing" will require a complete set of specific styles because it's "semantic" even if it reuses elements of other things.
I mean this in the end is the reason so many people like working with Bootstrap it allows things to be built with some efficiency. Major components are defined and reusable. Semantic HTML to me is a bit like having to hand craft every individual widget, and cog when all I really needed was some off the shelf parts and maybe build customized dashboard and add a bit spiffy paint.
Honestly, I am on the fence on this. I love the idea of purely semantic markup but always seem to see this tradeoff in reusability whenever persuing it.
And that is no fault of your own - I applaud your effort to make a useful WYSIWYG editor for markup. Its the fault of the creators of Bootstrap for making it really easy for lots of people to write terrible HTML.
<i class="dipshit-icon"> is the spacer.gif of my generation.