Live data from Hacker News

Using Bootstrap the Semantic Way

ostraining.com

31–40 of 71 posts

Re: Using Bootstrap the Semantic Way

#31
Here is a LESS mixin that will go a long way in making semantic Bootstrap easy to actually do:

.make-column(@large, @medium, @small, @tiny: 12) { .make-xs-column(@tiny); .make-sm-column(@small); .make-md-column(@medium); .make-lg-column(@large); }

Then use it with: section#main-content { .make-column(8,8,9,12); }

Re: Using Bootstrap the Semantic Way

#32
post #29

Earlier quoted context omitted.

Alternatively use SASS (and the bootstrap SASS port[1]) which doesn't has this problem, as it instead rewrites selectors. i.e. if you have: .column { width: 100px; display: inline-block; } And you do: .cool-sidebar { @extend .column; } Then the generated css will be something like: .column, .cool-sidebar { width: 100px; display: inline-block; } [1] https://github.com/twbs/bootstrap-sass

Less has the same feature: http://lesscss.org/features/#extend-feature

Thank you so much for pointing this out, Moretti! It drives me crazy when people talk about the extend feature like only SASS has it. People are always underestimating how similar Less and SASS are.

Re: Using Bootstrap the Semantic Way

#33
post #24

Earlier quoted context omitted.

Nicer looking div soup is still div soup. != semantic.

no, but or are semantic, and there's no reason you couldn't use those instead of by using the features of LESS or SASS.

That still wouldn't be semantic. Their only reason for existing is for layout. If html/css were semantic you could write all of your html first without thinking about style or layout and then go do the css after, but that's simply not possible today.

Re: Using Bootstrap the Semantic Way

#34

Still the most comprehensive rebuttal to this common (and I feel, badly mistaken) complaint: "About HTML semantics and front-end architecture" (from March 2012): http://nicolasgallagher.com/about-html-semantics-front-end-a... It's all well worth reading, but the conclusion is particularly to the point: "The experience of many skilled developers, over many years, has led to a shift in how large-scale website and appli…

That's no rebuttal, just an opinion. Oh we got this huge app and are to lazy to do everything properly.

Re: Using Bootstrap the Semantic Way

#35
post #3

The point of using bootstrap is a reusable set of classes. I really dont care wether class names are semantic or not,it doesnt change anything,except for pedantic people looking at your source code. SEO doesnt care , users dont care, accessibility doesnt care either. Using new HTML5 tags is good enough and was designed for that specific purpose. If i want semantics I use nav,aside,section instead of div,and so on. No…

Insert an anecdote about the carpenter and the quality of the back of the cabinet there. Except in this case it matters a bit more as others pointed out already.

Re: Using Bootstrap the Semantic Way

#36
We need a better word for this than "semantic". We're just passing the complexity back and forth between the HTML and the CSS, and the only "semantics" or meaning that arise are to the author/editor. Users don't care, machines don't care, and I've never, ever seen a large-scale site design that doesn't involve some reworking of both the HTML and the CSS.

Re: Using Bootstrap the Semantic Way

#37

Still the most comprehensive rebuttal to this common (and I feel, badly mistaken) complaint: "About HTML semantics and front-end architecture" (from March 2012): http://nicolasgallagher.com/about-html-semantics-front-end-a... It's all well worth reading, but the conclusion is particularly to the point: "The experience of many skilled developers, over many years, has led to a shift in how large-scale website and appli…

That's no rebuttal, just an opinion. Oh we got this huge app and are to lazy to do everything properly.

Saying "do everything properly" is an opinion too. Why is semantic markup more "proper" than Bootstrap's and class names? The idea that semantic markup is a beautiful paradise is unsubstantiated. If you want non-humans to understand your markup you can use microformats, http://schema.org/ markup, or another form of microdata. Making "semantic" class names doesn't change how your users or search engines parse your content.

Re: Using Bootstrap the Semantic Way

#38

Still the most comprehensive rebuttal to this common (and I feel, badly mistaken) complaint: "About HTML semantics and front-end architecture" (from March 2012): http://nicolasgallagher.com/about-html-semantics-front-end-a... It's all well worth reading, but the conclusion is particularly to the point: "The experience of many skilled developers, over many years, has led to a shift in how large-scale website and appli…

That's no rebuttal, just an opinion. Oh we got this huge app and are to lazy to do everything properly.

I'm not convinced you read the link, rather than just the bits I quoted.

Also, laziness is one of the three great virtues of a programmer according to Larry Wall. People are getting things done with Bootstrap every day.

Re: Using Bootstrap the Semantic Way

#40
post #36

We need a better word for this than "semantic". We're just passing the complexity back and forth between the HTML and the CSS, and the only "semantics" or meaning that arise are to the author/editor. Users don't care, machines don't care, and I've never, ever seen a large-scale site design that doesn't involve some reworking of both the HTML and the CSS.

Exactly. I think web devs want to believe that their HTML is purely content and CSS should fully drive appearance but that's never the case. It makes sense to create classes when you can come up with patterns and want to make sure that you aren't repeating yourself everywhere but simply moving the grid system into CSS just adds an extra layer of abstraction that makes it more difficult to read. Also, CSS doesn't support mixins (yet) so you end up with a lot more generated CSS than if you just use the classes.
Post reply on HN