14 Replies Latest reply: Sep 3, 2013 1:38 PM by Preran RSS

    Dreamweaver Fluid Grid and Twitter Bootstrap

    Exley22 Community Member

      Does anyone know if it's possible to graft the Twitter Bootstrap styling, elements and functioning onto the Fluid Grid in Dreamweaver CS6? If so how?

       

      I think it would be great to be able to have the ease of manipulating the rows and columns using the Fluid Grid and have all the cool styling and all from Twitter Bootstrap.

        • 1. Re: Dreamweaver Fluid Grid and Twitter Bootstrap
          Nancy O. MVP

          I don't see why you couldn't add it between BOILERPLATE.CSS and your current FLUIDGRID.CSS.  NOTE: FluidGrid.css must come after everything else.

           

                    <link href="Scripts/boilerplate.css" rel="stylesheet" type="text/css">

           

                    [INSERT BOOTSTRAP HERE]

           

                    <link href="FluidGrid.css" rel="stylesheet" type="text/css">

           

          Linking HTML to external CSS in Dreamweaver

          http://alt-web.com/DEMOS/DW-Link-Stylesheet.shtml

           

          In case you don't already know, there is a Forum for Dreamweaver  questions:

          http://forums.adobe.com/community/dreamweaver/dreamweaver_general?view=discussions

           

           

          Nancy O.

          Alt-Web Design & Publishing

          Web | Graphics | Print | Media  Specialists 

          http://alt-web.com/

          • 2. Re: Dreamweaver Fluid Grid and Twitter Bootstrap
            edmdgomez

            I discovered when trying to get bootstrap code for fluid grid layouts to display properly in Dreamweaver that the following code is not understood by the HTML editor in Dreamweaver:

            .row [class*="col"] {

              display: inline;

              float: left;

              width: 100%;

              min-height: 28px;

              margin-left: 1.127659574%;

              *margin-left: 1.0744680846382977%;

              -webkit-box-sizing: border-box;

                 -moz-box-sizing: border-box;

                  -ms-box-sizing: border-box;

                      box-sizing: border-box;

            }

            Instead of the shorthand .row [class*="col"] you have to list each grid column like this:

             

            .col1,

            .col2,

            .col3,

            .col4,

            .col5,

            .col6,

            .col7,

            .col8,

            .col9,

            .col10,

            .col11,

            .col12

            {

                display: inline;

              float: left;

              width: 100%;

              min-height: 28px;

              margin-left: 2.127659574%;

              *margin-left: 2.0744680846382977%;

            -webkit-box-sizing: border-box;

                 -moz-box-sizing: border-box;

                  -ms-box-sizing: border-box;

                      box-sizing: border-box;

            }

            • 3. Re: Dreamweaver Fluid Grid and Twitter Bootstrap
              Nancy O. MVP

              DW's Design View is not 100% reliable.  For best results use Live View or Preview in Browsers to test your layouts.

               

               

              Nancy O.

              • 4. Re: Dreamweaver Fluid Grid and Twitter Bootstrap
                edmdgomez Community Member

                Previewing in the browser is a given but putting a page together is much easier if the page looks right in the editor. Most grid systems don't work in Dreamweaver Design View so I was pleased when I was able to get Bootstrap to work because it is such a good framework.

                • 5. Re: Dreamweaver Fluid Grid and Twitter Bootstrap
                  Gany_M

                  I have exactly the same problem with DW CS6. Most frameworks do not show correctly in design view. Foundation doesn't show properly, neither does Bootstrap. Your solution didn't work for me. Where do I place it in the CSS? In bootstrap itself, in my own CSS? What is the signifance of the *margin-left vs margin-left above?

                   

                  To the Abode people: I did find a solution that does work. But neither you and me will like that: Kompozer works excellent. I don't like it, because many years of experience working with DW go down the drain. And you don't because loose a customer.

                   

                  Surely you guys are able to come with with a better answer than 'our current flagship is partly 5 years out of date'. Is it that difficult to make an update so it works? Imagine Ford says: "our current top of the line model has an engine of a T-Ford, we apologize for any inconvience." Would you still buy that Ford? Or perhaps find a different car?

                   

                  I'm pretty certain it is a border issue. I had that in the past with a simpler framework, setting the borders to zero solved it. The problem here is that Foundation and Bootstrap will fall apart if I do that.

                  • 6. Re: Dreamweaver Fluid Grid and Twitter Bootstrap
                    edmdgomez Community Member

                    Here is the complete grid css file that I'm using. It is modified from the original bootstrap. Different class names. It's wrapped in a media query so that the grid only applies above 768px. It gives you a 12 grid system.

                     

                    @media only screen and (min-width: 768px) {

                        

                    /* Grids only applied to desktop and tablet

                     

                    ------------------------------------------------------------------------------------------ ----------*/

                     

                    .col1,

                    .col2,

                    .col3,

                    .col4,

                    .col5,

                    .col6,

                    .col7,

                    .col8,

                    .col9,

                    .col10,

                    .col11,

                    .col12

                    {

                        display: inline;

                      float: left;

                      width: 100%;

                      min-height: 28px;

                      margin-left: 2.127659574%;

                      *margin-left: 2.0744680846382977%;

                    -webkit-box-sizing: border-box;

                         -moz-box-sizing: border-box;

                          -ms-box-sizing: border-box;

                              box-sizing: border-box;

                    }

                     

                    .row [class*="col"]:first-child {

                      margin-left: 0;

                    }

                     

                    .row .col12 {

                      width: 99.99999998999999%;

                      *width: 99.94680850063828%;

                    }

                     

                    .row .col11 {

                      width: 91.489361693%;

                      *width: 91.4361702036383%;

                    }

                     

                    .row .col10 {

                      width: 82.97872339599999%;

                      *width: 82.92553190663828%;

                    }

                     

                    .row .col9 {

                      width: 74.468085099%;

                      *width: 74.4148936096383%;

                    }

                     

                    .row .col8 {

                      width: 65.95744680199999%;

                      *width: 65.90425531263828%;

                    }

                     

                    .row .col7 {

                      width: 57.446808505%;

                      *width: 57.3936170156383%;

                    }

                     

                    .row .col6 {

                      width: 48.93617020799999%;

                      *width: 48.88297871863829%;

                    }

                     

                    .row .col5 {

                      width: 40.425531911%;

                      *width: 40.3723404216383%;

                    }

                     

                    .row .col4 {

                      width: 31.914893614%;

                      *width: 31.8617021246383%;

                    }

                     

                    .row .col3 {

                      width: 23.404255317%;

                      *width: 23.3510638276383%;

                    }

                     

                    .row .col2 {

                      width: 14.89361702%;

                      *width: 14.8404255306383%;

                    }

                     

                    .row .col1 {

                      width: 6.382978723%;

                      *width: 6.329787233638298%;

                    }

                     

                    /* Prefix Extra Space >> 12 Columns

                     

                    ------------------------------------------------------------------------------------------ ----------*/

                     

                     

                    .prefix_1 {

                        padding-left: 8.333%;

                    }

                     

                    .prefix_2 {

                        padding-left: 16.667%;

                    }

                     

                    .prefix_3 {

                        padding-left: 25.0%;

                    }

                     

                    .prefix_4 {

                        padding-left: 33.333%;

                    }

                     

                    .prefix_5 {

                        padding-left: 41.667%;

                    }

                     

                    .prefix_6 {

                        padding-left: 50.0%;

                    }

                     

                    .prefix_7 {

                        padding-left: 58.333%;

                    }

                     

                    .prefix_8 {

                        padding-left: 66.667%;

                    }

                     

                    .prefix_9 {

                        padding-left: 75.0%;

                    }

                     

                    .prefix_10 {

                        padding-left: 83.333%;

                    }

                     

                    .prefix_11 {

                        padding-left: 91.667%;

                    }

                     

                    /* Suffix Extra Space >> 12 Columns

                     

                    ------------------------------------------------------------------------------------------ ----------*/

                     

                    .suffix_1 {

                        padding-right: 8.333%;

                    }

                     

                    .suffix_2 {

                        padding-right: 16.667%;

                    }

                     

                    .suffix_3 {

                        padding-right: 25.0%;

                    }

                     

                    .suffix_4 {

                        padding-right: 33.333%;

                    }

                     

                    .suffix_5 {

                        padding-right: 41.667%;

                    }

                     

                    .suffix_6 {

                        padding-right: 50.0%;

                    }

                     

                    .suffix_7 {

                        padding-right: 58.333%;

                    }

                     

                    .suffix_8 {

                        padding-right: 66.667%;

                    }

                     

                    .suffix_9 {

                        padding-right: 75.0%;

                    }

                     

                    .suffix_10 {

                        padding-right: 83.333%;

                    }

                     

                    .suffix_11 {

                        padding-right: 91.667%;

                    }

                     

                    /* Push Space >> 12 Columns

                     

                    ------------------------------------------------------------------------------------------ ----------*/

                     

                    .push_1 {

                        left: 8.333%;

                    }

                     

                    .push_2 {

                        left: 16.667%;

                    }

                     

                    .push_3 {

                        left: 25.0%;

                    }

                     

                    .push_4 {

                        left: 33.333%;

                    }

                     

                    .push_5 {

                        left: 41.667%;

                    }

                     

                    .push_6 {

                        left: 50.0%;

                    }

                     

                    .push_7 {

                        left: 58.333%;

                    }

                     

                    .push_8 {

                        left: 66.667%;

                    }

                     

                    .push_9 {

                        left: 75.0%;

                    }

                     

                    .push_10 {

                        left: 83.333%;

                    }

                     

                    .push_11 {

                        left: 91.667%;

                    }

                     

                    /* Pull Space >> 12 Columns

                     

                    ------------------------------------------------------------------------------------------ ----------*/

                     

                    .pull_1 {

                        left: -8.333%;

                    }

                     

                    .pull_2 {

                        left: -16.667%;

                    }

                     

                    .pull_3 {

                        left: -25.0%;

                    }

                     

                    .pull_4 {

                        left: -33.333%;

                    }

                     

                    .pull_5 {

                        left: -41.667%;

                    }

                     

                    .pull_6 {

                        left: -50.0%;

                    }

                     

                    .pull_7 {

                        left: -58.333%;

                    }

                     

                    .pull_8 {

                        left: -66.667%;

                    }

                     

                    .pull_9 {

                        left: -75.0%;

                    }

                     

                    .pull_10 {

                        left: -83.333%;

                    }

                     

                    .pull_11 {

                        left: -91.667%;

                    }

                    }

                    /* Clear Floated Elements

                     

                    ------------------------------------------------------------------------------------------ ----------*/

                     

                    /* http://sonspring.com/journal/clearing-floats */

                     

                    .clear {

                        clear: both;

                        display: block;

                        overflow: hidden;

                        visibility: hidden;

                        width: 0;

                        height: 0;

                    }

                     

                    /* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-ha ck */

                     

                    .row:before,

                    .row:after {

                      display: table;

                      line-height: 0;

                      content: "";

                    }

                     

                    .row:after {

                      clear: both;

                    }

                     

                    .row {

                        display: inline-block;

                    }

                     

                    * html .row {

                        height: 1%;

                    }

                     

                    .row {

                        display: block;

                    }

                     

                    .row .first {

                        margin-left: 0;

                    }

                    • 8. Re: Dreamweaver Fluid Grid and Twitter Bootstrap
                      jaydigital1

                      There is a dmxzone extension for Dreamweaver that I found very useful.

                       

                      John

                      • 9. Re: Dreamweaver Fluid Grid and Twitter Bootstrap
                        Nancy O. MVP

                        I second that.  DMX Zone Bootstrap is a free extension for making responsive layouts in Dreamweaver.  Check it out.

                        http://www.dmxzone.com/go/21759/dmxzone-bootstrap/

                         

                         

                        Nancy O.

                        • 10. Re: Dreamweaver Fluid Grid and Twitter Bootstrap
                          jaydigital1 Community Member

                          I second the dmxzone recommendation. I just used it for a small real estate website. Worked great. There is also a set of goodies called Bootstrap Elments for the Dreamweaver-Bootstrap extension.

                           

                          The best think it has over the fluid template for Dreamweaver is that you can nest the elements with the Bootstrap extension, which you cannot do with the fluid template that Adobe provides.

                           

                          Thanks,

                          John

                          • 11. Re: Dreamweaver Fluid Grid and Twitter Bootstrap
                            Nancy O. MVP

                            Creative Cloud 12.2 Enhancements to Fluid Grid Layouts

                            http://blogs.adobe.com/dreamweaver/2013/02/updated-fluid-grids-in-dreamweaver.html

                             

                            You can nest elements now where before you couldn't.

                             

                             

                            Nancy O.

                            • 12. Re: Dreamweaver Fluid Grid and Twitter Bootstrap
                              jaydigital1 Community Member

                              Hi Nancy, Is the update to Dreamweaver available for CS6, or just for the subscription version?

                               

                              Thanks,

                              John

                              • 13. Re: Dreamweaver Fluid Grid and Twitter Bootstrap
                                Nancy O. MVP

                                So far, it's only in the Cloud subscription version.  However, Adobe has promised to  keep updating CS6 Perpetual License for the foreseeable future. 

                                 

                                 

                                Nancy O.

                                • 14. Re: Dreamweaver Fluid Grid and Twitter Bootstrap
                                  Preran Adobe Employee

                                  Hi,

                                   

                                  Please check out this demonstration of using Twitter Bootstrap with Dreamweaver.

                                   

                                  http://www.dmxzone.com/go/22006/adobe-tech-live-dmxzone-bootstrap-and-elements-video/

                                   

                                  Thanks,

                                  Preran