CODEWITHSUNDEEP
csstwitter-bootstrapsasscompass-sass
Daniel
Daniel

Reputation: 1582

Bootstrap only for mixins/placeholders - with semantic classes

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.

Upvotes: 4

Views: 1626

Answers (1)

Pigueiras
Pigueiras

Reputation: 19356

@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);

      /* ... */
}

Upvotes: 2

Related Questions