Curious, has anyone on HN been in a situation where an app project has outgrown the usefulness of Twitter Bootstrap? If so, how did you approach removing the styling from your codebase? Just curious if there's tips or tricks that I can recommend to my team as we tackle the issue.<p>Additional context: We're using Bootstrap v2.x and compile our css using the less files.
I removed bootstrap at work (in favor of Bourbon and Neat). For context, I disagree with Bootstrap's framework design decisions, our app had a 3000-line CSS override file, and we wanted to make our two-year-old web app responsive, so we decided to gut Bootstrap entirely. The process took a few months, including a whole redesign process.<p>For an existing app, you can't just remove bootstrap and put in something new. As you probably realize by now, everything will just break.<p>Instead, you need to update individual pages along the way. This process is preferable to removing bootstrap and re-implementing your pages all in one giant pull request since it allows your team to QA iteratively.<p>For us, we redesigned our app, made it responsive, and also used another library in addition to removing Bootstrap. There was a lot more nuance involved, but for example, I started first by redoing the header and footer, then I moved onto individual pages. You can probably just start by re-implementing common mixins and modules first. Then you can move onto the actual templates and start removing your .rows and .span divs page-by-page.<p>I wrote about the process in depth here: <a href="https://medium.com/anyperk-product-engineering/anyperks-responsive-design-overhaul-with-bourbon-and-neat-8fd487bbce03" rel="nofollow">https://medium.com/anyperk-product-engineering/anyperks-resp...</a>
I'm not sure I understand what "outgrown the usefulness" means. Does that mean you have so many custom styles on top of Bootstrap that the underlying framework isn't doing very much? If so, and you're using LESS, then it shouldn't be adding much overhead.<p>Another source of annoyance might be a large number of unused rules. I believe you can just remove the individual LESS files that Bootstrap provides that you don't want. I personally use about 4 of the 10+ LESS files that Bootstrap offers (at least for a vanilla project).
It depends. What parts of Bootstrap are you using for the site? If you're just using the grid system, there are plenty of drop-in replacements that work similarly. If you're using form styling, typography styles and other Bootstrap helper styling, then it gets a little more tricky.<p>Approach it like you would any rewrite, tackle each part of your application as a separate modular component. Do the homepage, then static pages and so on until you have moved every page over from Bootstrap.
Are you using a custom bootstrap.less to only include and compile components that you need?<p>Why haven't you upgraded to bootstrap 3? It could be a bit lighter when you consider the mixins for grids that it provides.