4

I'm thinking about using only semantic classes in my HTML, while still using Bootstrap's classes styles inside the semantic classes.

For example:

mixins:

.newsItem {
    @include span4;
}

or placeholders/extends:

.newsItem {
    extend span4;
}

Is it possible at all? and do you see any reason why that's not recommended ? Thanks.

Daniel
  • 1,562
  • 3
  • 22
  • 34

1 Answers1

2

@include span4; and @extend .span4; won't work because:

  • In the first one, there isn't any mixins called that way in bootstrap.
  • In the second one, there isn't any selector called span4, the selectors are being generated with mixins like grid-core-span-x.

There are built mixins for that purpose: makeRow() and makeColumn().

In your case, if you want to use a span4 in your .newsItem div, you have to put this in your SASS:

.newsItem {
  @include makeColumn(4);
}

The code from those mixins is simple. 

@mixin makeRow() {
  margin-left: $gridGutterWidth * -1;
  @include clearfix();
}

@mixin makeColumn($columns: 1, $offset: 0) {
  float: left;
  margin-left: ($gridColumnWidth * $offset) + ($gridGutterWidth * ($offset - 1)) + ($gridGutterWidth * 2);
  width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
}

This mixins have downsides. I don't use them since the responsive grid won't be used in your semantics class. Why? Because if you look at the files that provide bootstrap a responsive (for instance, _responsive-767px-max.scss), only the spanX classes converts to a 100% width. The code:

@media (max-width: 767px) { 
     /* ... */

     [class*="span"],
     .uneditable-input[class*="span"], 
     .row-fluid [class*="span"] {
         float: none;
         display: block;
         width: 100%;
         margin-left: 0;
         @include box-sizing(border-box);

      /* ... */
}
Pigueiras
  • 18,778
  • 10
  • 64
  • 87
  • Is that true only for the grid? what If for example, I want to use a semantic button class ? – Daniel May 12 '13 at 21:21
  • @Daniel You can use `@extend` for some components of bootstrap. Button class is one of them because the CSS from the button is simple, it hasn't nested selectors. But for example, you shouldn't reuse `form-horizontal`, because the generated CSS will be horrible, because of the nested selectors. – Pigueiras May 12 '13 at 21:24
  • @Daniel I have an example in this answer with the button override: http://stackoverflow.com/a/16406593/1004046 – Pigueiras May 12 '13 at 21:45