27 Replies Latest reply on Sep 4, 2012 11:24 AM by ALsp

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

    FatBoyAl

      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 Level 6

          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 Level 1

            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 Level 6

              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 Level 1

                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 Level 6

                  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 Level 1

                    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_ Level 8

                      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 Level 1

                        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 Level 1

                              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 Adobe Community Professional

                                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 Level 1

                                  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 Level 1

                                    @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?
                                      ALsp Adobe Community Professional

                                      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 Level 1

                                        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 OShea Adobe Community Professional & MVP

                                          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 Adobe Community Professional

                                            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?
                                              ALsp Adobe Community Professional

                                              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