FreewayTalk

18 replies to this thread. Most Recent

Caleb Grove

11 Mar 2015, 5:14 pm

Sane Styles

I just published a new article on my blog that should be very beneficial to newer Freeway users, or any users who are not accustomed to working with Freeway’s style editor: http://calebgrove.com/articles/sane-styles

Because I don’t have a comments feature on my blog, if you have any questions or ideas that would help this article become better, just reply to this thread. Fellow professionals: What tips or details did I miss? :)

quote

Caleb Grove, Grove Design

Creator of Backdraft, the free responsive framework for Freeway.

Currently being held hostage by a herd of beef cattle in rural Montana.

Joe Billings

11 Mar 2015, 5:53 pm

Great article.

Love the dark/light mode on the blog too!

Joe

On 11 Mar 2015, at 17:14, Caleb Grove <[email protected]idden> wrote:

I just published a new article on my blog that should be very beneficial to newer Freeway users, or any users who are not accustomed to working with Freeway’s style editor: http://calebgrove.com/articles/sane-styles

Because I don’t have a comments feature on my blog, if you have any questions or ideas that would help this article become better, just reply to this thread. Fellow professionals: What tips or details did I miss? :)

quote

Joe Billings

Freeway & Exhibeo: Visual web design apps for Mac


http://www.softpress.com

Caleb Grove

11 Mar 2015, 6:08 pm

Great article. Love the dark/light mode on the blog too!

Thanks Joe!

The reading modes is a feature I just added. I love dark modes for nighttime reading, so I thought somebody might appreciate it. At the very least, I learned how easy it was to work with cookies by implementing that feature. :)

quote

Caleb Grove, Grove Design

Creator of Backdraft, the free responsive framework for Freeway.

Currently being held hostage by a herd of beef cattle in rural Montana.

Joe Billings

11 Mar 2015, 6:46 pm

Another blog post perhaps? :)

On Wednesday, 11 March 2015, Caleb Grove <[email protected]> wrote:

Great article. Love the dark/light mode on the blog too!

Thanks Joe!

The reading modes is a feature I just added. I love dark modes for nighttime reading, so I thought somebody might appreciate it. At the very least, I learned how easy it was to work with cookies by implementing that feature. :)

[email protected] <javascript:;>

quote

Joe Billings

Freeway & Exhibeo: Visual web design apps for Mac


http://www.softpress.com

Caleb Grove

11 Mar 2015, 7:03 pm

Another blog post perhaps? :)

Don’t ask, my list is way too long already!

quote

Caleb Grove, Grove Design

Creator of Backdraft, the free responsive framework for Freeway.

Currently being held hostage by a herd of beef cattle in rural Montana.

Tim Plumb

11 Mar 2015, 7:36 pm

Hi Caleb, A great post and one that I think has been missing for a long while now.

There are a couple of things that I think need clarification.

You mention that the p tag will wrap most of the text on the page. Unfortunately styling the paragraph will leave things like headers and lists unstyled and displayed using the browser’s default values. To overcome this I tend to add a tag style for ‘body’ and set my default font, size, color in there. Now everything on the page will inherit these styles as all of the visual elements are children of the body. You could also add a style called #PageDiv which would have much the same effect as everything in a Freeway page is wrapped in a PageDiv wrapper.

By using the cascading nature of styles you should only need to define unique styles once rather than having to repeat font, color or whatever for each element. The tricky part in all of this is explaining the hierarchical nature of styles and how a style can cascade down through objects to influence children and grandchildren. Maybe that’s another blog post? :-)

An extension of your post might include using styles on objects. I know you mention applying type styles to containers but you can also style HTML elements using styles like background colors and images in the character section of the Edit Styles dialog. Sadly you won’t see the item in the design view update but it’s a great way to create item styles that you can easily add to numerous elements very quickly. Regards, Tim.

On 11 Mar 2015, at 17:14, Caleb Grove wrote:

What tips or details did I miss?


FreewayStyle.com - Freeway templates and parts to download, use and explore - http://www.freewaystyle.com

quote

Tim Plumb - Experienced Freeway designer for hire

FreewayActions.com - Freeware and commercial Actions for Freeway Express & Pro

FreewayStyle.com - Free Freeway templates and parts to download, use and explore

Caleb Grove

11 Mar 2015, 7:55 pm

Thank you Tim for the great feedback!

You mention that the p tag will wrap most of the text on the page. Unfortunately styling the paragraph will leave things like headers and lists unstyled and displayed using the browser’s default values. To overcome this I tend to add a tag style for ‘body’ and set my default font, size, color in there. Now everything on the page will inherit these styles as all of the visual elements are children of the body. You could also add a style called #PageDiv which would have much the same effect as everything in a Freeway page is wrapped in a PageDiv wrapper.

Goodness, my brain must have died while I was writing the article (then again, I wrote it from 11:00PM to 1:00AM last night, which is never a good idea). I’ll have to make some changes and add directions for adding a ‘body’ style.

By using the cascading nature of styles you should only need to define unique styles once rather than having to repeat font, color or whatever for each element. The tricky part in all of this is explaining the hierarchical nature of styles and how a style can cascade down through objects to influence children and grandchildren. Maybe that’s another blog post? :-)

I think I explained this, though in a very introductory manner, when I said that all of the other styles inherited the settings of the p style (though this should have been body instead). For me, personally, I learned the cascade best through trial and error – it’s difficult to explain in words, at least for me, but easy to understand once you’ve mucked around with it enough. I’ll see if I can elaborate on this some more in the “Tips and Tricks” section.

An extension of your post might include using styles on objects. I know you mention applying type styles to containers but you can also style HTML elements using styles like background colors and images in the character section of the Edit Styles dialog. Sadly you won’t see the item in the design view update but it’s a great way to create item styles that you can easily add to numerous elements very quickly.

Good idea, though I think this is a topic that is better left for another day. This blog post is meant to be an entry-level introduction to the practice of using proper styles for text, so I’ve been trying hard to avoid information overload, and instead give the readers just enough information so know how to work with it and experiment. However, I might also add this to the “Tips and tricks”.

Thanks again!

quote

Caleb Grove, Grove Design

Creator of Backdraft, the free responsive framework for Freeway.

Currently being held hostage by a herd of beef cattle in rural Montana.

Caleb Grove

11 Mar 2015, 9:38 pm

Alrighy, I updated the article to use body instead of p, per Tim’s suggestions. I also snuck in a few more screenshots and added an explanation of how a style with a name differs from a style with a tag.

quote

Caleb Grove, Grove Design

Creator of Backdraft, the free responsive framework for Freeway.

Currently being held hostage by a herd of beef cattle in rural Montana.

Thomas Kimmich

12 Mar 2015, 8:55 am

Hi guys,

nice article.

Am a year now (or even longer) on the crusade, bringing an average mortal FW-user to take care on styles.

I therefor created two screencasts and an article (yet) - mostly unrecognized and with nearby every second post, it’ll be worth to point to.

I instantly hope on a lil bit of change on the app-side (inspector), cause it’s simply impossible to convince people to follow some easy steps and rules. Give children matches and they’ll burning down the house.

Cheers

Thomas

quote

Thomas Kimmich

Kimmich DigitalMedia

http://www.kimmich-digitalmedia.com

T.+49(0)7404-914 384

Somewhere in the South of Germany

max

12 Mar 2015, 10:55 am

Hi Caleb
Great article and as others have said, it’s been one of those areas in a freeway page construction that’s been in need of a decent tutorial and a reasoning behind why it’s so necessary.

max

quote

it’s better to be lucky than clever.. :o)

TeamSDA

12 Mar 2015, 4:12 pm

Hello Caleb… Thanks for your blog post.

I remember the day I first opened that list, WOW. It is always better to have things nice and tidy. First learned about the proper use of the body tag, as Tim outlined, years ago from a Freeway contributor (Dan Jasker). This community and its contributors are most valued.

Regarding the p tag, I believe we have used it in the past to correct space before and space after issues that we encountered when working with more advanced actions and features. If I recall correctly Freeway Pro was putting default space before p tags and by adjusting the before and after properties we were able to correct this. This was back in version 6, so not sure if it still applies with 7.

One other thing that might fit into your post or possibly your more advanced future post is setting up list styles, Parent, Child and Grandchild. Again this was something we were doing in version 6, but by doing so we gained more control and were able to achieve the right look while using the proper list type for better semantic HTML.

Again, thank you for sharing and it lead me to your other posts, great resource.

Kind Regards, Dave

quote

Sutherland Design Agency - California USA

All Mac Studio - Freeway 7 Pro

Jim Feeney

12 Mar 2015, 5:44 pm

Thanks, Caleb! I’ve been using Freeway since 2004, and that’s the clearest explanation I’ve read. Some lights went on.

quote

Oregon, USA | iMac 21.5” | 3.1 GHz Intel Core i7 | 16 GB RAM | OS 10.11.6 | User since Fwy 3.5

Caleb Grove

12 Mar 2015, 6:56 pm

Thomas: I figured that you were far ahead of me on this. Do you have a public link to the article? I’d love to link to another resource. :)

Jim: Glad I could help!

Dave S: Thanks for the great feedback! I know that one of Freeway’s idiosyncrasies is scattering <p> tags far and wide, which can indeed cause layout problems in inflow layouts. However, I typically leave the top/bottom margins of p alone because it’s actually a quite sensible browser default. Instead, I make good use of the Remove Paragraph Tags action. YMMV.

quote

Caleb Grove, Grove Design

Creator of Backdraft, the free responsive framework for Freeway.

Currently being held hostage by a herd of beef cattle in rural Montana.

Thomas Kimmich

12 Mar 2015, 9:15 pm

Hi Caleb,

I think your article is perfectly fine - so nothing to add. What I did is a lil screencast which shall point out the why and how on a lower level - tinkering with paragraph and body to be seen on:

http://www.kimmich-digitalmedia.com/videos/013_thecodingepisodes_part6_the-paragraph

and the following.

The article is more meant as a proposal how a workflow can happen. The third page is as well about the idea of structuring content by styles:

http://www.kimmich-digitalmedia.com/articles/workflow-wireframe-construction

Regarding lists, I am under the impression that Ernie wrote an excellent editorial - and he has much more in his treasure box. Honestly I can’t remember where they are - so Ernie - if you’re here you could point us to there?

Cheers

Thomas

quote

Thomas Kimmich

Kimmich DigitalMedia

http://www.kimmich-digitalmedia.com

T.+49(0)7404-914 384

Somewhere in the South of Germany

Peter Laundy

16 Mar 2015, 1:22 pm

Caleb, Thanks for this. Here are a couple of wishes/clarification questions.

1 It would be useful to have guidance concerning use of h tags in various HTML5 elements. From early FWtalk posts I though it was best practice to use an h1 tag as the highest level head on a page without any specific HTML tag, but then use an h1 (likely styled differently) for the highest level head in, say, an aside or a section. Same with the lower level tags.

2 The post appears to take an “either/or” and never a “both/and” approach to tag and name, but doesn’t explicitly state never use tag and name together. As I have been doing this, I want to make sure that my practice is wrong. So, for example with heads, rather than have an h2.main, h2.section, h2.aside, I should have a plain old h2 applied across all and then a second named not tagged style (.section or .aside) applied as necessary?

3 If best practice is to apply overrides to body text to achieve different styling in paragraphs, what is the best practice use of a p tag? Is it best to simply avoid its use?

4 In your post under “I need variety”, number 4, did you mean to type “p” (as it stands) or “body”?

quote

Peter Laundy

Evanston, Illinois, USA

Caleb Grove

16 Mar 2015, 8:46 pm

Peter,

Thanks for the feedback!

  1. While I agree that this would be useful to have in a post, I think it’s another topic for another day, as it would take quite a bit of time and space to give the background explanation regarding semantics and HTML5 that it would deserve and need.

  2. You can indeed use both a tag and a name for a style. The tag gets translated into the actual HTML tag, while the name becomes a CSS class. If you use both for a style, then you will get the HTML tag with the class applied:

    <h1 class="asideHeader">This is a header to an aside</h1>
    

    This is very useful because it allows you to have different styles of h1 or any other tag.

  3. I try and avoid using the p style as much as practicable. Freeway has the tendency of wrapping every darn thing on the page in a <p>, so leaning too much on that style can cause some unexpected effects.

  4. Yep, fixed!

quote

Caleb Grove, Grove Design

Creator of Backdraft, the free responsive framework for Freeway.

Currently being held hostage by a herd of beef cattle in rural Montana.

Peter Laundy

16 Mar 2015, 9:07 pm

Can anybody suggest a good resource for h tag use when using different types of divs on a page.

Right now in addition to non-specific page level divs, I’ve got a set of sections and an aside, and don’t know whether to start highest level h tags at h1 within these, or follow Caleb’s dictum of only one h1 a page.

quote

Peter Laundy

Evanston, Illinois, USA

Thomas Kimmich

16 Mar 2015, 9:26 pm

It all depends on the planned “outline” - so it’s (to me) more a semantic aspect rather than a typical “technical” do so or so thing.

A good start:

http://html5doctor.com/outlines/

The interesting point is the “aside”. While most people call this the part to the left or right of main - it’s usually the “everything else” stuff.

This is the extended article:

http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era—webdesign-16824

So it may happen, that your planned aside is more a footer.

As Caleb already said:

Another article for another day. This is just because those new HTML5 spec is all about content.

Cheers

Thomas

quote

Thomas Kimmich

Kimmich DigitalMedia

http://www.kimmich-digitalmedia.com

T.+49(0)7404-914 384

Somewhere in the South of Germany

Back to Top

Peter Laundy

18 Mar 2015, 4:03 am

Just what I was looking for, Thomas. Many thanks to (and cheers for) you!

quote

Peter Laundy

Evanston, Illinois, USA