PDA

View Full Version : boilerplate.css in DW CC


RainForest
10-29-2014, 05:20 PM
Hello,

I'm slowly learning (as time permits) about fluid/responsive web design, so I can update my website to be more user friendly to visitors viewing the site on different sized devices.

When creating a new fluid page in DW CC, a boilerplate.css file is added to the site. In reviewing the boilerplate, I understand that generally speaking, its purpose is to correct display issues across browsers. I see comments on why certain code is included, including many elements I never use, and many elements I prefer to style myself, such as links, images, lists, and buttons.

My questions are:

1) How does DW know which css sheet to look at? For example, when I add a background image to my site, DW puts it in the boilerplate.css file. Why doesn't it go in another css sheet, such as the fluid.css sheet I've created for my site? I prefer to keep all the code I do myself separate, but when I move the code for the background to another style sheet, it doesn't work.

2) Is is advisable to delete boilerplate code for elements I want to customize, or to leave it fully intact?

3) if I leave the boilerplate code intact as a reference for the site, how do I ensure the code I place in another css sheet overwrites a particular style, such as for links or images, in the boilerplate?

Ricky55
10-30-2014, 11:59 PM
As you get more advanced you may want to step away from Dreamweaver. In my experience once you get to a certain level Dreamweaver's GUI can get in the way of understanding core concepts. This is what I believe is happening here.

Basically a boilerplate is just that, a basic template of styles for a website. I personally like to create my own boilerplate that I use across websites.

To answer your questions.

1. I've not used Dreamweaver for a few releases but I think you dictate what CSS file the styles go in to. From the styles section you just select the style sheet and then add your new style. Or you could just open the css file you want to add the styles to and just code them in yourself.

2. Yes I would delete anything you don't want otherwise you'll be constantly fighting them. To be honest most of Dreamweavers template files are there for learning and are not really design for production websites.

I would check out the HTML5 boiler plate, this is the best boiler plate out there.

All I would take from the Dreamweaver boilerplate are the styles used to make the site fluid / responsive.

3. If you did leave in tact you would do this like you would any CSS by using CSS specificity.

CSS is loaded from the top down so any styles that appear after are applied. So if you own CSS file is loaded in after the boiler plate then those styles would take precedence depending on the selectors you have used. That's why I'd delete them or you could comment them out until you are more confident.

/*This code would not be read by the browser*/

Try not to use ID based selectors in CSS as they have too strong specificity.

Hope that answers your questions. Like I said at the beginning I'd try working in code view more so you can really see whats going on behind the GUI. Once you get to a certain level Dreameaver's GUI will start to get the way and you'll find it annoying and not as quick as a straight code editor.

RainForest
10-31-2014, 04:53 PM
Thanks, Ricky. You've helped me out before. :smile:

I'm not a web designer by nature, but from the ancient days of the first GeoCities pages where I first learned how to write HTML, I've always enjoyed working directly with code. CSS has been a challenge for me from day one, although I finally understand some of the basics fairly well.

If I'm understanding what you're telling me,

- I can't just move the css for the background from the boilerplate.css to my fluid.css, I have to designate which sheet I want it on at the time I set the background.

- The "cascading" part of css comes from the order in which css style sheets are linked to the html page inside the <head>.

- I can delete just about anything I want from the boilerplate.css, but if I'm not careful, I could cause some viewers to have display issues if I delete the wrong thing.

I've downloaded and reviewed the HTML5 boilerplate, and it's very extensive, with subfolders and lots of files included that I have no idea of what they do. I did watch a tutorial the other day that wrote a basic responsive page from scratch, and the only special code included was an IE script going to a specific address at html4shiv.googlecode.com. That seems rather bare-boned, but how important is it currently considered to be, to correct for dozens of browser issues? In your opinion, is it worth the time and effort to include corrective code?

- And yes, I'm trying to stay away from ID selectors as much as possible. Also learning to stay away from tables as much as possible, although it seems like just when I've learned something and have a good grasp for how it works, everybody's already moved on to a new way of doing things! ;-)

RainForest
10-31-2014, 06:53 PM
It doesn't look like I can edit my previous post...

I have moved via the menu the code I want into separate stylesheets, and that's working just fine. So I see that it's not the order in which the stylesheets are linked, so much as the technique used to move the styles from one sheet to another.

Ricky55
11-01-2014, 11:08 AM
Hi Rain Forrest

No worries at all mate I enjoy helping.

To answer your questions in order.

1 Yes you can move the css of course you can it can reside any where but watch specificity. Regarding linking it is important because of the cascade read on....

2 The cascade. Yes it comes from the order the files are linked in the head but also in the file its self.

For example if you said

P { color: red;}

Then

P { color: blue;}

Your paragraph would be blue because it came after, further down the cascade.

If you then said

#para { color: teal;} and your p had an Id of para then your paragraph would be teal. Even if this appeared earlier in the file as an ID carries more specificity.

3. Yes you can delete anything but obviously if you do delete the wrong thing then yes you could cause problems.

Regarding corrective code. The shiv just makes older versions of Internet explorer aware of the newer html5 elements things like the section tag so I personally use it.

Whether you use it and other corrective code just comes down to what browsers you decide / need to support. If it's a personal site you can do whatever you like. If it's for a client then that's different. It just depends on the target audience. If it's a shopping site for example then you wouldn't want IE users to see a broken mess. If it's a blog aimed at web designers for example then it wouldn't matter so much as most users would probably have new browsers. You can use google analytics to see what browsers your users are using and then make a decision. It can be nice to not support older browsers so you don't have to bloat things with old code.

I generally support IE 8 at the very lowest. I try when possible to just support ie9 and newer. Ios 5 and above and the more recent versions of Andriod.

Hope that answers your questions.

Cheers Richard

Ps
You can edit a post, button in bottom right next to quote.

RainForest
11-03-2014, 06:34 PM
Alrighty, then! Sounds good. Thanks for explaining everything so well.

You can edit a post, button in bottom right next to quote.For a limited time - I came back too late. :-)