Combining Bootstrap and Font-Awesome without Overlap

    For sometime I've wanted to merge these two libraries together without creating too much work for myself and reduce as much overlap as possible. I have completely moved toward the sass side for my development. I've come up with three approaches but I think the best one is the third one and it little more work than I would like.

First Approaches
Using an regular expression in node to remove whatever classes and component. This would be great for multiple projects and helpful reducing css on features not in my bootstrap projects. I'll keep this short because I plan to go more in depth for another project.

Second Approaches
Before I had my npm project I was trying to use grunt-uncss in by looking at the document pages from the source and simply removing the components and icons I didn't want! This would only work with the finally solution of the css and I found a few bugs with media queries.

Third Approaches
Using an approach like the one in my npm package flavorstrap and writing out the sass files needed for the icons. Replacing them by hand in line where the bootstrap has them placed with the font-awesome one does the trick. The following is a grunt file and the root sass file needed for my npm package. Note that this solution is used in my github project modern-strap. Which saves about 12kbs of space!

@import "override";

// Instead of this...
//@import "bootstrap";

// Core variables and mixins
@import "bootstrap/variables";
@import "bootstrap/mixins";

// Reset and dependencies
@import "bootstrap/normalize";
@import "bootstrap/print";
//@import "node_modules/bootstrap-sass/assets/stylesheets/glyphicons";
@import "font-awesome/scss/font-awesome";
//etc... 

Popular posts from this blog

Aspetcore: NLog with Postgresql

Mongodb Cheatsheet

Installing Windows on Acer chromebook 15 cb3-532