CSS reset

If I want to utilise a CSS reset in my FW pages what is the best way to implement it?

I could add a link to my reset stylesheet in Page>HTML markup but as far as I can see the only way to ensure that it comes before any FW generated styles would be to put it in After Head. But that places it before any Meta data etc. and I am not sure that is acceptable.

Any thoughts?

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I could add a link to my reset stylesheet in Page>HTML markup but as
far as I can see the only way to ensure that it comes before any FW
generated styles would be to put it in After Head. But that places
it before any Meta data etc. and I am not sure that is acceptable.

The charset meta should come before anything else (best practices,
from what I’ve learned), although whether it will break in a browser I
can’t say. Try it and see what happens.

What about importing the external “reset” css into the FW doc? Would
it get placed before or after the default css?

Todd


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

What about importing the external “reset” css into the FW doc? Would it get placed before or after the default css?

There is the problem - unless you use an external stylesheet incorporating the reset CSS I cant see how you can place the reset CSS after the Metadata and before the FW generated styles without using Source Code Snooper or similar.

Just trying to keep it as simple as possible.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Just bumping this into the attention zone of you CSS experts out there - you know who you are!

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On Jun 3, 2011, at 7:27 PM, DeltaDave wrote:

Just bumping this into the attention zone of you CSS experts out there - you know who you are!

Hi Dave,

I’ve looked at this for a while and I just don’t see how to do it without breaking best practices. It would seem Freeway just doesn’t offer enough granular control over placing external files or ordering the styles within its own stylesheet. It’s a painfully simple thing to do manually, but I know that doesn’t solve the FW issue.

Todd


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Dave,

You can reset the CSS in Freeway but you’ll find that:

a) Freeway already resets the things it needs to reset to make your pages look the same from browser to browser
b) A lot of the things that get reset won’t show up in Freeway’s design view so WYSI N WYG

To make sure your reset CSS doesn’t get overridden just make sure it appears after Freeway’s style block or the link to the external CSS file.

Hope this helps,

Joe

On 4 Jun 2011, at 03:38, Todd wrote:

On Jun 3, 2011, at 7:27 PM, DeltaDave wrote:

Just bumping this into the attention zone of you CSS experts out there - you know who you are!

Hi Dave,

I’ve looked at this for a while and I just don’t see how to do it without breaking best practices. It would seem Freeway just doesn’t offer enough granular control over placing external files or ordering the styles within its own stylesheet. It’s a painfully simple thing to do manually, but I know that doesn’t solve the FW issue.

Todd


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 4 Jun 2011, at 08:17, Joe Billings wrote:

To make sure your reset CSS doesn’t get overridden just make sure it appears after Freeway’s style block or the link to the external CSS file.

Actually, on reflection you will want to make sure you add the reset CSS before Freeway’s style block, otherwise you will be resetting what you have set in Freeway.

Joe


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Joe

Surely if I reset after FW’s style block then there is no point in using FW’s styyling at all.

I understand it that the reset should come first - to create essentially a blank canvas - before applying the FW generated or external styles?

You say

a) Freeway already resets the things it needs to reset to make your pages look the same from browser to browser

Can you explain this? I am not aware of FW zeroing margins etc. Surely only styles generated within FW are applied.

Would it be possible, through an action, to place a link to or reset code for a reset that would come in before FW’s style block.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I took so long to type my reply (while eating my toast) that your second post came in after I sent it!

What about the action idea?

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’ve been using CSS resets for a while now and have been using this recently:

http://necolas.github.com/normalize.css/

It seems to be a bit more up-to-date than the Eric Meyer version.

Freeway already resets the things it needs to reset to make your pages look the same from browser to browser

I totally disagree with Joe’s statement about Freeway already resetting your pages to make them look the same from browser to browser. If you applied the reset to your page and compared it to what Freeway does within a page you would see how a complete reset is more beneficial. There are so many tags that Freeway does not reset or change that would affect added in markup and other types of web content that Freeway just doesn’t touch.

In the end though I end up slimming down the reset to only affect content I use on my site.

For further elaboration take a look at the Eric Meyer CSS Reset:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

So Dan - I assume that you use external stylesheets incorporating your reset css into them.

I would like the simpler approach, a quick way of bringing in my reset code without having to externalise my stylesheets first.

There has to be an easy way?

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yes, I do start my CSS sheet with a total Eric Meyer CSS reset. Modified in some ways of course, but on my existing work site and my store site, they both use the reset out of the gates. To simplify things, I’m sure you could run through the Eric Meyer CSS Reset code there and know, or figure out, what each property is and the corresponding value for each CSS rule there.

Off the top of my head I could think of two ways to incorporate it into Freeway.

First, would be to go through the reset CSS and add those rules into Freeway manually. It would be a copy and paste pretty much or you could try importing the stylesheet using Freeway. Probably the best method.

Secondly you could use the “Use External StyleSheet” action to attach the reset sheet. (If you’re using WebYep though make sure to remove the adjustments for “code” or that lovely SEO bar will have issues at the top of viewport window.)

Lastly, would be to wait to see if SP could come up with some way because this whole CSS reset is really on the fence in the web community. Those that oppose the reset say that you’re just supporting bloated code because who uses all those rules and browser features. You end up having to style the paragraphs, headers, blockquotes anyways so why do it twice. On the flip side people use it for consistency and don’t mind that it takes extra work to get things correct.

Kind of a pick your own poison scenario I suppose.

Plus, I read this article here and it helped:

Doesn’t always have to be the Eric Meyer one as you can see there are other alternatives.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

you could use the “Use External StyleSheet” action to attach the reset sheet

Tried that but unfortunately the stylesheet is inserted after the FW generated styles - really want it in there before.

Never mind I will keep searching for the answer.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You will need to experiment with this, because Freeway orders its
rules alphabetically by selector, and you can’t override that. So any
rule set that relies on the order of preceding rules (or existence of
those preceding rules) in order to have a precise effect will be
modified, often in very subtle ways.

Walter

On Jun 5, 2011, at 1:07 AM, Dan J wrote:

First, would be to go through the reset CSS and add those rules into
Freeway manually. It would be a copy and paste pretty much or you
could try importing the stylesheet using Freeway. Probably the best
method.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

This was deliberate on my part, because often you need to override
Freeway-set rules, so this Action places its style rules after
Freeway’s, and gives you a clean shot at them.

I could modify the Action to insert a reset.css before all other
styles if you like, wouldn’t take much effort. If you send me such a
sheet, I can add it to the bundle, and maybe even add a selector to
the Action where you can choose a reset sheet to go before the rest of
the sheets you’re attaching.

Walter

On Jun 5, 2011, at 8:49 AM, DeltaDave wrote:

you could use the “Use External StyleSheet” action to attach the
reset sheet

Tried that but unfortunately the stylesheet is inserted after the FW
generated styles - really want it in there before.

Never mind I will keep searching for the answer.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I could modify the Action to insert a reset.css before all other styles if you like, wouldn’t take much effort. If you send me such a sheet, I can add it to the bundle, and maybe even add a selector to the Action where you can choose a reset sheet to go before the rest of the sheets you’re attaching.

To pick a specific reset CSS file to use I think would not be ideal as any reset css is generally modified to suit your own site - but if I had to choose one it would probably be the Meyer reset CSS Tools: Reset CSS

But an option to choose your own would be the dog’s bo****ks

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay, but Rosie’s a girl, ergo, no bollocks…

http://www.actionsforge.com/actions/view/23-ess-use-external-style-sheet

Walter

On Jun 5, 2011, at 12:14 PM, DeltaDave wrote:

I could modify the Action to insert a reset.css before all other
styles if you like, wouldn’t take much effort. If you send me such
a sheet, I can add it to the bundle, and maybe even add a selector
to the Action where you can choose a reset sheet to go before the
rest of the sheets you’re attaching.

To pick a specific reset CSS file to use I think would not be ideal
as any reset css is generally modified to suit your own site - but
if I had to choose one it would probably be the Meyer reset CSS Tools: Reset CSS

But an option to choose your own would be the dog’s bo****ks

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thats fantastic Walter but brings me back to my OP about the link to the reset stylesheet coming in After Head and before any Meta Data and was that semantically correct.

Because if it is then me adding it via Page>HTML Markup was fine and I have made you work on something unnecessarily. Though I have no doubt it will benefit others.

<head>
<link rel="stylesheet" type="text/css" href="Resources/reset.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-Language" content="en"/>
    <title>My Page</title>
<meta name="viewport" content="width = 960, minimum-scale = 0.25, maximum-scale = 1.60"/>
<meta name="GENERATOR" content="Freeway 5 Pro 5.5.7"/>

As always your labours are much appreciated.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If you care, it will not validate as XHTML (it does as html4.1) but
may still work as expected nonetheless. I’ve read that IE may choke on
it if a doc type is not specified though.

Todd

Thats fantastic Walter but brings me back to my OP about the link to
the reset stylesheet coming in After Head and before any Meta Data
and was that semantically correct.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’ve read that IE may choke on it if a doc type is not specified though.

My snippet was not all of what is declared in the page though and FW does declare the DOCTYPE religiously.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
etc.
etc.

But do you mean that it will not validate as HTML Strict with the link to the stylesheet coming before the Meta Data structure?

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options