Skip navigation
Currently Being Moderated

Dreamweaver Fluid Grid and Twitter Bootstrap

May 13, 2012 3:23 PM

Tags: #dreamweaver #cs6 #twitter_bootstrap #fluid_grid #responsive_design

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.

 
Replies
  • Currently Being Moderated
    May 19, 2012 12:33 PM   in reply to Exley22

    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/

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 11, 2012 11:36 AM   in reply to Nancy O.

    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;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 18, 2012 10:12 AM   in reply to edmdgomez

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

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 18, 2012 10:23 AM   in reply to Nancy O.

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 4, 2012 8:11 PM   in reply to edmdgomez

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 4, 2012 9:57 PM   in reply to Gany_M

    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-hack */

     

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

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 9, 2012 2:38 AM   in reply to edmdgomez

    Hi Ed,

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 12, 2013 5:20 AM   in reply to Gany_M

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

     

    John

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 14, 2013 3:48 PM   in reply to jaydigital1

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 14, 2013 4:10 PM   in reply to Nancy O.

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 15, 2013 10:33 AM   in reply to jaydigital1

    Creative Cloud 12.2 Enhancements to Fluid Grid Layouts

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

     

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

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 15, 2013 11:13 AM   in reply to Nancy O.

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

     

    Thanks,

    John

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 15, 2013 2:06 PM   in reply to jaydigital1

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 3, 2013 1:38 PM   in reply to jaydigital1

    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

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

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