11 Replies Latest reply on Oct 20, 2015 3:28 PM by Nancy OShea

    Fluid grid layouts blow up after viewing in phone size

    P B Level 1

      Hello,

       

      I'm working on a site using fluid grid layouts in DW CS6.  The layout looked fine in Live view until I sized the window down to see how it would look in a phone size.  Then when I enlarged the window back up, the fluid grid layout appeared to be blown up with pieces everywhere.  Fortunately, it looked fine in the browser but can anyone tell me how to get Dreamweaver to re-acclimate to its own code and put humpty dumpty back together again after viewing in various sizes?

       

      Any 'top  3' tips from experienced users on any topic for using fluid grid layouts would also be welcome.  I'm a newbie and have heard they can be quite temperamental.

       

      Thanks!

        • 1. Re: Fluid grid layouts blow up after viewing in phone size
          osgood_ Level 8

          Its a failed experiment from Adobe. Fluid Grids are no longer supported going forward and has been 'replaced' in Creative Cloud 2015 with Bootstrap. Fluid Grids are still available in the CC 2015 version but for how long is anyones guess - Adobe are sort of sweeping it under the carpet. You can still use Bootstrap in CS6 or any version of DW for that matter if you get it direct from the Bootstrap website. Its not my cup--of-tea but for anyone not wishing to learn the basics of reponsive web building its second best and its first best compared to Fluid Grids. My advice, if you're in this for the long haul , is to ditch Fluid Grids and learn Bootsrap or better still learn to write your own reponsive coding.

          • 2. Re: Fluid grid layouts blow up after viewing in phone size
            P B Level 1

            Wow, I paid $2000 for this Adobe software less than a year ago to do modern responsive web sites and apps... and FGLs have been... scrapped?

            Boy, that's a kick in the stomach.

            But thank you so much Osgood for sharing that information!  I am in it for the long haul and it is very helpful that you shared that.  

            How does one use Bootstrap with DW?

            Thanks Osgood...

                  From: osgood_ <forums_noreply@adobe.com>

            To: P B <mymailbox999@yahoo.com>

            Sent: Thursday, October 15, 2015 3:15 PM

            Subject:  Fluid grid layouts blow up after viewing in phone size

                

             

             

            Fluid grid layouts blow up after viewing in phone size

            created by osgood_ in Dreamweaver support forum - View the full discussionIts a failed experiement from Adobe. Fluid Grids are no longer supported going forward and has been replaced in Creative Cloud 2015 with Bootstrap. You can still use Bootstrap in CS6 or any version of DW for that matter if you get it direct from the Bootstrap website. Its not my cup--of-tea but for anyone not wishing to learn the basics of reponsive web building its second best and its first best compared to Fluid Grids. My advice, if you're in this for the long haul , is to dicth Fluid Grids and learn Bootsrap or better still learn to code your own reponsive coding. If the reply above answers your question, please take a moment to mark this answer as correct by visiting: https://forums.adobe.com/message/8070733#8070733 and clicking ‘Correct’ below the answer Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: Please note that the Adobe Forums do not accept email attachments. If you want to embed an image in your message please visit the thread in the forum and click the camera icon: https://forums.adobe.com/message/8070733#8070733 To unsubscribe from this thread, please visit the message page at , click "Following" at the top right, & "Stop Following"  Start a new discussion in Dreamweaver support forum by email or at Adobe Community For more information about maintaining your forum email notifications please go to https://forums.adobe.com/thread/1516624.

             

            • 4. Re: Fluid grid layouts blow up after viewing in phone size
              Nancy OShea Adobe Community Professional & MVP

              If you have CS6, Bootstrap grids are not included in that version.

              But that doesn't prevent you from coding with Bootstrap's open source framework in CS6.

               

              Start with these tutorials.

              Bootstrap 3 Tutorial

               

              The main advantage to Bootstrap over legacy FGLayouts:

              It's much more than a layout framework.  Bootstrap contains all sorts of built-in classes for making responsive  navbars, forms, tabbed panels, tables, modal windows, carousel sliders and much, much more.  To get the most out of Bootstrap, you must learn the 12-box grid system and classes. 

               

              Nancy O.

              • 5. Re: Fluid grid layouts blow up after viewing in phone size
                P B Level 1

                Nancy, 

                Thanks for your response.

                I've downloaded Bootstrap and installed a bootstrap.css into a new DW document; that's as far as I've gotten so far.  Do you know if the Bootstrap grid will be visual in DW CS6 or will it all have to be raw code?

                Thanks...

                      From: Nancy O. <forums_noreply@adobe.com>

                To: P B <mymailbox999@yahoo.com>

                Sent: Saturday, October 17, 2015 7:33 PM

                Subject:  Fluid grid layouts blow up after viewing in phone size

                    

                 

                 

                Fluid grid layouts blow up after viewing in phone size

                created by Nancy O. in Dreamweaver support forum - View the full discussionIf you have CS6, Bootstrap grids are not included in that version. But that doesn't prevent you from coding with Bootstrap's open source framework in CS6.  Start with these tutorials.Bootstrap 3 Tutorial The main advantage to Bootstrap over legacy FGLayouts: It's much more than a layout framework.  Bootstrap contains all sorts of built-in classes for making responsive  navbars, forms, tabbed panels, tables, modal windows, carousel sliders and much, much more.  To get the most out of Bootstrap, you must learn the 12-box grid system and classes.   Nancy O. If the reply above answers your question, please take a moment to mark this answer as correct by visiting: https://forums.adobe.com/message/8077334#8077334 and clicking ‘Correct’ below the answer Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: Please note that the Adobe Forums do not accept email attachments. If you want to embed an image in your message please visit the thread in the forum and click the camera icon: https://forums.adobe.com/message/8077334#8077334 To unsubscribe from this thread, please visit the message page at , click "Following" at the top right, & "Stop Following"  Start a new discussion in Dreamweaver support forum by email or at Adobe Community For more information about maintaining your forum email notifications please go to https://forums.adobe.com/thread/1516624.

                 

                • 6. Re: Fluid grid layouts blow up after viewing in phone size
                  Nancy OShea Adobe Community Professional & MVP

                  The DW Grid Layout features for Bootstrap were only introduced this year in CC 2015. 

                  CS6 (2012) doesn't have it.

                   

                  But like I said, you can still construct responsively with Bootstrap providing you can work with the code.

                   

                  Basic starter page:

                   

                  <!doctype html>

                  <html>

                  <head>

                  <meta charset="utf-8">

                  <title>Bootstrap 3.3.5 Starter</title>

                  <meta name="viewport" content="width=device-width, initial-scale=1">

                  <meta http-equiv="X-UA-Compatible" content="IE=edge">

                   

                  <!--HTML5 HELP FOR OLDER IE BROWSERS-->

                  <!--[if lt IE 9]>

                  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

                  <![endif]-->

                   

                  <!--Bootstrap-->

                  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

                  </head>

                   

                  <body>

                  <!--BEGIN NAVBAR-->

                  <nav class="navbar navbar-inverse navbar-fixed-top">

                  <div class="container-fluid">

                  <div class="navbar-header">

                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>

                  <a class="navbar-brand" href="Index.html">WebSiteName</a>

                  </div>

                  <div class="collapse navbar-collapse" id="myNavbar">

                  <ul class="nav navbar-nav">

                  <li class="active"><a href="Index.html" class="glyphicon glyphicon-home"> Home</a></li>

                  </ul>

                  <ul class="nav navbar-nav navbar-right">

                  <li><a href="#">Menu</a></li>

                  <li><a href="#">Menu</a></li>

                  <li><a href="#">Menu</a></li>

                  <li><a href="#">Menu</a></li>

                  <li><a href="#">Menu</a></li>

                  </ul>

                  </div>

                  </div>

                  </nav>

                  <hr>

                  <!--BEGIN CONTENT-->

                  <section class="container" id="content">

                  <div class="row">

                  <div class="col-sm-6 col-md-3">

                  <h3>Heading 3</h3>

                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>

                  </div>

                   

                  <div class="col-sm-6 col-md-3">

                  <h3>Heading 3</h3>

                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>

                  </div>

                   

                  <div class="col-sm-6 col-md-3">

                  <h3>Heading 3</h3>

                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>

                  </div>

                   

                  <div class="col-sm-6 col-md-3">

                  <h3>Heading 3</h3>

                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>

                  </div>

                  </div>

                  </section>

                  <hr>

                  <!--FOOTER-->

                  <section class="container">

                  <footer class="row">

                  <div class="text-center">

                  Footer goes here...

                  </div>

                  </footer>

                  </section>

                   

                  <!--Latest jQuery Core Library-->

                  <script src="http://code.jquery.com/jquery-latest.min.js">

                  </script>

                  <!--Bootstrap-->

                  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

                   

                  </body>

                  </html>

                   

                  That's all you need to get started with Bootstrap layouts.

                   

                   

                  Nancy O.

                  1 person found this helpful
                  • 7. Re: Fluid grid layouts blow up after viewing in phone size
                    P B Level 1

                    Preran, thanks for the link but I'm using CS6.

                    • 8. Re: Fluid grid layouts blow up after viewing in phone size
                      P B Level 1

                      Nancy,

                       

                      You take my breath away.

                       

                      I've been wandering through Lynda tutorials and GetBootstrap.com and HTML5 Boilerplate all morning like a lost puppy, getting myself more and more confused and (I think) making everything more difficult than it has to be.  Just when my doggie-headache was about to become totally unbearable, I logged in to the Forum to find the beeeuuuuuutiful code you posted for me.  I can't believe how SIMPLE you made it. 

                       

                      Thanks for taking the time and for your interest in being so helpful!

                       

                      I can create a new mystyles.css to go with the Bootstrap.css right and just keep going until I'm done, right?


                      I see from your icon you may be a cat person.  No offense intended, but... WOOF!  (Big thanks.)

                      • 9. Re: Fluid grid layouts blow up after viewing in phone size
                        Nancy OShea Adobe Community Professional & MVP

                        Glad to be of help!

                         

                        2. Yes, a custom.css is the best way to override Bootstrap styles and add your own touches. There's a lot you can do with Bootstrap's built-in classes & components, too.

                         

                        3. I'm an equal opportunity animal lover -- all critters large and small.

                         

                        Nancy O.

                        • 10. Re: Fluid grid layouts blow up after viewing in phone size
                          P B Level 1

                          Me too.

                           

                          I just posted another question about linking to jquery-latest.js at their CDN.  I found an article on jquery's blog http://blog.jquery.com/2014/07/03/dont-use-jquery-latest-js/ discussing how developers should NOT link to it, yet I know everybody does it, and teaches it, too.

                           

                          If you want to chime in I've love to get your thoughts.  I just posted the thread a moment ago.


                          Signed, confused...

                          • 11. Re: Fluid grid layouts blow up after viewing in phone size
                            Nancy OShea Adobe Community Professional & MVP

                            If you're concerned about CDN servers going offline,  host your own scripts.  I keep copies on my server just in case. 

                             

                            The latest stable release of jQuery is 1.11 and if they keep it at that level, that's fine with me.  1.11 is what I use in production sites anyway. I do not use 2.0 which tends to break older plugins and doesn't work in older IE.

                             

                             

                            Nancy O.