27 Replies Latest reply: Sep 4, 2012 11:24 AM by Al Sparber RSS

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

    FatBoyAl Community Member

      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.

        • 1. Re: Building fluid grid site - what's the best way to add a page?
          Ken Binney CommunityMVP

          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.

          • 2. Re: Building fluid grid site - what's the best way to add a page?
            FatBoyAl Community Member

            That's what I was thinking, Ken.

             

            Seems that the fluid layouts break pretty easily and while I've been successful in figuring out why in some instances, I'm not sure if there are changes made to boilerplate.css or the js that specifically reference the added pages/ids/classes. Does this show off my ignorance? I think it does....:0)

             

            In any event, thanks! Errr.... since I will be pointing to the existing css, will the additional divs be recreated in each of the three media areas in that sheet? I know, obviously, that works when creating them in the initial page, but will it do that in subsequent pages as well? I can insert them manually if not, just wondering how much of the automation continues to work on additional pages.

             

            Thanks again.

            • 3. Re: Building fluid grid site - what's the best way to add a page?
              Ken Binney CommunityMVP

              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

              • 4. Re: Building fluid grid site - what's the best way to add a page?
                FatBoyAl Community Member

                Ah, ok. I do thank you for the assitance but it's specifically in fluid grid layouts that I need some help.

                 

                I'm going to back up the project and just try adding a page (again). Last time, I only broke part of the new page and could NOT figure out why. I'm going to try to use the existing CSS sheet and see if the fluid grid div insert works correctly.

                 

                Anyone with experience is implored to offer suggestions, help, donations (I take PayPal). Or just help.

                • 5. Re: Building fluid grid site - what's the best way to add a page?
                  Ken Binney CommunityMVP

                  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

                  • 6. Re: Building fluid grid site - what's the best way to add a page?
                    FatBoyAl Community Member

                    I certainly will.

                     

                    Like I've been saying - and seeing in other posts - the use of fluid grid layouts is challenging. I know CS6 marks the first time they've been included, so I know it's gonna take a little time to get it all right. I just didn't want to hose my existing project when I added another page.

                     

                    If you work with the fluid grid layout and try to add a second page (and subsequent pages, I imagine), it tries to add the dependent files (boilerplate.css and the js file) with the creation of the new page. I wish (or is it wonder, since it might exist) there was an 'add new page' button or function to add another fluid page to an existing site.

                     

                    Even without my site up, there must be some active folks here who've used fluid grid layout to create multi-page sites and can provide a little guidance in adding additional pages. That's really what I need. There are a number of tutorials on fluid grid layouts (both video and written) that give you the basics of creating the first page of the site - just none I can find on subsequent page adds. If DW didn't try to add the darn files each time, I would assume that it was simple and nothing would break.

                     

                    Anyone out there create/use fluid grid layouts with multiple pages - with success??

                    • 7. Re: Building fluid grid site - what's the best way to add a page?
                      osgood_ CommunityMVP

                      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.

                      • 8. Re: Building fluid grid site - what's the best way to add a page?
                        FatBoyAl Community Member

                        I got the second page working by adding it, deleting the respond.js and boilerplate.css and linking it to my main.css file. That isn't to say I don't have those two files, I just allowed DW to stick them where I wanted them and remapped them in the html to the correct locations. Adding divs using the 'add fluid grid div' button adds them correctly to the multiple locations within main.css and all is working peachy.

                         

                        I could have added a page, created a page specific css file and gone that way, but there'd be a lot of duplication and that seems sloppy.

                         

                        Still and all, when Adobe updates this functionality, it would be very nice to see them do a "initial" page create button and on the fluid grid layout page, have a button for creating additional site pages. That button would locate and link the respond.js and boilerplate.css files instead of recopying them and ask for a primary css file.

                         

                        Adobe - great job with this. It's a beta step but for new guys like me, the best way to get involved in responsive (ie: the future) design.

                        Thanks

                        • 9. Re: Building fluid grid site - what's the best way to add a page?
                          MaeOL

                          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!

                          • 10. Re: Building fluid grid site - what's the best way to add a page?
                            casey.hill

                            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).

                            • 11. Re: Building fluid grid site - what's the best way to add a page?
                              FatBoyAl Community Member

                              I had moved the css from the original page into a css directory off the root. So I let it copy the new file in, repointed the css to the existing css file and began creating the fluid divs. As far as I can tell, the jscript is not unique, so no biggie there.

                              • 12. Re: Building fluid grid site - what's the best way to add a page?
                                David_Powers CommunityMVP

                                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.

                                • 13. Re: Building fluid grid site - what's the best way to add a page?
                                  FatBoyAl Community Member

                                  David, I was thinking of making the first page into a template and doing exactly that, but unless you wanted all those FGLD to be the same name, you'd need to change all the names, every instance in the css. I'm gathering that, like me, many of those asking the questions here are new to this and changing every instance of the name of the div might result in some...problems.

                                   

                                  Maybe if you did the first page, just did the minimum of FGLD, like header and footer and nav - the common pieces, then saved it as the template or did a File > Save As, that would work easier. Then as you create content FGLD's, it would automagically populate the css. Maybe I just said the same thing as you did - but I read your first suggestion as creating a full page, then saving it as a different name, deleting contents and working from there. I don't think you'd want to have content divs present in the 'template'.

                                   

                                  I also get the impression that the more sophisticated developers are using other methods.

                                  • 14. Re: Building fluid grid site - what's the best way to add a page?
                                    casey.hill Community Member

                                    @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.

                                    • 15. Re: Building fluid grid site - what's the best way to add a page?
                                      Al Sparber Community Member

                                      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

                                      • 16. Re: Building fluid grid site - what's the best way to add a page?
                                        FatBoyAl Community Member

                                        I was saying the same thing as you, toskey. Create your template with the divs you mention, then create the divs unique to that page. I was simply saying that by, if this is what David was suggesting, creating an entire page, then using that as the template but simply changing content, would leave you with a less flexible (in terms of css, not responsiveness) page. If your pages differ in look and feel outside the header, footer, nav, aside divs, that is.

                                         

                                        If that's not what David was suggesting, my bad.

                                         

                                        If I'm not wrong - and I have broken the fluid grid several times - breaking it lies in two areas: manually manipulating the css file and accidentally creating FGLD's outside the clearfix or nesting them. Each time I've broken it, and then fixed it, I'd done one of these two things.

                                        • 17. Re: Building fluid grid site - what's the best way to add a page?
                                          Nancy O. CommunityMVP

                                          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.

                                          • 18. Re: Building fluid grid site - what's the best way to add a page?
                                            David_Powers CommunityMVP

                                            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.

                                            • 19. Re: Building fluid grid site - what's the best way to add a page?
                                              Al Sparber Community Member

                                              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

                                              • 20. Re: Building fluid grid site - what's the best way to add a page?
                                                Nancy O. CommunityMVP

                                                Well said, David.

                                                 

                                                Thanks,

                                                Nancy O.

                                                • 21. Re: Building fluid grid site - what's the best way to add a page?
                                                  David_Powers CommunityMVP

                                                  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.

                                                  • 23. Re: Building fluid grid site - what's the best way to add a page?
                                                    casey.hill Community Member

                                                    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.

                                                    • 24. Re: Building fluid grid site - what's the best way to add a page?
                                                      David_Powers CommunityMVP

                                                      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.

                                                      • 25. Re: Building fluid grid site - what's the best way to add a page?
                                                        casey.hill Community Member

                                                        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?

                                                        • 26. Re: Building fluid grid site - what's the best way to add a page?
                                                          David_Powers CommunityMVP

                                                          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.

                                                          • 27. Re: Building fluid grid site - what's the best way to add a page?
                                                            Al Sparber Community Member

                                                            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