Solved

960 and DW

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

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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

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 52

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 52

Accepted Solution

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

895 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

12 Experts available now in Live!

Get 1:1 Help Now