6 ms·

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

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.

mrpollo 15y ago
yeah, like using for icons http://www.w3.org/TR/html4/present/graphics.html#edef-I http://www.w3.org/TR/html4/present/graphics.html#edef-I
- oconnor0 15y ago
 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?
 - mrpollo 15y ago
 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?
 - intranation 15y ago
 `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.
 - rimantas 15y ago
 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/text-level-semantics.html http://www.whatwg.org/specs/web-apps/current-work/multipage/...
 - kemayo 15y ago
 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.
- xmlninja 15y ago
 you dont have to use their icons you know.
- niels 15y ago
 They don't use anymore. They use class icon.
 - nhebb 15y ago
 It looks like they still do. From http://twitter.github.com/bootstrap/base-css.html#icons 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: </excerpt>
 - dhendo 15y ago
 Yes, it looks like the docs are lagging behind the code. You just need to include the icon-something class in a tag.
 - nhebb 15y ago
 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.
 - mrpollo 15y ago
 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-"]
- deleted 15y ago
 [deleted]
- ibejoeb 15y ago
 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 http://dev.w3.org/html5/spec/Overview.html#the-i-element
idan 15y ago
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.
domgblackwell 15y ago
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.
- perfunctory 15y ago
  I suspect it's not possible to port it to "semantic markup"
  - domgblackwell 15y ago
    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.
    - perfunctory 15y ago
      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?
dfischer 15y ago
My solution to this is to use @extend from Sass/SCSS as a way to bake that into more semantic structure.

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.

mrpollo 15y ago

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

oconnor0 15y ago
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?
- mrpollo 15y ago
 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?
 - intranation 15y ago
 `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.
 - rimantas 15y ago
 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/text-level-semantics.html http://www.whatwg.org/specs/web-apps/current-work/multipage/...
- kemayo 15y ago
 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.
xmlninja 15y ago
you dont have to use their icons you know.
niels 15y ago
They don't use anymore. They use class icon.
- nhebb 15y ago
 It looks like they still do. From http://twitter.github.com/bootstrap/base-css.html#icons 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: </excerpt>
 - dhendo 15y ago
 Yes, it looks like the docs are lagging behind the code. You just need to include the icon-something class in a tag.
 - nhebb 15y ago
 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.
 - mrpollo 15y ago
 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-"]
deleted 15y ago
[deleted]
ibejoeb 15y ago
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 http://dev.w3.org/html5/spec/Overview.html#the-i-element

idan 15y ago

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.

domgblackwell 15y ago

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.

perfunctory 15y ago
I suspect it's not possible to port it to "semantic markup"
- domgblackwell 15y ago
  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.
  - perfunctory 15y ago
    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?

dfischer 15y ago

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