How to customize Twitter Bootstrap from Illustrator design

Tags: css,html5,twitter-bootstrap,design,adobe-illustrator

Problem :

I'm working on a new web app and I'd like to create my GUI mockups in Illustrator then implement them in HTML5 and CSS3 using Twitter Bootstrap. I know how to use the CSS classes to create my pages but I'd like to know the process of customizing Twitter Bootstrap to match my mockups as much as possible. I'm talking about colors, typography, margins, padding, borders, button styles and so on. I'd like to create completely different themes for this and every future project I'll be working on.

I'm a programmer but I love GUI design too so I'd like to know how professional designers make all the pieces fit in.

Thanks in advance.

Solution :

In order to get the most out of Bootstrap (especially the new "mobile first" features) I recommend using your Illustrator file as a jumping off point, rather than a spec.

I agree with the other commenter who suggested leaving the Bootstrap file in place and writing a second file with selective overrides. This is much easier with Bootstrap 3 since the flat design means less to clobber with your own declarations.

I always start with laying out a static version of the pages using plain Bootstrap then methodically cherry picking styles using the inspector (e.g. body backgrounds, typography, colors) in priority order as they stand out to me visually. I usually wind up with something that is close, but slightly different (often better), than the original design.

Good luck! If you don't fight it too hard, Bootstrap offers a lot out of the box.

    CSS Howto..

    background-image: url(“images/plaid.jpg”) no-repeat; wont show up

    How to increase spacing between dt tags

    How do I change the css overflow property of the HTML with javascript

    How to construct CSS selector targeting attribute with value containing an ASCII line feed?

    How to make my phone number bold using css [closed]

    How to create text block on image using just CSS

    How do I properly inspect jquery and javascript using web developer tools?

    How to arrange two html buttons horizontally in a single line with equal width by completely fills the screen size

    How to get Owl Carousel Owl-Page (dots) Responsive

    Show a
  • line like is hovered
  • How to solve this HTML/CSS bug? [closed]

    How do I focus image from the center (CSS focus)?

    How to convert css margin value to pixels with just plain javascript?

    How to build HTML email using CSS?

    How to resize dynamic images coming from database in a responsive bootstrap website

    How to create an HTML CSS Page with Header, Footer and Content

    How to debug CSS with Firebug for an element that only appears when clicked?

    How to style five rows with alternating fixed/variable width?

    TYPO3: how to add an element to the RTE, which allows the user to use a defined CSS class

    How to make all divs same height, based on text content?

    How to Reset CSS after Media Query?

    How can I override an inline style with an external css?

    (CSS) How to position the Div near to the bottom right corner of the browser Relatively to the Browser Size? [closed]

    Google Share button not showing properly if originaly hidden

    How to turn off spell checking WebStorm of css?

    How to make an element remain inline

    How to change default value in counter-increment?

    UI Challenge - how to draw “connectors” between elements?

    How to get rid of an automatically generated span via CSS (un-display)?

    How to target last 3 elements in a container using CSS :nth-last-child(n)?