Skip navigation
Currently Being Moderated

Building fluid grid site - what's the best way to add a page?

Aug 13, 2012 8:33 AM

Tags: #dreamweaver #cs6 #fluid_grid_layout

I've got  a one page fluid grid site going and I think I've learned enough to start adding pages. Do I use my primary css file as the file to be associated with subsequent pages? I tried to use a new css in a second page, and perhaps my mistake was that I used some classes and id's from the home page on the second page (which is to be expected as it inherits some of the design). For whatever reason, that led to the second page 'breaking' in a couple of places and I couldn't find the problem.

 

So I deleted it!

 

I'd like to begin again and start adding pages. In the creation stage, right after page definition, where it asks about css and copying over the two files (boilerplate and the js script), should I just use my existing css? When I copied over the two files, I was able to delete them and repoint the new page to the moved files (in a scripts folder and css folder).

 

OR

 

Should I create the page along with new css and just NOT use the same-named classes and id's?

 

Last question, when bringing up code navigator on a design page, are the css pages listed in alphabetical order or by cascade? The new page seemed to have them in alpha order rather than cascade order. They were listed in alpha, despite the fact that they were defined in the page in order of cascade.

 

Thanks all.

 
Replies
  • Currently Being Moderated
    Aug 13, 2012 8:56 AM   in reply to FatBoyAl

    Hi Al -

     

    I generally avoid too many different stylesheets except for example where I might use a separate stylesheet for a Spry menu.

     

    In other words I use the main style sheet on all pages, and add rules as needed.

    Occasionally I will embed a few "one use only" rules in the head of a page.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 13, 2012 10:09 AM   in reply to FatBoyAl

    Hi -

     

    Al, I have zero knowledge of fluid layouts.  My counsel was generic,

    so I suggest you wait for more expert responses.

     

    As you probably know, CSS styles sheets don't write any HTML into your pages,

    so if you copy a styled DIV from one page to another, it will appear the same.

    If the styling of the copied DIV is not suitable to the content on the new page,

    I imagine you would write a newly named CSS rule and change the class or ID

    of the DIV to match.

     

    HTH

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 13, 2012 10:34 AM   in reply to FatBoyAl

    Al, may I suggest, that after you build your test page, that you upload it and its dependent files

    to your webspace and post a link here.

     

    You'll get much faster and more accurate answers that way.

     

    HTH

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 14, 2012 12:41 AM   in reply to FatBoyAl

    I've never used the grid which ships with DW. But I can't understand why its so difficult to add another site page. Surely once you have the first page set up and working just duplicate that?  Seems too simple so I must be missing something here.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 17, 2012 12:12 AM   in reply to FatBoyAl

    Warm thanks to all.  Wish I'd come straight here when tried adding pages using fluid grid layout. Glad it's not just me having difficulties.

    Will try your add and delete duplicate js and css.

    Cheers!

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 2, 2012 8:45 PM   in reply to FatBoyAl

    Just wondering if there's any progress on this front. I can't get even figure out how to add a new page using the fluid grid layout from the initial setup.

     

    If I try to add a new fluid grid layout page, it wants to save the css file -- and asks if I want to over-write the current file.

     

    This seems really nuts to me. There almost no help to be found on Adoboe.com.

     

    @FatBoyAl, any chance you can describe each step you took to creat additional page(s).

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 3, 2012 3:04 AM   in reply to FatBoyAl

    When building a site using a Fluid Grid Layout, the simple way to create subsequent pages is to use File > Save As, and give the file a new name. Then delete the content from the divs.

     

    Alternatively, create a template from the initial page and make each Fluid Grid Layout Div an editable region.

     

    Certainly, the workflow could be improved.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 3, 2012 8:55 AM   in reply to FatBoyAl

    @David_Powers, thanks. I was thinking this might be the way to go. I am moving over to DW from Expression Web and i work exclusively with templates (dwt files) there.

     

    @FatBoyAl, based on my work in Expression Web, I'm not sure why you would need to change any of the default div areas in your template. Seems like you'd probably want the "standard" divs like header, footer, nav, mainContent, aside, for example, and those would be the building blocks for future pages following the same design. I'm not clear on why you'd want to or have to change the names for the FGLDs.

     

    @ALL -- I've read several times now how easy it is to "break" the fluid grid layout in DW CS6 when you modify the style sheet. Can anyone discuss common issues they've had and how they resolved them, and what others should look out for?

     

    After watching some vids of David_Powers (great tutorial btw) and others at Lynda.com, it seems that some recommend not modifying the fluidgrid.css you create to start the process, and David who appears to make many changes in the fluidgrid.css.  Often a third css sheet is created, often called "main.css" but I'm not clear on what rules would go in there other than broad typographical rules.

     

    I still haven't tackled the idea of the boilerplate.css in depth, and there is very little info to be found on that from Adobe. None of the tutorial vids I've seen spend time on really describing what that is and if you want to make any changes to it. And, as it is updated at github, do you just grab the latest version or are there Adobe specific modifications that would break if you did that. I wish I knew where to find those kinds of details, but searching Adobe.com hasn't turned them up thus far.

     

    Lots of question, I know. Any links to where these questions may be already asked and answered would be helpful too.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 3, 2012 9:13 AM   in reply to casey.hill

    Dear Toskey,

     

    If you get close to the point where you understand boilerplate.css you

    will have already reached the conclusion that it is grotesquely

    over-complicated and will be at the point where you will know how to

    make responsive web pages yourself.

     

    Adobe makes a fine web editor called Dreamweaver. The one thing I've

    found over the years is that when Adobe dabbles in CSS and JavaScript it

    tends to do so to make marketable features that tend to start gathering

    cobwebs very quickly and, as in the case of Spry and Timelines, wither

    and die through lack of updating.

     

    Be very careful. Adobe's fluid grid system is something I would avoid. I

    am deeply surprised that some people on this forum, including folks who

    cut their teeth on CSS and standards at PVII, are recommending this.

     

    For what it's worth, my advice would be to learn the essentials of

    responsive design yourself. You will be amazed how easy it is.

     

    --

    Al Sparber - PVII

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 3, 2012 9:45 AM   in reply to casey.hill

    I agree that Fluid Grid CSS should be reserved for the basic layout structure only.

     

    Styles for text, links, borders, shadows, padding, etc...should be applied to content selectors (not grid divs) and maintained in a separate CSS file for easier management.

     

    WHAT CAN GO WRONG?

     

    FluidGrid.css uses double brackets }} between desktop/tablet/mobile layouts.  If double brackets are removed in error, the layout will break.

     

    Div widths in decimals don't translate well to all browsers owing to rounding problems.  You may need to convert to whole numbers either in % or pixels.

     

    I wouldn't mess with boilerplate.css.  It normalizes HTML5 tags & CSS for the various browsers. You can read the documentation below:

    https://github.com/h5bp/html5-boilerplate/blob/master/doc/README.md

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 3, 2012 10:13 AM   in reply to Al Sparber

    Al Sparber wrote:

     

    Be very careful. Adobe's fluid grid system is something I would avoid. I

    am deeply surprised that some people on this forum, including folks who

    cut their teeth on CSS and standards at PVII, are recommending this.

    If that's a reference to me, let me state quite clearly that I don't recommend Dreamweaver's Fluid Grid Layouts. I think they have a lot of promise, but they also have many problems that Adobe failed to address. One of them is the lack of simple workflow to create subsequent pages. I simply came here to offer a couple of suggestions on how people might tackle that problem.

     

    But even bigger problems are the verbose CSS created by the Fluid Grid Layout Divs, and the inability of the CSS Styles panel to identify which media query controls a particular property. Adobe's intention was to make it easy for non-experts to create responsive websites. But, in fact, you need a strong understanding of CSS and media queries to be able to use Dreamweaver's Fluid Grid Layouts. And if you have that level of knowledge, you're unlikely to want to use them apart from creating the initial grid.

     

    My biggest concern is that Fluid Grid Layouts, at least as implemented in Dreamweaver, will simply become yet another feature that's introduced with great fanfare and never get developed to a usable level. The Fluid Grids Layout feature in Dreamweaver CS6 has the feeling of a work in progress. So did Spry when it was first released. And we know what happened after that.

     

    What I would like Adobe to do is to sweep out all the cobwebs of features that have been left to gather dust, and concentrate on providing good solid tools for working with HTML, CSS, JavaScript, and perhaps PHP. But it's not my decision to make.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 3, 2012 10:23 AM   in reply to David_Powers

    Actually that was not a reference to you. You were extremely unique in

    that as a beta tester/technical editor for us years ago, you seemed to

    pick up CSS through your skin pores or something. I really never saw

    anyone grasp things so well, so quickly - except maybe me

     

    My problem is that Adobe should not release features unless and until

    they are in a usable format. The whole issue with responsive design is

    that the concept is in flux. There is no agreement on the best approach

    and anyone who dabbles in it better be prepared to update and correct

    often. This is not an area Adobe should be in as they are equipped and

    manned to develop and engineer complex desktop programs. Developing CSS

    is a different beast and the minute you start basing a solution on

    someone else's code, you have lost the battle.

     

    --

    Al Sparber - PVII

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 3, 2012 10:43 AM   in reply to David_Powers

    Well said, David.

     

    Thanks,

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 3, 2012 11:09 AM   in reply to Al Sparber

    Al Sparber wrote:

     

    You were extremely unique in

    that as a beta tester/technical editor for us years ago, you seemed to

    pick up CSS through your skin pores or something. I really never saw

    anyone grasp things so well, so quickly - except maybe me

    Well, I had a good teacher.

     

    My problem is that Adobe should not release features unless and until

    they are in a usable format.

    I couldn't agree more. I was very reluctant to include Fluid Grid Layouts in my video courses, but they had to be included because they were one of the new features in the program. I showed how to use them, but pointed out their shortcomings.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 3, 2012 11:12 AM   in reply to Nancy O.

    Thanks, Nancy.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 3, 2012 3:50 PM   in reply to David_Powers

    Thanks all for the comments on fluid grid layouts in DW. That about puts a fork in it for me! I've stumbled on some resources on responsive websites and will have to go back and try to make sense of them.

     

    If anyone has some favorite resources/links to check out as far as someone "rolling their own" responsive web design, that would be most helpful.

     

    David, again I very much enjoyed your vid training. I sort of remember that you had some complaints about the new fluid grid layouts, but I do wish you would have found a way to be more emphatic that you do NOT recommend  your video students to go down that road! Your training was very clear & it made me feel like I could tackle fluid grid layouts. If I had not ventured into this discussion, I may have devoted weeks/months/? restructuring my website using what sounds like a very flawed method.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 4, 2012 2:11 AM   in reply to casey.hill

    toskey.stone wrote:

     

    David, again I very much enjoyed your vid training. I sort of remember that you had some complaints about the new fluid grid layouts, but I do wish you would have found a way to be more emphatic that you do NOT recommend  your video students to go down that road! Your training was very clear & it made me feel like I could tackle fluid grid layouts. If I had not ventured into this discussion, I may have devoted weeks/months/? restructuring my website using what sounds like a very flawed method.

     

    I'm glad you found my video training clear. That's the main purpose.

     

    However, I wouldn't categorize Fluid Grid Layouts as a very flawed method. The basic idea is  sound, and the way you can snap Fluid Grid Layout Divs to a grid is well executed. I agree with Nancy that the grid should be used for basic layout structure only. The flaws lie not so much in the technique, but in Adobe's incomplete implementation. As Al says, features shouldn't be released until they're in a usable format.

     

    As for recommending against the use of Fluid Grid Layouts in my videos, with hindsight I might have been more candid about the feature's drawbacks. The difficulty that authors and video trainers face is that we have to write our books and record our videos when the software is still in beta. I literally had one day in which to work out how to use Fluid Grid Layouts before recording. If I had been working with them for several months, I would have been able to assess their usability more accurately.

     

    If I'm commissioned to record video training for the next version of Dreamweaver, and if no improvements have been made to the workflow, my approach will be different. Hopefully, though, Adobe will take on board the criticisms being levelled at Fluid Grid Layouts and will make improvements.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 4, 2012 7:14 AM   in reply to David_Powers

    Well, I'm trying to wrap my head (not to mention my divs) around all this!

     

    We seem to have taken a big turn in this discussion from general bashing of Fluid Grid Layouts to your last comments which suggest that they could be useful. I hope you can indulge me a little more confusion as I try to make the decision on if and how to use them.

     

    If you go through the process of using FGL to create the first page and set up the structure, and then perhaps saved that as a template file, would you say that method is a good one?

     

    Could you carry on only using the fluidgrid.css (or whatever you call it) and add attach your own additional stylesheets? Do you need to keep the boilerplate.css and the js file created at that point? Do they store any info directly related to the structure that is set up by picking the number of columns and other pecentages during FGL setup, or is that all in the fluidgrid.css?

     

    If I wanted a home page that was stylistically different than inner pages, could I use the FGL process again, perhaps save the css as fluidhome.css and have then attach the boilerplate and js file to that as it is all in the same site?

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 4, 2012 7:40 AM   in reply to casey.hill

    The good point about the Fluid Grid Layout is that it creates the basic structure quickly and easily without the need to get out a calculator. The bad points, as I said before, are the verbose CSS, the inability of the CSS Styles panel to identify which media query controls a property, and the clumsy workflow of creating new pages.

     

    If you're prepared to put up with those bad points, you might find the Fluid Grid Layout feature useful. If not, steer clear of them. FWIW, I'm currently involved in a discussion with a couple of other instructors/authors in a private forum. One of them described Dreamweaver's Fluid Grid Layouts as "an experiment gone wrong". Another said: "In their current state, they're not usable."

     

    To answer your specific questions about the style sheets, boilerplate.css is an adaptation of HTML5 Boilerplate, which modestly describes itself as "the web's most popular front-end template". The version in Dreamweaver creates some basic styles to get you going. You don't need it, but if you like the styles, there's no harm in using and adapting it.

     

    The response.js JavaScript file is what's known as a "polyfill", a helper file that fills the cracks in older browsers (Polyfilla is the British brand name for spackling paste). Its purpose is to get IE 8 and earlier to implement basic media queries. If you want to support IE 8 and earlier, you need it unless you use IE conditional comments to supply different styles to older versions of IE.

     

    The fluidgrid.css file, as you call it, is where your main styles go. If you want to create a separate style sheet with other styles, you can. But the key to working with Fluid Grid Layouts is a strong understanding of CSS and media queries. Unless you understand how the cascade affects the page layout at different screen widths, you'll be lost.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 4, 2012 11:24 AM   in reply to casey.hill

    Hi Toskey,

     

    My feelings about the Fluid Grid feature in Dreamweaver is far more

    negative than David's. First, let's look at the response.js script that

    simulates responsive behavior in old browsers. It can be destabilizing

    in IE8 and under (causing lockups) and is, in my opinion, a waste of

    time. Each month that goes by, IE8 and under become less and less

    relevant and giving them a traditional fixed-width or mini-width look is

    all one needs to do.

     

    The grid approach itself, at the core of the system, is flawed and, at

    best, a transitional approach as CSS has added a columns module. In

    about 2 years time, the concept of grids will be native to most browsers

    and how you deal with older browsers will become a matter of progressive

    enhancement. That is, allow older browsers to display a conventional

    type of layout while newer browsers use the newer features.

     

    Responsive design depends on designers being able to react and change as

    the CSS brainiacs of the world have regularly scheduled eureka moments

    about better ways to deploy media queries. So Adobe would need to be

    ready and willing (and able) to issue updates to the Fluid Grid system

    on a need-to-update basis. This will never happen.

     

    As for flexibility and practicality, and real-world application, get a

    Tablet, Smartphone, and desktop computer cranked up. Now load Adobe's

    home page and tell me how it reacts/responds:

     

    1. Smartphone portrait mode

    2. Smartphone landscape mode

    3. Tablet portrait mode

    4. Tablet landscape mode

    5. In a desktop browser as you make window narrow and wide

     

    Now load up the PVII home page (www.projectseven.com) and perform the

    same tests in the same devices. How much importance you place on certain

    things will dictate to you what kind of approach to take.

     

    We think our approach is currently the most bulletproof in the world and

    if something comes to our attention 2 weeks from now that indicates

    there is an even better way, or if another device takes the world by

    storm and needs a new query, we will issue an update ASAP.

     

    Good luck and happy hunting.

     

    --

    Al Sparber - PVII

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (1)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points