Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

960 and DW

Posted on 2013-05-11
7
Medium Priority
?
316 Views
Last Modified: 2013-05-15
Hi,

To create websites for mobiles phones and tablets as well as desktops I am told I could use a grid system. I can use media queries by hand  but there must be  a quicker way. Now Dreamweaver uses a grid but many people complain about it so what about this 960 grid?

http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=2874025

You cant create a website these days without catering for 3 sizes of display.

Or I could try these tools?
http://mashable.com/2010/12/16/create-mobile-site-tools/
0
Comment
Question by:jagguy
  • 4
  • 3
7 Comments
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39158220
Before using those tools, research how they are used.   If they suck in your content to THEIR site and spoof yours, i would not use it.

You are better off using your media queries.  Take Dreamweaver out of the picture.  It is just an authoring tool and should not dictate what framework you use.  If it does, then making a responsive site is out of your realm for now and it may be easier to just make one site for desktop and one site for mobile.   Otherwise, using media quieres to make a 'responsive' site is the way to go. If you rely on the wysiwyg 'design view' only in dreamweaver, you will want to go through a learning curve of just using the code view to make your site.   Taking off the training wheels is hard at first but in the end, you will be glad you did.  After that nothing will be a "dreamweaver" issue.  Don't listen to the DW haters, it is still a good tool.  Just don't rely on the design view and Dreamweaver plug ins to do what you should know by hand.

http://www.960.gs
http://twitter.github.io/bootstrap
http://foundation.zurb.com
---
http://jquerymobile.com
http://www.sencha.com/products/touch
http://jqtjs.com
0
 

Author Comment

by:jagguy
ID: 39158813
Ok thanks for the information but  I need a little explanation here.
I am using DW with templates only and media queries for different devices sizes.

1)Now with 960 grid I can create desktop,tablet and mobile size for the same website just as easy? 960 grid talks about 12/16 col sizes and I would need 1-2 col for mobiles only so what happens here?

2)If I use jquery mobile then am I making a website just for a mobile and what about desktop?
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39158867
1) it's color by numbers.... If you want 2 columns http://grids.heroku.com/grid?column_width=60&column_amount=12&gutter_width=20   

Where you see the class grid_1, grid_2 etc.  Just make the number = 12.  Here i Have 5 and 7

<div class="grid_5">I am column 1 and 380px wide</div>
<div class="grid_7">I am column 2 and 540px wide</div>

2) Yes, you are making a separate site for mobile.  This means you have to make your main site for desktop.  Your main site might live at www.mysite.com while your mobile site might live at www.mysite.com/m.  You will use a detection script to determine if it is mobile.  

I think you are better off with a responsive site though.  If you like 960, the site suggests to use http://unsemantic.com/
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:jagguy
ID: 39159058
1)Ok how do I get 960 into dreamweaver or dont i have to?


2) I need to make sites for mobiles and tablets when a main website for desktop already exists so maybe  jquery mobile might suit this scenario. Where do I get this detection script?
0
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39159098
Remember, it is not a "dreaweaver" thing.  Just add the 960.gs files like any other css or js files.
0
 

Author Comment

by:jagguy
ID: 39159203
Ok I am looking at http://www.960.gs and I am struggling to get started.
Where is a hello work complete example here.
There is a guide somewhere?
0
 
LVL 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 total points
ID: 39159362
Hello world is below.  Maybe hunt around the site too.  There is a how to https://speakerdeck.com/nathansmith/960-grid-system

<div class="grid_5">Hello</div>
<div class="grid_7">World</div>

<div class=grid_12">
<hr>
In this case, the columns should add up to 12.  
<div>
<div class="grid_12>
    <div class="grid_6">Nest columns inside a full width</div>
    <div class="grid_6">And<br>the<br>div<br>below<br><br>will be<br>directly under<br>this row</div>
</div>
<div class="grid_12">
I am a new row row and evenly below the left and right side above.
</div>

Open in new window


CSS
/*
	Variable Grid System.
	Learn more ~ http://www.spry-soft.com/grids/
	Based on 960 Grid System - http://960.gs/

	Licensed under GPL and MIT.
*/

/*
  Forces backgrounds to span full width,
  even if there is horizontal scrolling.
  Increase this if your layout is wider.

  Note: IE6 works fine without this fix.
*/

body {
  min-width: 960px;
}

/* Containers
----------------------------------------------------------------------------------------------------*/
.container_12 {
	margin-left: auto;
	margin-right: auto;
	width: 960px;
}

/* Grid >> Global
----------------------------------------------------------------------------------------------------*/


.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	display:inline;
	float: left;
	position: relative;
	margin-left: 10px;
	margin-right: 10px;
}



.push_1, .pull_1,
.push_2, .pull_2,
.push_3, .pull_3,
.push_4, .pull_4,
.push_5, .pull_5,
.push_6, .pull_6,
.push_7, .pull_7,
.push_8, .pull_8,
.push_9, .pull_9,
.push_10, .pull_10,
.push_11, .pull_11,
.push_12, .pull_12 {
	position:relative;
}


/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
	margin-left: 0;
}

.omega {
	margin-right: 0;
}

/* Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/


.container_12 .grid_1 {
	width:60px;
}

.container_12 .grid_2 {
	width:140px;
}

.container_12 .grid_3 {
	width:220px;
}

.container_12 .grid_4 {
	width:300px;
}

.container_12 .grid_5 {
	width:380px;
}

.container_12 .grid_6 {
	width:460px;
}

.container_12 .grid_7 {
	width:540px;
}

.container_12 .grid_8 {
	width:620px;
}

.container_12 .grid_9 {
	width:700px;
}

.container_12 .grid_10 {
	width:780px;
}

.container_12 .grid_11 {
	width:860px;
}

.container_12 .grid_12 {
	width:940px;
}




/* Prefix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/


.container_12 .prefix_1 {
	padding-left:80px;
}

.container_12 .prefix_2 {
	padding-left:160px;
}

.container_12 .prefix_3 {
	padding-left:240px;
}

.container_12 .prefix_4 {
	padding-left:320px;
}

.container_12 .prefix_5 {
	padding-left:400px;
}

.container_12 .prefix_6 {
	padding-left:480px;
}

.container_12 .prefix_7 {
	padding-left:560px;
}

.container_12 .prefix_8 {
	padding-left:640px;
}

.container_12 .prefix_9 {
	padding-left:720px;
}

.container_12 .prefix_10 {
	padding-left:800px;
}

.container_12 .prefix_11 {
	padding-left:880px;
}



/* Suffix Extra Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/


.container_12 .suffix_1 {
	padding-right:80px;
}

.container_12 .suffix_2 {
	padding-right:160px;
}

.container_12 .suffix_3 {
	padding-right:240px;
}

.container_12 .suffix_4 {
	padding-right:320px;
}

.container_12 .suffix_5 {
	padding-right:400px;
}

.container_12 .suffix_6 {
	padding-right:480px;
}

.container_12 .suffix_7 {
	padding-right:560px;
}

.container_12 .suffix_8 {
	padding-right:640px;
}

.container_12 .suffix_9 {
	padding-right:720px;
}

.container_12 .suffix_10 {
	padding-right:800px;
}

.container_12 .suffix_11 {
	padding-right:880px;
}



/* Push Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/


.container_12 .push_1 {
	left:80px;
}

.container_12 .push_2 {
	left:160px;
}

.container_12 .push_3 {
	left:240px;
}

.container_12 .push_4 {
	left:320px;
}

.container_12 .push_5 {
	left:400px;
}

.container_12 .push_6 {
	left:480px;
}

.container_12 .push_7 {
	left:560px;
}

.container_12 .push_8 {
	left:640px;
}

.container_12 .push_9 {
	left:720px;
}

.container_12 .push_10 {
	left:800px;
}

.container_12 .push_11 {
	left:880px;
}



/* Pull Space >> 12 Columns
----------------------------------------------------------------------------------------------------*/


.container_12 .pull_1 {
	left:-80px;
}

.container_12 .pull_2 {
	left:-160px;
}

.container_12 .pull_3 {
	left:-240px;
}

.container_12 .pull_4 {
	left:-320px;
}

.container_12 .pull_5 {
	left:-400px;
}

.container_12 .pull_6 {
	left:-480px;
}

.container_12 .pull_7 {
	left:-560px;
}

.container_12 .pull_8 {
	left:-640px;
}

.container_12 .pull_9 {
	left:-720px;
}

.container_12 .pull_10 {
	left:-800px;
}

.container_12 .pull_11 {
	left:-880px;
}




/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clearfix:after {
  clear: both;
}

/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix {
  zoom: 1;
}

Open in new window

0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses
Course of the Month11 days, 16 hours left to enroll

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question