1

I want to understand how the workflow for responsive webdesign using Boostrap as a framework works. I am especially not sure how to convert my design from Sketch 3 to CSS (Bootstrap).

Tools/Framework: Sketch 3, Bootsrap
Goal: Fully responsive webdesign

My current understanding:

  1. Create 4 different versions of your website in Sketch 3 by using 4 different layouts

    • Dekstop HD
    • Desktop
    • Tablet
    • Phone

  2. Bootstrap + CSS + HTML

    • Analyse all sections (Header, Body, Footer, Sidebars,...) and determine the amount of columns needed for xs, s, md, lg columns
    • Build the basic structure of the website using all 4 different grid sizes (xs,s,md and lg)

What exactly do I export from Sketch3?
Do I export only buttons and build the rest using CSS...?
Do I export all buttons from all 4 different layouts?

I want to make sure that it's fully responsive and easly maintainable.

Theo
  • 45
  • 7

1 Answers1

0

It really depends on how the design looks. Most of the time you can re-create the entire page (with the exception of things like logos, backgrounds and anything else that is too stylized to be rebuild) entirely out of CSS. Without seeing the actual design it's hard to give any real advice on how to approach it.

For Bootstrap you'll need to divide your page into rows and columns. There are 12 columns within each row. The nice part about Bootstrap is that if you do this correctly it does most of the responsive stuff for you.

Once you're done scaffolding your page you'll need to setup your pages styles and then work out any responsive kinks using media queries.

There's a tonne of resources online but I'd suggest starting with the official Bootstrap documentation and the tutorial by W3 Schools. I've posted the link to both below.

http://getbootstrap.com/css/

http://www.w3schools.com/bootstrap/default.asp

Hopefully you find this at least somewhat helpful. Good luck!

James Ives
  • 3,177
  • 3
  • 30
  • 63