Dribbble.js overriding Twitter Bootstrap CSS

Question

I'm trying to add dribbble shots a website that uses bootstrap. When I add the ID to the list element, the element loses all of it's styling.

I'm using dribbble.js found here: https://github.com/tmdvs/Dribbble.js

My JS is:

<script src="scripts/dribbble.js" type="text/javascript"></script>
<script type="text/javascript">
    getShotsForID('tim', 'shots', 15);
</script>

The HTML:

<div class="row-fluid">
    <ul class="thumbnails">
        <li  class="span3" id='shots'></li>
     </ul>
</div>

Normally the HTML would be:

<div class="row-fluid">
    <ul class="thumbnails">
        <li class="span3">
            <img src="images.png" class="img-polaroid" image alt="image" />
        </li>
        <li class="span3">
            <img src="images.png" class="img-polaroid" image alt="image" />
        </li>
        <li class="span3">
            <img src="images.png" class="img-polaroid" image alt="image" />
        </li>
        <li class="span3">
            <img src="images.png" class="img-polaroid" image alt="image" />
        </li>
    </ul>
</div>

Answer 1

if you check here, https://github.com/tmdvs/Dribbble.js/blob/master/style.css ,

you will see that the css is id based and will indeed overwrite a lot of the css from bootstrap, since #ids have a much higher specificity value than .classes

i would refactor the css provided by dribblejs and remove any unnecessary styling