Hi Manish, If you want a responsive website then Bootstrap is the framework you want to use, if you're going to customize the container width then choose one and generate a custom bootstrap CSS, everything else will be automatically calculated, you don't have to worry about that... but, of course you'll find that in some cases the framework is to generic and you'll have to write your own CSS classes to overwrite the existing ones and that depends on the project I can't give you the right path to a finished project, there are always many ways of doing things and you learn by trying and doing wrong things.
If I can help you with anything else please let me know. Cheers, Raul. On Mon, Jun 3, 2013 at 10:35 PM, Manish Baranwal <[email protected]>wrote: > Thanks for the help Raul. Lets take an example.. Here is the URL of site > http://hermesservicesgroup.com/restaurant-campaign/. The width of the > content part is 960px. I want to make this a complete responsive design. > How to calculate different spans width, container width, etc.? What are the > steps to make this site responsive? Can you please help me in this? > > > On Sat, Jun 1, 2013 at 3:24 AM, Raul MATEi <[email protected]> wrote: > >> Hi, >> >> You can download a customized version of Bootstrap from >> http://twitter.github.io/bootstrap/customize.html#variables... just fill >> in the values for the columns number (@gridColumns), grid column width >> (@gridColumnWidth) >> which is just for one column and grid gutter width (@gridGutterWidth). >> In the customized version both bootstrap and bootstrap responsive are >> included, so if you don't need the responsiveness in your layout it will be >> better if you use the LESS library and overwrite the Bootstrap >> @gridColumnWidth, @gridGutterWidth (variables.less). If you choose to go to >> the second option, go to http://github.com/twitter/bootstrap and >> download as a ZIP and unzip it somewhere on your hard drive. Install >> WinLess and compile bootstrap.less. I can compile them for you, just let me >> know what you need... it is a 5 minutes job >> >> Cheers! >> >> >> >> >> >> >> On Sat, Jun 1, 2013 at 12:33 AM, Manish Baranwal < >> [email protected]> wrote: >> >>> Thanks for the quick response Raul. As I'm new to Bootstrap can you >>> please tell me which css and js files to include in my HTML and after >>> calculating the column width what is the next step? In which file I've to >>> update the width? >>> >>> >>> On Sat, Jun 1, 2013 at 2:56 AM, Raul MATEi <[email protected]> wrote: >>> >>>> Hi, >>>> >>>> You can try this http://gridcalculator.dk/#/1242/12/18/18m I believe >>>> is the closest you can get. >>>> >>>> Raul. >>>> >>>> >>>> >>>> On Sat, Jun 1, 2013 at 12:17 AM, Manish <[email protected]>wrote: >>>> >>>>> Hello Friends, >>>>> >>>>> I've a PSD of width 1242px, Which is a default width of content area. >>>>> Default width of the container in bootstrap is 940px. How to calculate the >>>>> width of the container in bootstrap so that my default width for container >>>>> will be 1242px? >>>>> >>>>> -- >>>>> You received this message because you are subscribed to the Google >>>>> Groups "twitter-bootstrap" group. >>>>> To unsubscribe from this group and stop receiving emails from it, send >>>>> an email to [email protected]. >>>>> >>>>> For more options, visit https://groups.google.com/groups/opt_out. >>>>> >>>>> >>>>> >>>> >>>> -- >>>> You received this message because you are subscribed to a topic in the >>>> Google Groups "twitter-bootstrap" group. >>>> To unsubscribe from this topic, visit >>>> https://groups.google.com/d/topic/twitter-bootstrap/nWOJTidwVWE/unsubscribe?hl=en >>>> . >>>> To unsubscribe from this group and all its topics, send an email to >>>> [email protected]. >>>> >>>> For more options, visit https://groups.google.com/groups/opt_out. >>>> >>>> >>>> >>> >>> >>> >>> -- >>> Thanks and Regards >>> Manish Baranwal >>> +91-9646002314 >>> >>> -- >>> You received this message because you are subscribed to the Google >>> Groups "twitter-bootstrap" group. >>> To unsubscribe from this group and stop receiving emails from it, send >>> an email to [email protected]. >>> For more options, visit https://groups.google.com/groups/opt_out. >>> >>> >>> >> >> -- >> You received this message because you are subscribed to a topic in the >> Google Groups "twitter-bootstrap" group. >> To unsubscribe from this topic, visit >> https://groups.google.com/d/topic/twitter-bootstrap/nWOJTidwVWE/unsubscribe?hl=en >> . >> To unsubscribe from this group and all its topics, send an email to >> [email protected]. >> For more options, visit https://groups.google.com/groups/opt_out. >> >> >> > > > > -- > Thanks and Regards > Manish Baranwal > +91-9646002314 > > -- > You received this message because you are subscribed to the Google Groups > "twitter-bootstrap" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to [email protected]. > For more options, visit https://groups.google.com/groups/opt_out. > > > -- You received this message because you are subscribed to the Google Groups "twitter-bootstrap" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. For more options, visit https://groups.google.com/groups/opt_out.
