Flavorstrap npm package, in-depth Documentation

There is three ways stylesheet libraries can be modified, excluding the idea of outside styling (themes). The first is through variables which limited to basic styles such as sizes, colors and other global variables. The second is extending existing css classes for example a “panel” has default, danger, warning, primary, info, and success. One could easily add a extended class called “panel-super” and continue development as any other panel variety. The last is a total rewrite of a bootstrap class, which can be avoided with flavorstrap.


Advantages/Support and reasons why!?
Get any version of bootstrap you want, break it down to any level you want and without impacting it for long term maintainability!


Workflow:


  • Create Sass/Less
  • Build Sass/Less + bootstrap’s Less/Sass
  • Remove Dups and merge styles
  • Add prefixes
  • See your results!


Problems I faced:
    For a lot of sass or css optimization solutions rudy is a constant deal breaker which meant looking around for alternatives based off their rudy libraries. The second was using less for overriding variable and injecting them, less wouldn't have it.


SPECIAL CASE FOR THIRD APPROACH
A question was asked during development from a co-worker whether redefining the panel class would it be over rewritten completely or simple would it be added to styles that were not included in the new declaration? The answer is it can be both based on how you include it. The picture below shows a complete override but if you add the variables before the bootstrap's sass it will simply added them.


Proof of the third example working:

take note of the dups!

final results!
now without dups!

Popular posts from this blog

Installing Windows on Acer chromebook 15 cb3-532

Entity Framework: ToListAynsc & WhereAsync

CSharp Cheatsheet