Hacker News Reader

Comment by sopooneo | Hacker News Reader

Yes, Bootstrap is great. Honestly, I love using it. But where are all the people that I used to see screeching about semantic markup? Because this takes things in exactly the opposite direction.

View on HN

98% of bootstrap's documentation is about usage of the generated bootstrap CSS, which requires all kinds of presentational markup.

There's a solution for that: use the LESS source. Mixin the various bootstrap classes into the styles you write for your clean, semantic markup. It's a nicer way to work, and it permits removal of almost all the presentational "bootstrap" classes from your markup. With some thoughtfully-structured markup, you can even do away with wrapper divs in many instances.

This isn't without some sharp edges—you have to grasp what the various moving pieces of bootstrap do, and what different mixins you must apply to achieve the desired effect, but it's a cleaner/more powerful approach IMO.

To be clear, I'm glad about the CSS-only approach too because it enables non-designers to get over the suck threshold quickly. Using the LESS is more work at first but it pays dividends in the long run.

yeah, like using for icons http://www.w3.org/TR/html4/present/graphics.html#edef-I

Thanks for pointing that out. That seems like an odd design decision.

Edit: I wonder what motivated it. "i" for images and no one uses it to italicize text anymore?

yeah my best guess is that "i" for "icon", it's a good use, from the w3c "their use is discouraged in favor of style sheets." so I guess it doesn't really hurt no one, but the purists, or am I wrong?

`i` is for "italic", and that quote means that you should be using `font-style` instead of an HTML element to make your text italic.

Bootstrap is kind of aimed for HTML5, and "Font Style Elements" form HTML 4.01 got a new life in this spec (including previously deprecated S and U), with redefined semantics. Using I for icon is still wrong even by new definition.

http://www.whatwg.org/specs/web-apps/current-work/multipage/...

We've used for icons before. Main reason we started doing it, I seem to recall, was that we needed some sort of element there to make the spritesheeting work easily, and a lone empty is (a) short, (b) extremely devoid of meaning which might be added to it by browsers/readers, and (c) easy to remember when writing markup as i-for-icon.

you dont have to use their icons you know.

They don't use anymore. They use class icon.

It looks like they still do. From http://twitter.github.com/bootstrap/base-css.html#icons

<excerpt> How to use

With v2.0.0, we have opted to use an tag for all our icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:

  <i class="icon-search"></i>

</excerpt>

Yes, it looks like the docs are lagging behind the code. You just need to include the icon-something class in a tag.

Thanks for the tip. Even if I never use it anymore, still means italic to me. The thought of using it for icons breaks 15 years of ingrained habit.

yeah, it's only their recommendation it doesn't really matter what tag as long as you have the class here is the selector

[class^="icon-"]

At first, I thought that was a poor choice, too. However, has come to mean that something is to be interpreted under a different voice or mood. You are providing augmented meaning. To further color a bit of text with an icon, I think, is in the spirit of the rfc.

Notice, also, that the rfc talks specifically about classifying the alternate meaning, appropriately, with the class attribute.

http://dev.w3.org/html5/spec/Overview.html#the-i-element

My solution to this is to use @extend from Sass/SCSS as a way to bake that into more semantic structure.

Although - the implementations used in Bootstrap could be translated to a more semantic approach by using SASS or LESS mixins instead of classes. This is the approach used by the Susy grid system included with Compass. I see Bootstrap as a open-sourced library of tested cross-browser solutions to a reasonable set of challenges in modern front-end coding. As such I'm hoping it is possible to port a lot of it to a "semantic markup" way of doing things.

I suspect it's not possible to port it to "semantic markup"

Possibly - I won't know until I've played with the code a bit. But it seems to me that Susy has brought a simple but extremely powerful idea to implementing front-end code - instead of using a presentational element and layout-related class names like "row" etc. you can use a semantically-appropriate HTML element and @include your markup via a mixin. The actual CSS implementation can be the same - it's just that it is possible to separate the semantic HTML from the presentational structure (nested selectors with included of mixins as allowed by LESS/SASS) and the CSS implementation in the generated CSS.

I'm afraid I don't quite understand what semantic HTML means. Different people seem to have different ideas about the definition of semantic HTML. Could you point me to some internet resource that explains this stuff?

Reply on news.ycombinator.com