Comment by awhitty | Hacker News Reader

Comment by awhitty | Hacker News Reader

Parent Full thread

I appreciate the comparison to the ancient Web, but this article doesn't say much more that I can't find in Bootstrap's documentation.

Anyone who has used Bootstrap's mixins with semantics in mind knows there are some bigger issues to address than the layout. Some questions off the top of my head:

* How do you build semantic forms with Bootstrap without going to markup fluff hell?

* How can you avoid the unsemantic class names for components that are tied too closely with child components (I'm looking at you, .panel)?

* What is the semantic purpose of a row element? It seems purely presentational to me.

* How do I add icons without peppering span.glyphicon.glyphicon-X's all over my markup?

* How should I organize/maintain all of my LESS files as my stylesheets scale? I'm not looking for any one "right" way, but suggestions are always nice.

* Are there any optimizations I can consider when I'm only using a bit of Bootstrap's functionality?

* How can I extend Bootstrap's mixins for my own needs?

I'm hardly a pro at using bootstrap, but we have been dealing with a few of these things, and I can tell you how we've handled some of these questions:

* How do I add icons without peppering span.glyphicon.glyphicon-X's all over my markup?

This one's fairly simple--you still need to add a class to the span, but you can extend the glyphicon.glyphicon-X bit into a particular icon and call it a day:

    .foo-icon {
      &:extend(.glyphicon);
      &:extend(.glyphicon-foo);
    }

* How should I organize/maintain all of my LESS files as my stylesheets scale?

I'm not sure there is a "right" way, but I'd suggest keeping like things together. You're going to end up with a number of rules that are either dependent upon each other, or at least similar in goal, and they can live near each other. In theory, future refactorings will be easier that way.

* Are there any optimizations I can consider when I'm only using a bit of Bootstrap's functionality?

http://getbootstrap.com/customize/

^ Do that :)

Good luck. If you find answers to the rest of those questions, pass them to me!!

questions 1-4: "Semantic" css is a waste of time. Either you're putting information into the html or you're putting it in the css. Use what works well.

question 5: I'll usually put bootstrap into its own folder, have a style.less outside of the folder that imports bootstrap.less, import stylesheets with custom mixins after bootstrap.less, and import straight up custom styles after that.

question 6: go into bootstrap.less and comment out the stuff you're not using. For the js, use something like gulp-include to concatenate.'

question 7: Load my-mixins.less after bootstrap.less, copy and paste mixins from bootstrap into there, and modify them.

Reply on news.ycombinator.com