How to convert 960.gs website into HTML using Bootstrap 3

Question

I have created the photoshop mockup using 960.gs (960 Grid system). The website container width is 960px - center aligned. The site need to be responsive.

What should i do, to convert the website into HTMl using Bootstrap 3? Do i need to customize bootstrap before downloading it?

Answer 1

1) Get your current 960 configs (col number, gutters and offsets and col width).

2) build custom bootstrap set. You need to update Media queries breakpoints, Grid system and Container sizes sections with 960 configs (@grid-columns, @grid-gutter-width, and @screen-* fields).

3) Update responsive rules (@screen-* fields), according to your requires

4) Include all css files from downloaded build to your page

5) Mock up your page according to grid guide

Answer 2

The answers before me work pretty well, but I'll throw another in: Get over wanting whatever you are building to be pixel perfect to what you have mocked up.

Assuming you are using the 12 column layout in 960.gs, then you are golden, because Bootstrap 3 uses a 12 column layout. Are the columns and gutters the same width as 960? Probably not. But I can guarantee that the screen your users are going to use to look at the website is not going to match whatever setting you have going on in Photoshop, either.

Not to mention the fact that once you (or your users) begin generating content, your perfectly crafted content boxes with the perfect number of characters will start stretching and shrinking in more ways than you can think of.

So you shouldn't worry if 960.gs can equal Bootstrap, because the real world isn't going to match Photoshop. Download Bootstrap, start coding your website, and be flexible about it not being pixel perfect to your current vision, because it never was going to in the first place.

Answer 3

How about just adding an external div having an id frame?

<div id="frame">
<!-- Your Other Structure -->
</div>

then in CSS do this,

body, html {
    height: 100%;
    width: 100%;
    min-width: 960px;
}

#frame {
    width: 960px;
    min-width: 960px;
    max-width: 960px;
    margin: 0 auto;
    height: 100%;
}

Answer 4

Not really sure what you're trying to achieve here, like what @dougajmcdonald said your question is not specific enough.

Alas, I'm bored with work so I'm going to shoot some answers here.

I googled 960.gs and its basically a grid system. So if you're asking if your photoshop mockup can also be done using Bootstrap 3, then Yes you can.

Bootstrap also has it's own Grid system. The closest to your 960px is bootstrap's col-md-* grid class. It handles those up to 990px width and is broken down into 12 columns as well.

As for customization, it depends on what you need from your design.

Answer 5

Yes, you will need to customize bootstrap before downloading. Specifically, you'll want to customize the grid-columns and grid-gutter-width in grid-system (to your specs) and the total width at container-desktop in container-sizes.

Answer 6

You don't need to do anything, since you're taking your psd mockup and starting to code it. Like what Sean said, assuming that you used the 12 column grid in photoshop, using Bootstrap 3 should not be a problem. If you have sections in your psd that takes up 3 columns, this just translates to:

<div class="col-md-3"> ... </div>

md for desktop screen sizes. If you designed your mobile mock up also, you would use:

<div class="col-xs-12 col-md-3">...</div>

... assuming that this section is going to take up the full width in mobile...