Ok this is an excellent question. The way I do it is by first converting stuff to semantic names. If it's a somewhat serious project I'm likely to have done tha

Ok this is an excellent question. The way I do it is by first converting stuff to semantic names. If it's a somewhat serious project I'm likely to have done that from very early on. I use a method similar to https://www.sitepoint.com/sass-semantically-extend-bootstrap/ https://www.sitepoint.com/sass-semantically-extend-bootstrap... to do this. Later, I start converting this stuff to be what I actually want in either a custom CSS or by integrating some other framework. Note though. I explicitly mentioned this is for my little dashboards and apps. When I start this process, pages will look broken from time to time and there might be pages that look Frankensteined. I've never done this on a serious app although I want to do that for one client I'm consulting for. Since I wrote all the code myself, here's my speculation on how I'll do it. Since I have a fairly structured way of arranging my divs and my forms, I'm going to hack together a parser using beautifulsoup/htmlparser to get the bootstrap stuff out and convert those to semantic names. So it'll be something that goes through a file, and then tells me it found a div.row here (show me the surrounding lines to get me an idea of where it is) and then ask me to input the semantic name. It'll spew out the sass files I want and change the jinja templates. From there I'm going to attempt to plug in material just because I like it so much :D