Replacing Bootstrap With Basscss

#basscss #bootstrap #css

Twitter’s Bootstrap is undoubtedly the front-runner when it comes to open source frameworks. For my personal projects, I often find that I use only a small subset of the classes provided by Bootstrap. It’s possible to omit the sections you don’t need, but I wanted a simpler solution: Basscss. Basscss’ strength is in its ease of use and utility css selectors, not its out of the box looks.

For this post, I’ll be using examples from Basscss 8 beta5 and Bootstrap 3.3.6.

Bootstrap

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
</nav>

Basscss

<nav class="clearfix" id="navbar">
  <div class="sm-col py2"> 
    <a href="/">Brand</a>
  </div>
  <div class="sm-col-right py2">
    <a href="#" class="px1">Link</a>
  </div>
</nav>

Grid

Bootstrap

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-9">Column 1</div>
    <div class="col-xs-3">Column 2</div>
  </div>
</div>

Basscss

<div class="clearfix">
  <div class="col col-9">Column 1</div>
  <div class="col col-3">Column 2</div>
</div>

Bootstrap

Basscss