Twitter Bootstrap Question posted in

Twitter bootstrap – CSS class "macro"

I am a web front-end developer (newbie).

Hypothetically, if I am writing code for a web page using Twitter Bootstrap and want a responsive sidebar, I can do something like this:

<div class="col-xs-12 col-md-3">...</div>

Let’s say, in the interest of separation of concerns, I would like the design people to decide how many columns wide the sidebar should be on each screen width.

Wouldn’t it be better to do something like this:

<div class="sidebar">...</div>

and have the designer do something like this:

sidebar = col-xs-12 col-md-3

somewhere in the CSS?

Is this possible? Are there tools that will allow this? Am I way off base?

Tags:

3

Answers


  1. 0

    This is possible, with some help from a CSS preprocessor like the following:

    • Sass
      • .sidebar {
        @extends .col-xs-12;
        @extends .col-md-3;
        }
    • Less
      • .sidebar {
        &:extend(.col-xs-12);
        &:extend(.col-md-3);
        }

    Hope this helps!

    Login or Signup to reply.
  2. 0

    You propose instead of determining it in the html with a class on div like this:

    <div class="col-xs-12 col-md-3">...</div>

    determine it in the css with something like this:

    .sidebar {
  width: 100%;
  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
    width: 50%;
  }
  @media (min-width: $screen-md-min) {
    width: 33%;
  }
}

    In any case you have to edit something: either html file or css file. Consider your project, to know which one is easier.

    I would suggest to put columns into the html (it would be kind of default case)

    <div class="sidebar col-xs-12 col-md-3">...</div>

    and then, if needed, override it for specific pages in css with something like this:

    .page-order .sidebar {
     width: 33%;
}
    Login or Signup to reply.
  3. 0

    You should use a preprocesor to compile your CSS, and create semantic class from unit classes.

    For example in Sass:

    .sidebar {
    @extends .col-xs-12;
    @extends .col-md-3;
}

    You can download Bootstrap in Sass on the offical website.

    You can read the article “Using Sass To Semantically @extend Bootstrap”, it can help you achieve what you want.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search