• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 332
  • Last Modified:

960 and DW

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
jagguy
Asked:
jagguy
  • 4
  • 3
1 Solution
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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
 
jagguyAuthor Commented:
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
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

 
jagguyAuthor Commented:
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
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Remember, it is not a "dreaweaver" thing.  Just add the 960.gs files like any other css or js files.
0
 
jagguyAuthor Commented:
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
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now