Join Joseph Lowery for an in-depth discussion in this video Creating a new fluid grid layout, part of Dreamweaver CC: Responsive Design.
- In chapter one, we got a good overview of responsive web design, and you probably got an idea of how complex it is. Dreamweaver Creative Cloud has tackled that complexity head-on with the Fluid Grid Layout feature. In this lesson, I'll introduce you to its various components and cover the basic steps of working with the system. Now, the Dreamweaver team wanted to make sure there's no discovery issue with the Fluid Grid feature, so you can gain entry to it in a couple of ways. If you've got the welcome screen open, like I do, you can click on the Fluid Grid icon right there, or you can go up to file new, and from the new document dialog, choose Fluid Grid Layout.
Regardless of which path you take, you'll end up in the same place, the Fluid Grid Layout section of the new document dialog box. Here you'll find representative images of the three main screen sizes for mobile, tablet, and desktop. When you first open the dialog, each screen type has a preset number of columns, four, eight, and 12, respectively. Now, you can easily change those values. For example, if you wanted to increase the number of layout possibilities, you could change the desktop value from 12 to 16.
Personally, I think it's best to choose a number that can be evenly divided either by 1/2, 1/3, or 1/4. So, I'm going to revert that and stick with 12. Now, you can also change the gutter width. That's this value, below the mobile screen. To keep the layouts fluid, the gutter width is calculated as a percentage of the column width. The default value is 25 percent, which to my eyes is pretty generous, and I typically go to a lower value.
So, I'm going to change this to 15 percent. Now, the final values you see under each screen, 91 percent, 93 percent, and 90 percent, are the percentages of the screen used by the entire layout width. Again, you can change these values to anything you'd like. I suggest you keep the mobile and tablet percentages fairly high, depending on the design, of course. You might even want to go to 100 percent at some point and a lower percentage for the desktop. I am, however, going to keep them at their default settings for now.
Any values you change are remembered and presented the next time you create a new Fluid Grid Layout. Like any other HTML file created in the new document dialog box, you have control over your doc type, however, it would be a mistake to switch to anything other than HTML5 at this point in time, unless you have a legacy mandate that you have to uphold. As you can see in the lower right, you can also attach one or more external style sheets. I'm good, so I'm going to go ahead and click create, and when you do so, you're presented with a save file dialog box.
If you don't look carefully, you might think that it's asking you to save your HTML file, but it's not. It wants to know where you want to save the CSS file that Dreamweaver is going to create. I recommend that you name this CSS file something to make it clear what it is, like fluid-grid.css. I'm going to save mine in a new folder that I'll call styles. After you've saved the CSS file, you get to see the Fluid Grids in all their glory. Let me just go ahead and hit live here, so you can see just the representation of it.
Now, before you go any further, I recommend that you save your HTML file to complete the setup. I'll choose file save, and I'm going to call this profile.htm and save it in my site root. When you click save, Dreamweaver will alert you that a couple of dependent files, boilerplate.css and respond.min.js will be copied to your site and placed in the site root. Click okay to proceed. Now, that's not typically the way that I structure my site.
All right, that's more the way that I like to structure my site. You may be different. Now, let me show you a little bit about each of those two files. Boilerplate.css is part of an initiative called HTML5 boilerplate that attempts to level the playing field across browsers and give web designers a solid platform on which to build their sites. Dreamweaver has not only adapted their core CSS, albeit slightly modified, they've also incorporated the recommended conditional comments for handling older versions of Internet Explorer, as you can see at the top of the source file.
As you can tell, there's a great deal going on underneath the hood for the Fluid Grid Layout feature. Now, that you've got a thorough indoctrination to it, and our initial Fluid Grid page has been created, you're ready to begin building out your responsive layout.
- Structuring fluid grids
- Adding a new fluid grid layout
- Adding building-block div tags
- Inserting content into a fluid grid
- Modifying the number of grid columns
- Building media queries from scratch
- Working with additional media queries
- Handling orientation changes
- Manipulating CSS
- Adding new media