Tweaking Bootstrap 2.0 for Semantic Markup

Tweaking Bootstrap 2.0 for Semantic Markup

ok in less, this is how I figured it out. Its the best I could do, and I couldn't figure out how to deal with .row semantically, but oh well.

Basically I created a custom-mixins.less and created a mixin called .col and the variable is @col. So when you write your selector and do something like .col(3); .col(4); .col(5); or something like that. It should create the proper width. I don't know how this would work for nested columns.

//custom-mixins.less
.col (@col) {
  #gridSystem > .gridColumn(@gridGutterWidth);
  #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @col);
}

//styles.less
.greetings {
  .col(3);
}

lessc will generate the following in styles.css

//styles.css
.greetings {
  float: left;
  margin-left: 20px;
  width: 220px;
}

Tweaking Bootstrap 2.0 for Semantic Markup

ok in less, this is how I figured it out. Its the best I could do, and I couldn't figure out how to deal with .row semantically, but oh well.

Basically I created a custom-mixins.less and created a mixin called .col and the variable is @col. So when you write your selector and do something like .col(3); .col(4); .col(5); or something like that. It should create the proper width. I don't know how this would work for nested columns.

//custom-mixins.less
.col (@col) {
  #gridSystem > .gridColumn(@gridGutterWidth);
  #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @col);
}

//styles.less
.greetings {
  .col(3);
}

lessc will generate the following in styles.css

//styles.css
.greetings {
  float: left;
  margin-left: 20px;
  width: 220px;
}

Semantic Grid with Bootstrap + LESS Mixins ¿ HOW?

In navbar.less of bootstrap you will find the following.

grid and .core are used to namespace the .span()

.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
#grid > .core > .span(@gridColumns);
}

In cases where you want to keep "span3" etc out of your html you could very well do something similar to:

header {
   #grid > .core .span(12)
}

article.right {
   #grid > .core .span(6)
}

aside.right {
   #grid > .core .span(6)
}

footer {
   #grid > .core .span(12)
}

(12) and (6) are the number of columns you'd like your header element to span. This is of course replacing

<header class="span12"></header>
<article class="span6"></article>
<aside class="span6"></aside>
<footer class="span12"></footer>

Way to import small parts of semantic ui?

Just simply include .css file and .js (if it's available) file of the specific component. Here is an example with a CDN:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/components/sticky.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/components/sticky.js" ></script>

You can find all the components in dist/components/ folder, for more information about semantic-ui installation see Semantic-UI on GitHub

How to make a Responsive (Row Fluid) Mixin for Bootstrap

This worked for me.. posting in case it helps anyone else.

Mixins for semantic fluid grid:

.makeFluidRow(){
    width: 100%;
    .clearfix();
}

.makeFluidCol(@span:1,@offset:0){
    float: left;
    #grid > .fluid .span(@span);
    #grid > .fluid .offset(@offset);
    &:first-child {
        margin-left: 0;
        .offsetFirstChild(@offset);
    }
}

Use them just like the non-fluid mixins:

.article {
    .makeFluidRow();
    .main-section {
        .makeFluidCol(10); //Spans 10 cols
    }
    .aside {
        .makeFluidCol(1,1); //offset by one, spans 1
    }
}

How to use twitter bootstrap with bootstrap-sass in rails app?

It's your use of @extend, or rather, Sass' inability to deal with wildcard class matching, which is rather unsurprising, since it gets rather complex.

Bootstrap uses a number of what I might refer to as 'nonstandard' methods to address some classes. You've mentioned one of those in your post above - [class*="span"].

Naturally, when you use @extend x, Sass is extending the x class. Unfortunately, it (currently) has no way of knowing that a wildcard matcher also affects the output of the class. So yes, in an ideal world, [class*="span"] would also be extended to define [class*="span"], .user-filter, but Sass can't currently do that.

While extending .row-fluid is enough to include the rules nested underneath it wrt. the span classes, as per above, it won't adjust the wildcards for extended spans.

bootstrap-sass already had a mixin for fixed width columns/rows, makeRow() and makeColumn(). I've just pushed a makeFluidColumn() mixin, that, well, makes a fluid span. Your code would then become:

.user-container {
  @extend .row-fluid;
}

.user-filter {
  @include makeFluidColumn(2);
}

.user-list {
  @include makeFluidColumn(10);
}

Unfortunately (as per usual) it's not quite so simple. Bootstrap uses this snippet to reset the margin on the first spanx class that is a child of the row.

> [class*="span"]:first-child {
  margin-left: 0;
}

However, we cannot redefine this for each call of makeFluidColumn, and so we must manually set no margin-left on any element that will be the first child of a fluid row. It's also worth noting that mixing spanx classes and makeFluidColumn classes will cause the first spanx class to have its margin reset, regardless of whether it's actually the first column in the row.

Your code would therefore be

.user-container {
  @extend .row-fluid;
}

.user-filter {
  @include makeFluidColumn(2);
  margin-left: 0; // reset margin for first-child
}

.user-list {
  @include makeFluidColumn(10);
}

It's not a particularly pretty solution, but it works, and is all to do with how Bootstrap uses wildcard class matching, as you gathered in your question update. I've only just pushed this to the 2.0.2 branch, so you'll have to use Bundler with Git to install it, but I'm hoping for a release in the next couple of days.

---

Related Topics