

Decouple Bootstrap from your html - jmadsen
https://gist.github.com/jrmadsen67/605c29e17822e53ebf94

======
madeofpalk
Take a look at the Bootstrap LESS[1] source and see how they do it. Want an
orange HN button?

    
    
        @brand-hn: #FC6621;
        .btn-hn {
          .button-variant(black; @brand-hn; darken(@brand-hn, 5%));
        }
    
        <button class="btn btn-hn">Hacker News</button>
    

Nearly every component of Bootstrap is made via these 'generator' mixins,
including the grid (which is less than 40 lines of actual code)[2]

Just don't be tempted to extend the 'base' classes. If you do something like
this:

    
    
        .hacker-button {
          .btn;
          .button-variant(...);
        }
    
        <button class="hacker-button"></button>
    

You might find it not working properly with things like the input or button
groups, for example.

[1]:
[https://github.com/twbs/bootstrap/blob/master/less/](https://github.com/twbs/bootstrap/blob/master/less/)
[2]:
[https://github.com/twbs/bootstrap/blob/master/less/grid.less](https://github.com/twbs/bootstrap/blob/master/less/grid.less)

------
jmadsen
just an idea I'm playing with - I'm mostly back-end stuff, so interested in
thoughts & opinions

