I migrated the CSS Framework from Bootstrap to Pure

By Jean Hertel, 16/03/2017, in category Tips

Blog, Bootstrap, CSS, Pure

Maybe you did not notice, but I migrated the entire site from Bootstrap to Pure.

My main motivation for this was the use of components, which in my case was limited to basically menus and grids. By using Pure I was able to reduce the overall CSS size of the site by more than 100KB. I also removed the library GlyphIcons, which I had already replaced with Awesome Font but could not remove because of the references that were in the css.

If you also want to migrate from Bootstrap to Pure, the grid components are very simple.

You can replace a code like this:

<div class="row">
    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3"></div>
</div>

For this:

<div class="pure-g">
    <div class="pure-u-1-1 pure-u-sm-6-24 pure-u-md-6-24 pure-u-lg-6-24"></div>
</div>

Pure is really very simple, and this is very good for a simple blog like mine.

In addition to these improvements, I also had the opportunity to simplify some parts of the site by removing various HTML elements that were there to position others. To finish I also changed the header image of the blog, to give a better contrast to the title.

The site should load slightly faster from now on.