A lil bit of fun - My first WebPage ever

Freeway
21

Bingo! Well done, Kelly.

For anyone else listening who may not be clear on it, the same id can be used on different pages, just not more than once on any given page.

Todd

An id is used to specify a style for a single, unique element. A class is used to specify a style for a group of elements.

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

22

On 14 Dec 2013, 3:30 pm, The Big Erns wrote:

Almost all stylesheets are produced by Freeway Pro - the only one I wrote
directly is the devices (responsive) stylesheet.

Of course, that lets me comment further and point out that my thing is
mainly about controlling what Freeway Pro does, influencing even the code
it produces. So it’s fair to say that FWP is indirectly producing my
code. If you accept that, then surely the answer to why my page or CSS code
looks different would simply be due to my exercising a greater level of
control of what the application is doing.

Okay, I accept that. This has been one of my pet peeves with Freeway Pro for a long time. Obviously, the code FWP generates, without any massaging, is technically valid. It’s just not pretty.

However, I still don’t understand how you were able to clean up the FWP code. And how did you introduce your own custom written css (devices.css) into a FWP document? Is that another action?

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

23

I just checked out some of the websites I designed and clearly I need to employ the IR technique for semantics sake. Can somebody point me to a “How To” thread on this subject as it relates to FWP?

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

24

I don’t think I’ve ever known of another FW user who is as adept at controlling FW’s output as Ernie. Or as willing to put in the effort. I’m often amazed at what he achieves with regard to FW’s generated code. Well done, TBE.

Todd

Of course, that lets me comment further and point out that my thing is
mainly about controlling what Freeway Pro does, influencing even the code
it produces. So it’s fair to say that FWP is indirectly producing my
code. If you accept that, then surely the answer to why my page or CSS code
looks different would simply be due to my exercising a greater level of
control of what the application is doing.

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

25

Okay, I accept that. This has been one of my pet peeves with Freeway Pro
for a long time. Obviously, the code FWP generates, without any massaging,
is technically valid. It’s just not pretty.

However, I still don’t understand how you were able to clean up the FWP

code…

Okay, maybe I need to make sure that I am crystal clear here. I DO NOT
massage the code FWP produces after it is produced… how I use FWP
determines how FWP writes the code. Granted, the ability to prettify or
minify the code is part of the application and it follows it’s own rules
for that. If I had my way, every colon in the CSS code would be followed by
a space and every style rule would end with a semicolon - but that’s just
me.

Remember, everything you do in FWP is interpreted by FWP and rendered into
code. Draw a box with the Layout button set to Layers and you get a div.
Draw the same thing with the Layout button set to Tables and you get a
table. There you are, controlling what FWP does.

Part of the battle is understanding the relationship between your actions
and how FWP interprets them. The other part is knowing what it is you want
to produce specifically. You must have an idea of what you want to produce
code-wise before you can attempt to make Freeway Pro do your bidding in
that regard.

For example, I like unordered lists, but I rarely want them to have
bullets. If you make a list style in FWP and choose round bullets, FWP will
make your list an unordered one. But if you choose no bullets, FWP will
make your list as a definition list (a malformed one at that). So what I do
is make a round bullet list style, then in the Extended option create the
rule

list-style: none
padding-left:0

Boom. I just tricked FWP into writing an unordered list with no bullets or
spacing for them. Using the Extended option in most cases will let you
“rewrite” the style code that FWP would normally produce - you just need to
know what that normal code is.

Another thing that makes my code nicer is that I try to find the simplest
way to apply styles. For example, it is inherent that all noobs style all
their text with classes, so that every single paragraph of ordinary body
text looks like this:

<p class="styleXYZ">Blah blah blah ad infinitum</p>
<p class="styleXYZ">They do the same thing with headers as well</p>
<p class="styleXYZ">Do you get what is wrong with this picture yet?</p>

HTML already gives us a p tag for common text, and h(n) tags for headers.
Instead of bloating the page with unnecessary class styles, why not focus
on what is already there. So taking advantage of existing structure results
in cleaner, more easily viewable code. Likewise, CSS is incredibly flexible
that a little creative thinking will allow you to do the same thing in a
different way, giving you more options than simply mashing classes into
everything.

It also helped me as a designer to try and not micromanage (!) the design
so much - choosing to have fewer levels of complexity to increase the
fluidity of the construction. I admit it was hard to let go of the idea
that design was something for me to steer and control - when really I was
more like a passenger on something that changes and reacts to things I
cannot control. Planning for small shifts (and sometimes big ones) while
still looking fabulous is a tough job, and I would argue it’s the least
tough thing about web design.

And how did you introduce your own custom written css (devices.css) into a
FWP document? Is that another action?

There are actions for that, but it is the simplest thing to do it yourself.
You know the custom css file must be uploaded, so I might use the good old
Upload Stuff by Tim Plumb to automate this… the alternative is to do it
manually every time. Then I just write a snippet of code in the Page > HTML
Markup section before the /head section.

Todd, thanks for the acknowledgement. I think the secret is actually caring
about the code that is produced and my stubborn Scot ancestry :slight_smile:

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

26

I think I understand, but let’s make sure.

Here’s an example of css code for one of your pages:

body {
    color: #b2b2b2;
    font-family: 'Alegreya', serif;
    font-size: 62.5%;
    margin: 0px;
    background-color: #242423;
    height: 100%
}

Now, here’s css code for one of my pages:

body { font-size:62.5%; margin:0px; background-color:#0079c1; height:100% }

It sounds like rather than using the FWP dialog to create the code, you’re hand keying the specifications through the extended option. Is that correct?

K

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

27

Oh no, not always and not with this example.

Freeway will write your CSS code this way if you choose “More Readable”
from menu File > Document Setup > Output > HTML code and select to output
External Stylesheets.

This is very similar to my hand-coding as this is very easy to read, edit
and annotate. But this was generated by FWP.

–
Ernie Simpson

On Sat, Dec 14, 2013 at 5:41 PM, RavenManiac email@hidden wrote:

I think I understand, but let’s make sure.

Here’s an example of css code for one of your pages:

body {
    color: #b2b2b2;
    font-family: 'Alegreya', serif;
    font-size: 62.5%;
    margin: 0px;
    background-color: #242423;
    height: 100%
}

Now, here’s css code for one of my pages:

body { font-size:62.5%; margin:0px; background-color:#0079c1; height:100% }

It sounds like rather than using the FWP dialog to create the code, you’re
hand keying the specifications through the extended option. Is that correct?

K

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

28

Are you sure? I have never seen FW writing this kind of tidy code :slight_smile:

Freeway will write your CSS code this way if you choose “More Readable”
from menu File > Document Setup > Output > HTML code and select to output
External Stylesheets.

body {
   color: #b2b2b2;
   font-family: 'Alegreya', serif;
   font-size: 62.5%;
   margin: 0px;
   background-color: #242423;
   height: 100%
}

Op 15 dec. 2013, om 24:58 heeft Ernie Simpson email@hidden het volgende geschreven:

Oh no, not always and not with this example.

Freeway will write your CSS code this way if you choose “More Readable”
from menu File > Document Setup > Output > HTML code and select to output
External Stylesheets.

This is very similar to my hand-coding as this is very easy to read, edit
and annotate. But this was generated by FWP.

–
Ernie Simpson

On Sat, Dec 14, 2013 at 5:41 PM, RavenManiac email@hidden wrote:

I think I understand, but let’s make sure.

Here’s an example of css code for one of your pages:

body {
   color: #b2b2b2;
   font-family: 'Alegreya', serif;
   font-size: 62.5%;
   margin: 0px;
   background-color: #242423;
   height: 100%
}

Now, here’s css code for one of my pages:

body { font-size:62.5%; margin:0px; background-color:#0079c1; height:100% }

It sounds like rather than using the FWP dialog to create the code, you’re
hand keying the specifications through the extended option. Is that correct?

K

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

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

29

I was going to say the same thing. Freeway, in more readable mode and external stylesheets mode, still outputs one-rule-per-line style CSS. It had better – my Style Accessors Action library counts on that being true!

Walter

On Dec 14, 2013, at 7:19 PM, email@hidden wrote:

Are you sure? I have never seen FW writing this kind of tidy code :slight_smile:

Freeway will write your CSS code this way if you choose “More Readable”
from menu File > Document Setup > Output > HTML code and select to output
External Stylesheets.

body {
  color: #b2b2b2;
  font-family: 'Alegreya', serif;
  font-size: 62.5%;
  margin: 0px;
  background-color: #242423;
  height: 100%
}

Op 15 dec. 2013, om 24:58 heeft Ernie Simpson email@hidden het volgende geschreven:

Oh no, not always and not with this example.

Freeway will write your CSS code this way if you choose “More Readable”
from menu File > Document Setup > Output > HTML code and select to output
External Stylesheets.

This is very similar to my hand-coding as this is very easy to read, edit
and annotate. But this was generated by FWP.

–
Ernie Simpson

On Sat, Dec 14, 2013 at 5:41 PM, RavenManiac email@hidden wrote:

I think I understand, but let’s make sure.

Here’s an example of css code for one of your pages:

body {
  color: #b2b2b2;
  font-family: 'Alegreya', serif;
  font-size: 62.5%;
  margin: 0px;
  background-color: #242423;
  height: 100%
}

Now, here’s css code for one of my pages:

body { font-size:62.5%; margin:0px; background-color:#0079c1; height:100% }

It sounds like rather than using the FWP dialog to create the code, you’re
hand keying the specifications through the extended option. Is that correct?

K

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

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

30

I’m not sure what to say… the Bradford site is built with FWP6 and was last
updated today. Every FWP css file is prettied. I didn’t do that.

My local css folder was also pretty - however, after deleting and
regenerating, they look like Kelly’s example. And here I thought Freeway
was making such pretty code :frowning:

I was going to say the same thing. Freeway, in more readable mode and
external stylesheets mode, still outputs one-rule-per-line style CSS. It
had better – my Style Accessors Action library counts on that being true!

Are you sure? I have never seen FW writing this kind of tidy code :slight_smile:

–

–
Ernie Simpson

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

31

Memories, memories…. Walter! We used GoLive for quite a while for the first website for (print) magazine publishing business. The website was originally set up and run by my husband and then I continued with it before eventually switching to Freeway after moving onto digital publishing for books and magazines and onwards to websites.

On 14 Dec 2013, at 12:35 am, Walter Lee Davis email@hidden wrote:

I think I started with Claris HomePage, or something of that ilk, in early 1995 or 6. I remember trying GoLive when that was the name of the company. In November 1997 I picked up Freeway 1 (still beta) and used it to make a new Web site for the agency where I worked. There had been two abortive attempts by the agency leaders prior to that, with all-hands meetings, outside consultants, much pizza eaten, and little accomplished in total. There was talk of making the site “sticky” and what-not. Too many hands in the job, and nobody was ultimately responsible.

I was at loose ends, because a new team of creative directors had been hired, and the chemistry was really bad. (The previous creative directors were still there, also in limbo, and they had hired me, so I was tainted.) I found a junior copywriter with nothing billable to do, and between the two of us (and the IT guy, who wrote a form handler in classic ASP, and figured out hosting for us) we built a complete 100-page Web site with a full portfolio and bio section in less than a month. We launched at the agency Christmas party.

At that point, all of the account executives came out of the woodwork with projects for us to do. A senior executive appointed himself our team leader, and I became the creative director of the new Web group. It was a major turning point in my career (arguably saved me from the dole at the time) and I’ve been eternally grateful since.

Walter

On Dec 13, 2013, at 3:38 AM, Thomas Kimmich wrote:

But I know that you are one of the real Dinos starting with 1.0 in the back-days of 1998 (?) - that’s still impressive.

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

32

On 14 Dec 2013, 11:42 pm, The Big Erns wrote:

I’m not sure what to say… the Bradford site is built with FWP6 and was last
updated today. Every FWP css file is prettied. I didn’t do that.

My local css folder was also pretty - however, after deleting and
regenerating, they look like Kelly’s example. And here I thought Freeway
was making such pretty code :frowning:

Ernie Simpson

That’s odd. I wonder why it changed.

Your external stylesheets are still formatted well though. I just checked my FWP document for the website I pulled the css code from and my document settings are just as you described, so I’m not sure why I’m getting a different format than you.

Walter, why do your actions care? Don’t they read the code the same way, even though it may be formatted differently?

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

33

They use regular expressions to parse out the rules that apply to a particular element in an external stylesheet. Freeway will give me a “normalized” form of the styles that it has written, but any override styles set by other Actions using my accessor library will need to be attacked using brute-force means. And multi-line regular expressions are difficult in the version of JavaScript in Freeway’s Actions API.

Walter

On Dec 14, 2013, at 8:16 PM, RavenManiac wrote:

Walter, why do your actions care? Don’t they read the code the same way, even though it may be formatted differently?

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

34

Hi Ernie,
If you aren’t using the Externalize Action (http://www.actionsforge.com/actions/view/301-externalize) to beautify the styles and you’re doing this in the application somehow then I’d be keen to find out how as I find reading styles formatted by Freeway a bit of a chore.
Thanks,
Tim.

On 15 Dec 2013, at 00:42, Ernie Simpson wrote:

My local css folder was also pretty - however, after deleting and
regenerating, they look like Kelly’s example. And here I thought Freeway
was making such pretty code :frowning:

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

35

Well, this is still a mystery to me.

I had the same thought Tim, as the Externalize action does prettify the css
sheets… but it isn’t in use in the document. If I’d briefly used the
Externalize action at a final stage of development - say, in an
unsuccessful effort to move head styles generated by other actions out to
the external sheets - then removed it afterwards… could the css sheets have
survived the dozens of updates since - tweaking everything but the styles?
All I did checking it now for Kelly was to force republish - something I do
religiously.

I use Coda 2 with a plugin to prettify/minify both html and css when I am
working manually. I would not have opened so many files just to make the
code look nicer.

On Monday, December 16, 2013, Tim Plumb email@hidden wrote:

Hi Ernie,
If you aren’t using the Externalize Action (
http://www.actionsforge.com/actions/view/301-externalize) to beautify the
styles and you’re doing this in the application somehow then I’d be keen to
find out how as I find reading styles formatted by Freeway a bit of a chore.
Thanks,
Tim.

On 15 Dec 2013, at 00:42, Ernie Simpson wrote:

My local css folder was also pretty - however, after deleting and
regenerating, they look like Kelly’s example. And here I thought Freeway
was making such pretty code :frowning:

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

–

–
Ernie Simpson

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