Skip navigation
Currently Being Moderated

help with CSS Designer?

Oct 24, 2013 8:34 AM

I am having a lot of trouble with the left side of CSS Designer. Sorry to sound like such a kvetch!

 

To take a simple example - From the Welcome screen I create a fuid grid layout and name my style sheet mystyles.css. When the document window/program opens I am seeing boilerplate.css in bold and only two selectors down below - "html, button, input, select, textarea" and "html". Why only two since the boilerplate has a huge complement of selectors?

 

Next question (more important) - when I click on mystyles.css a list of 16 selectors pops up, although the only one I was expecting to see was the selector for "grid container"! Why does this happen? Why doesn't Dreamweaver let me create my own selectors as I build the site? I have read that mystyles.css should contain only those style rules which I have inserted into the head of my code. Is that not true?

 

In general I feel that Adobe relies too much on robotic tutorials without explaining the underlying architecture. When the beginning uses starts out on his/her own, it is easy to get confused.

 

Please help!

Kevin from Cambridge

 
Replies
  • Currently Being Moderated
    Oct 24, 2013 8:49 AM   in reply to KevinB9

    I open DW and use File > New > Fluid Grid Layout to create a new project. I name my CSS file "fluidgrid1.css" and save it. DW now shows me my page in Design view with a link to my fluidgrid1.css, and to boilerplate.css in the head of the page code. On the CSS Designer panel, in the Sources pane, I see:

     

    ALL SOURCES

    boilerplate.css

    fluidgrid1.css

     

    When I click on boilerplate.css in the Sources pane, I see oodles of selectors appear in the Selectors pane, all of which seem to be very general (like article, aside, figcaption, etc). When I click on fluidgrid1.css, I see a different (less extensive) set of selectors that appear to be tailored to my page content (like #div1, or .hide_mobile).

     

    Are you with me so far?

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 25, 2013 5:13 AM   in reply to KevinB9

    Please let me know if you are willing to continue with this.

     

    That's why I'm here!

     

    The CSS in each of those stylesheets provides the "boilerplate" layout for your fluid grid pages. Without that CSS, you would have no "fluid" and no "grid". That's why both of them contain pre-defined rules, many of which correspond to the ID's already assigned to the HTML (or the tag(s)) that is/are written on the page when it is first opened.

     

    The contents of the @media pane are determined by the selections you made for the various widths and gutters in the New Page dialog that opened when you selected the Fluid Grid Layout option. You can adjust these as needed once they are written during this process.

     

    So what are your further questions?

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 25, 2013 5:17 AM   in reply to KevinB9

    And by the way, I don't think there is specific documentation for these selectors other than what is offered at http://helpx.adobe.com/dreamweaver/using/fluid-grid-layout-dreamweaver .html.

     

    You would experience the same "pre-loaded" CSS if you had elected to create one of the starter layouts (2 column fixed, right sidebar, header and footer or 3 column fixed, header and footer).

     
    |
    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