3

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?

Yuvaraj P
  • 2,067
  • 3
  • 15
  • 12

6 Answers6

2

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

Evgeniy
  • 2,915
  • 3
  • 21
  • 35
1

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.

Sean Ryan
  • 6,048
  • 2
  • 25
  • 23
  • Oh man, if all designers could read this and accept world could become better)) but on practice... – Evgeniy Jun 26 '14 at 04:24
  • If all designers read and accepted this, half the world's websites would look like stock bootstrap. No thanks. Great to get something off the ground, but tweaking the margins/padding/colour/shadows/hover-states/active-states/href/buttons/**everything!** is what designers do. For good reason. Stick to your guns OP, and and compromise only when you have to! – Shawn Taylor Jun 27 '14 at 04:19
  • 1
    Now hold on there partner. I never said don't customize. You should absolutely customize it to match the branding of the site you are building. If you want to tweak breakpoints and columns, go for it. But my point is to not try and be pixel perfect, which is what I am inferring from the OP. Aside from being an unrealistic goal, pixel perfection can be the cause of huge rifts between designers and engineers. So my original point still stands: The web is not Photoshop, so BE FLEXIBLE. – Sean Ryan Jun 27 '14 at 12:41
  • @SeanRyan fair enough. Flexible is good, to a point. 1-2px out of a screen width is too little to worry about. But if it's a difference between and 1 or 2 pixel border, that single pixel makes a big difference. – Shawn Taylor Jul 01 '14 at 04:44
  • @ShawnTaylor Which is why you really shouldn't be designing/coding for pixel perfection in the first place. Even if someone codes it perfectly to a design comp, it is only going to be pixel perfect on that particular screen, at that particular width, using that particular browser. If a single pixel is going to make a big difference, then you are going to be in trouble the moment someone looks at it in a different browser. Or a different width. Or sizes the text up or down manually. Better to spend that time instead on making sure it works well in all situations, rather than looks good in one. – Sean Ryan Jul 01 '14 at 12:13
  • I think we're in a agreement in principle here...:) – Shawn Taylor Jul 02 '14 at 04:27
1

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%;
}
Tushar Srivastava
  • 11
  • 2
0

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.

Dominic
  • 928
  • 3
  • 9
  • 19
0

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.

Shawn Taylor
  • 15,590
  • 4
  • 32
  • 39
0

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...

Angelo Cordon
  • 35
  • 4