I would recommend that you take a big step back, look at what you are
trying to accomplish when it comes to styles, and then figure out how
to do that in Freeway. “Dance with who brung ya”, as they say in
Texas. In Freeway, that means use the tools exposed through the Styles
palette and the Inspector.
You have a LOT of extra fun stuff happening in the MonumentMaker site,
lots of very nice JavaScript and all that. If I recall correctly, you
are also using Expression Engine for parts of this, too. I would posit
that you are at the very sharp end of the cutting edge of Freeway use
with this site, and can expect a few bruises along the way. For most
people, for most sites, it’s fairly simple to do most things, and
that’s quite a miracle when it comes to HTML+CSS.
What I have found in many years of hand-coding CSS for dynamic sites
is that it is very easy to paint yourself into a corner with too-
specific styles. And once you get a few too many steps into the
process, it is equally easy to lose track of what’s styling what. Xyle
scope is incredibly useful in untangling these knots after you’ve tied
them, but the easiest way to keep them from becoming an issue is to
look for opportunities to do less.
Want all the links on your page to have a consistent style, but
different sizes and colors? Make a set of link styles at the body
level that leave out the color, and a set of link styles at the local
level that tweak only the color. Or if your colors can stay the same,
then only tweak the size. All of this is do-able in Freeway using the
regular interface – no extra styles or extended dialog needed.
Try this on a new blank document. Click on the pasteboard, then click
on the paintbrush tab in the Inspector. Create your link styles for
the entire page, setting the underline, background color, and as
little else as possible. Click in the Style palette, create a new
style with the Tag ‘body’, and nothing at all in the Name field. Set
the basics of your text style for the entire page here. If you can,
set as much of the details as possible. Every other tag inherits from
body, so any attribute you set here will “cascade” down to every other
styled element on the page.
Now, start laying out your page. As you go along, resist the urge to
style anything specifically. Use structural tags, like h2 and h3 (and
go ahead and add h4, 5 and 6 if you like) to indicate the relative
priority of the page elements. If you find yourself in a situation
where you want to change something drastic, like maybe the font color
in an entire HTML box, then create a new class style (no Tag, and some
Name) which carries the new font color or other textual attributes,
and apply that style to the HTML box – not the text inside it.
The key to this method of work is to resist the urge to style things
locally. The reason that you had to get so specific with your link
styles is because there were other styles of higher priority
overriding what you thought were locally important choices. A style
that descends from an ID is 10 times as important as a style that
descends from a Class, which is in turn 10 times as important as a
style that descends from a Tag (all other things being equal). Again,
Xyle scope can be a big help here in figuring out the priorities. When
you click on an element, it shows you the cascade of styles, all the
way back to the body and the html, that apply their rules to the
selection, and it shows the numeric priority of each rule along with
listing them in descending order of importance.
I suspect that a lot of the problems you’re experiencing with your
current site is due to the fact that it’s grown over time, and you’ve
added visual elements in an organic manner. There is nothing at all
wrong with this – it’s how I work most of the time! But it does lead
you into ugly corners where it’s very hard to get back out without
resorting to ultra-specific tags like #item4 #item3 #item2 p.somestyle a span.link or something equally awful.
One very useful exercise would be to open up a browser window next to
a new Freeway document, and try to build a page from your site from
scratch, following some of the principles I’ve outlined here. If you
don’t have two monitors or a Cinema display, then take a screenshot,
add it to your page as a locked layer, and start duplicating the page
over the top of it. I would bet you a large sum of imaginary money
that you will find relatively easy ways to duplicate a design that
“grew” over time. Easier AND more rational, style-wise.
Walter
On Feb 14, 2009, at 9:29 AM, atelier wrote:
How much more need we to know? My site is now appr. 60% handcoded.
One more step and I do not need FW anymore. I’ll spend my time
learning HTML and CSS with a text-editor in stead.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I teach my students exactly the same. Making a sculpture is a constant balance between the frontal approach (which is what we want in our enthousiasm) taking steps back to look from a distance, forseeing trouble miles ahead, and the correct use of the right tools. Talking about tools, when it comes down to Freeway and Expression Engine, I still think that these two can be like a match made-in-heaven. I do hope that the evolution of FW moves more and more towards developing dynamic sites.