External Stylesheet Guide

That time has come and I need to work on a a site where I need to have all the CSS in its own file. Is there a definitive how-to-guide/tutorial for using external Stylesheets.

Thanks
Marcel


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

Are you saying you will you be writing your own 'sheets from scratch or using actions to move inline styles to an external stylesheet? I assume this will be a FW site?

Todd

That time has come and I need to work on a a site where I need to have all the CSS in its own file. Is there a definitive how-to-guide/tutorial for using external Stylesheets.


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

Yes it will be a FW site. I’m really trying to establish a best practices route to see what will be the best way to do this. Either using the FW Actions method or I can use CSS Edit to write my own sheet.

Marcel


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

Obviously writing your own 'sheet will give you the greatest freedom and if you’re ok going that route I would start there.

Beyond that I don’t know of a definitive guide to external 'sheets. Like most of this stuff it’s open to interpretation as to what works best for you. Like most I organize/write my 'sheets into sections with a fair bit of commenting to help me find things quickly. Also, when and where I can I prefer to structure my CSS similar to html to mimic the site structure and further help with visual organization. I also combine similar selectors on one line, such as width, height or font-related items. How you choose to do that is entirely up to you, it’s personal choice.

There’s no right or wrong way as to how you organize your CSS. But if you let FW do it for you then you’re at the mercy of how FW writes it. Big difference.

Todd

Yes it will be a FW site. I’m really trying to establish a best practices route to see what will be the best way to do this. Either using the FW Actions method or I can use CSS Edit to write my own sheet.


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

I think the fresh sheet from CSS Edit will do it. I also like to have a lot of commenting and organize the css in the way the page html is ordered - just make is easier to find stuff and it is and looks organized. I also want to avoid stuff like FW’s way of writing 2 body tags and usually when you hand the site over to other devs they freak out when they see f-x2 and f-x3.

Marcel


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

Even when using the external stylesheet option in FW you will still need to use actions to clean up as much of the remaining CSS from the page. Unless things have changed my guess is that there will still be some CSS left in the page because of how FW functions. You’ll be able to clean it up a lot but it will never be as squeaky clean as it could be, though that might not be a problem worth worrying about.

Todd

I think the fresh sheet from CSS Edit will do it. I also like to have a lot of commenting and organize the css in the way the page html is ordered - just make is easier to find stuff and it is and looks organized. I also want to avoid stuff like FW’s way of writing 2 body tags and usually when you hand the site over to other devs they freak out when they see f-x2 and f-x3.


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

You will loose a lot of the FW wysiwyg functionality when you strip out all the inline stuff. As much as what I love FW’s speed of putting a page together, sometimes I think just to code it manually will be better in the long run.


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

I agree and that’s part of why I moved away from FW. If you’re comfortable coding your own 'sheets then I would bet you’ll probably be happier in the long run because you can do things the way you want with less fuss. But that’s just my opinion.

Todd

sometimes I think just to code it manually will be better in the long run.


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

What I do, is I start with Freeway Pro - usually a master template I’ve
made over time - and I leave the styles in the head. I simultaneously open
the output page in Coda where I will wrangle styles that are giving me
problems, or experiment with their appearance or behavior. When I have a
satisfactory solution, I switch back to FWP and move the window down until
I can see Coda and the code that I want to replicate. Then I recreate the
styles in FWP’s Style Editor, or by extending the element styles.

Once I have what I want, my next step has been to externalize the code. I
am experimenting with a new way to do this - using mainly Tim Plumb’s
experimental Externalize action. Previously I had created a second FWP
stylesheet which I manually entered inline styles to, but that is so
labor-intense and unfriendly to alterations. Externalize does this for you
more quickly and automatically, and although the resulting css file is not
in the css folder, I am coming to think of it as okay - especially as it is
inline styling that is dealt with mostly.

Hope this brief outline is helpful


Ernie Simpson

On Wed, Nov 7, 2012 at 12:52 PM, Helveticus email@hidden wrote:

Yes it will be a FW site. I’m really trying to establish a best practices
route to see what will be the best way to do this. Either using the FW
Actions method or I can use CSS Edit to write my own sheet.


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

Looking at the source from the Exhibeoapp website it looks like FW6 is following Tim Plump’s externalize action method. Not sure because it is only a one page website and it’s the first thing we see from FW6, no inline styles anymore but instead a lot of css files.

http://exhibeoapp.com/css/sheet1.css
http://exhibeoapp.com/css/master.css
http://exhibeoapp.com/css/index.css
http://exhibeoapp.com/fonts.css

It should be nice if FW6 has only one style sheet and a CSS editor, wow.

On Wed, Nov 7, 2012 at 12:52 PM, Helveticus email@hidden wrote:

Yes it will be a FW site. I’m really trying to establish a best practices
route to see what will be the best way to do this. Either using the FW
Actions method or I can use CSS Edit to write my own sheet.


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

Ernie, thanks for the outline, right now everything is helpful.

It should be nice if FW6 has only one style sheet and a CSS editor, wow.

We can only hope - the pessimist in me is not holding his breath.

Marcel


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