CODEWITHSUNDEEP
twitter-bootstrap
Zak
Zak

Reputation: 25205

Converting to bootstrap for existing web app

I've been looking into converting an existing web application that uses custom designed css with no style guide into using bootstrap. The web app uses a templating system that let me easily create a prototype template that used bootstrap. However, many of the pages of the site break/ have css conflicts when using the bootstrap template. For anyone out there who has successfully implemented bootstrap into your apps, how did you do it?

I would like to slowly integrate the bootstrap template into the site over the period of a few months with incremental integration and deployment. Is this reasonable or have you found it requires an "all or nothing" approach?

Thanks!

Upvotes: 5

Views: 5475

Answers (2)

icc97
icc97

Reputation: 12793

I use a Twitter Bootstrap base with local overrides.

I use a Customised LESS implementation of Bootstrap 3, following this Smashing Magazine article to match the existing styles as well as possible. This allows for easy upgrading of Bootstrap whilst keeping your customisations. So I've got all the base font-size and border-radius etc. matching.

I keep my old stylesheet that still overrides everything to match the old site as perfectly as possible resovling conflicts as I go.

The biggest issue is making sure the grid matches.

Over time I remove sections of the old stylesheet and just leave the customised Bootstrap.

Upvotes: 0

Kristian
Kristian

Reputation: 21810

Twitter bootstrapping an existing site requires you do the following:

  1. change the HTML to be structured the way bootstrap's css needs it to be
  2. add the bootstrap CSS file (and JS file too)
  3. remove most of your custom CSS (leaving only very specific CSS definitions)

it does not require an all-or-nothing approach if you are good at manipulating the boostrap to look like your old design, otherwise, yes, you should do most of it before releasing it into production.

Upvotes: 3

Related Questions