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? :slight_smile:


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

Great article.

Love the dark/light mode on the blog too!

Joe

On 11 Mar 2015, at 17:14, Caleb Grove email@hidden 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? :slight_smile:


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

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. :slight_smile:


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

Another blog post perhaps? :slight_smile:

On Wednesday, 11 March 2015, Caleb Grove email@hidden 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. :slight_smile:


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


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

Another blog post perhaps? :slight_smile:

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


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

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? :slight_smile:

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


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

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? :slight_smile:

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!


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

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.


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

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


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

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


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

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


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

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


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

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. :slight_smile:

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.


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

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


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

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”?


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

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!


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

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.


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

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:

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


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

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


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