Bootstrap only for mixins / placeholders - with semantic classes

Question

I am thinking of using only semantic classes in my HTML, but still use Bootstrap class styles inside semantic classes.

For instance:

Impurities:

.newsItem { @include span4; } 

or placeholders / extensions:

 .newsItem { extend span4; } 

Is it possible at all? and do you see any reason why this is not recommended? Thanks.

Answer 1

@include span4; and @extend .span4; will not work because:

• In the first there are no mixes called so in bootstrap.
• In the second there is no selector called span4 , selectors are generated using mixes like grid-core-span-x .

For this purpose mixins have been created: makeRow() and makeColumn() .

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

 .newsItem { @include makeColumn(4); } 

The code from these 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)); } 

These mixes have downsides . I do not use them, since the adaptive grid will not be used in your semantic class. What for? Because if you look at files that provide responsive bootstraps (like _responsive-767px-max.scss ), only the spanX classes spanX converted to 100% width. 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); /* ... */ }