Web Teacher

I’ve learned a few things about how the Dreamweaver CC layout grid system works after making about 30 different layouts with it and struggling to figure out its bugs.

One helpful thing is to take a look at the stylesheet that Dreamweaver generates after you’ve told it how many columns you want in the various sizes. This is before you’ve entered any content of your own or added any CSS rules of your own.

Read through it and notice the order of the rules and media queries.

@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height
  and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	15;

	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	and Golden Grid System by Joni Korpi
	
Home

*/

.fluid {
	clear: both;
	margin-left: 0;
	width: 100%;
	float: left;
	display: block;
}

.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;        
}

/* Mobile Layout: 480px and below. */

.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 96.7391%;
	padding-left: 1.6304%;
	padding-right: 1.6304%;
	clear: none;
	float: none;
}
#div1 {
}
.zeroMargin_mobile {
    margin-left: 0;
}
.hide_mobile {
    display: none;
}

/* Tablet Layout: 481px to 768px. Inherits styles
 from: Mobile Layout. */

@media only screen and (min-width: 481px) {

.gridContainer {
	width: 91.4836%;
	padding-left: 0.7581%;
	padding-right: 0.7581%;
	clear: none;
	float: none;
	margin-left: auto;
}
#div1 {
}
.zeroMargin_tablet {
    margin-left: 0;
}
.hide_tablet {
    display: none;
}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles
 from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {

.gridContainer {
	width: 89.0217%;
	max-width: 1232px;
	padding-left: 0.4891%;
	padding-right: 0.4891%;
	margin: auto;
	clear: none;
	float: none;
	margin-left: auto;
}
#div1 {
}
.zeroMargin_desktop {
    margin-left: 0;
}
.hide_desktop {
    display: none;
}
}

The styles all flow from the 480 px and below layout rules. Dreamweaver expects you to begin adapting the style rules and adding your content in the mobile layout. Nothing explains that to you, but when the grid you set up in the File > New dialog opens in the Design View, it opens on the mobile view. Notice the size selector at the bottom of the document window, and the 4 column grid in the background.

Is opening up in the mobile view too subtle a clue? Shouldn’t there be some text somewhere, about starting with the mobile layout?

Once you have the mobile layout done, you are expected to move to the tablet size layout and adjust the fluid grid accordingly.

Finally, you can make any adjustments to the fluid grid for a desktop layout.

Additionally, when the initial grid layout opens in Design View, it contains a div (with the id div1) which you are expect to delete. There’s nothing to alert you to the fact that you should delete this placeholder div and replace it with a header element or whatever you want to add first to your page.

Since Adobe has so few tutorials that illustrate the proper use of the grid layout system, much of what you need to know to figure out the new layout system comes by way of trial and error. I hope my trial and error stumbling and learning experiences can help you get off to a smoother start.