Solved

960 and DW

Posted on 2013-05-11
7
261 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 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
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
Comment Utility
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 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:jagguy
Comment Utility
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 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
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
Comment Utility
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 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
Comment Utility
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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

744 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now