Inflow Layout Divs in FW7

The_Big_Erns · May 6, 2015, 9:06pm

In Freeway 7, do all inflow layout divs get a minimum styling of z-index:0?

In other words, if there are no other style attributes applied to an inline div, does Freeway 7 just always generate the lone z-index definition?

The reason I’m curious is I’ve been using Walter’s Anonymous action lately to strip ID’s from divs that I want to use common class styles. So far, it’s been very effective-- stripping the ID but leaving all classes applied to the div by the Style palette or the Extended style method. I’m wondering if I can strip ID’s from these undefined items whose only style is the z-index which, if truly necessary, can be replaced with

div { z-index: 0; }

or

div, section, main, header, footer, nav, aside { z-index: 0; }

and so forth, correcting if necessary with a more specific style.

I want to get away from Freeway’s ID-mania and use combinations of classes to style elements as groups, and not as individual items. This lets any changes apply everywhere used, and also sets up the possibility of using a single site-wide stylesheet.

Of course, ID’s have a use and my goal is not to obsolete them. I simply want to make better coded sites.

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

ThomasKimmich · May 7, 2015, 7:57am

On 6 May 2015, 9:07 pm, The Big Erns wrote:

In Freeway 7, do all inflow layout divs get a minimum styling of z-index:0?

I think, yes.

In other words, if there are no other style attributes applied to an inline div, does Freeway 7 just always generate the lone z-index definition?

Not sure, but on non-floated items, there is an overflow declaration as well so to me the possible minimum style of a div in Freeway is:

#div {
z-index: 0;
overflow: hidden
}

The reason I’m curious is I’ve been using Walter’s Anonymous action lately to strip ID’s from divs that I want to use common class styles. So far, it’s been very effective-- stripping the ID but leaving all classes applied to the div by the Style palette or the Extended style method. I’m wondering if I can strip ID’s from these undefined items whose only style is the z-index which, if truly necessary, can be replaced with
div { z-index: 0; }
or
div, section, main, header, footer, nav, aside { z-index: 0; }
and so forth, correcting if necessary with a more specific style.

I want to get away from Freeway’s ID-mania and use combinations of classes to style elements as groups, and not as individual items. This lets any changes apply everywhere used, and also sets up the possibility of using a single site-wide stylesheet.

Of course, ID’s have a use and my goal is not to obsolete them. I simply want to make better coded sites.

The point on externalizing stuff in Freeway is, that it keeps this style set #div, no matter what you do and prints it to the default style-sheet (master or page css). So cleaner code is (being pedant) “relative”, cause you carry redundant stuff with you.

Just not to misinterpret you:

You are dreaming of a page-action, kinda “Empty Box Style Remover”?

If I remember correctly, there is a page-action called “Externalize” by Tim. I loved this action cause it enabled you to capture all styles, bringing it on an empty clean external style-sheet and finally remove all and everything and slightly bring this back by classifying stuff. But this was back in the days of 5.5 - and I never gave it a go again.

For single DIV externalizing I use “ID to Class styles” action (Anonymous Extended if you want).

Cheers

Thomas

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

The_Big_Erns · May 9, 2015, 4:24am

Thomas, I suppose that I am fumbling a bit in my quest… and I am aware that the way I’m doing it now, Freeway is generating code that still doesn’t get used (the ID styles). I’ve got a long way to go.

Currently I am building my layouts in sections and they always have initially the same attributes. As you know, Freeway pedantically writes the same style code over and over for each id-- which I just find so wasteful. A few class styles can accomplish as much as zillions of id styles-- which only grow in number with each new element added.

<section class="section">
    <div class="content">
<!-- Repeat -->

Sometimes I use direct descendent selectors to achieve results with minimum styles

header, section, main, footer { 
    z-index: 0; 
    padding: 2em 0; 
}
header > div, section > div, main > div, footer > div { 
    z-index: 0; 
    max-width: 960px; 
    margin: 0 auto; 
    padding: 0 2em; 
}

This way I don’t even need classes.

But, I think that I like classes better because they can be mixed very creatively. At least, I like them best this week.

So, I am trying to find ways to leverage them for now. That’s how I noticed the z-index attribute applied to id’s.

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

ThomasKimmich · May 11, 2015, 2:52pm

Hi Ernie,

I like your approach very much and I’d like to stay a while in this discussion.

Cleaner, better, faster, shorter or more semantic code is as fundament as managing file-sizes - so all efforts are good ones.

What confuses me mostly is, how to bring this as successful as possible into a WYSIWYG surrounding. So the first thing and question I’d like to cover is:

Up to what level do we talk about “internal settings (inspector)” and “external things (extended dialogue, style dialogue or even external css)”? I mean, once you fire the ID, you unhook inspectors possibilities, which is a pity and not WYSIWYG?

Another thing stopping me these days using “external” stuff as excessive as I did in older versions are the new media types coming alongside with FW7.

Simple example would be:

####Ems on Padding and Margin

Applied a font-size to the section would allow us to scale them down on each breakpoint just by changing the font-size (fonts declared in Rems assumed). That’s what I did before 7, but now in the key-visual controlled world it seems a bit strange to do - even up to being redundant (perhaps). I simply do pixels.

Another thing i thought about is to structure the DIVs by giving them kinda role such as:

Non-semantic DIVs.
Semantic, construction-related DIVs.
Semantic content related DIVs.

This is perhaps important to me and as far as I know you, you talk probably about the 3rd division while my “section” starts with the very first DIV (the stretching 100% all across the browser window-width).

It won’t make sense so far - let’s try to tidy the mess. But I think it’s important to agree to one language (or dictionary) to cover the big questions these days.

Cheers

Thomas

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

The_Big_Erns · May 11, 2015, 4:33pm

Hey, Thomas.

I’m happy to continue this conversation, as time permits me to. For now, let me dwell on 2 things…

First, let me say that divs are not practically semantic. They do “divide” content, but only weakly and understood by all parties to do so mostly for appearance sake. However, turn a div into a section, header, body, figure or some other html5 sectioning element and you’ve elevated the semantic value of that division.

ID labeling can help you as developer understand the role of a particular div-- and I’m not opposed to that. Even when I anonymize div elements in Freeway, the id is maintained in the workspace where I can infer the role. For code viewing, I tend to use descriptive classes (section-container, content-container, etc) which serve to remind me of the div’s role.

Speaking of role, html5 uses the role attribute for assistive technologies. This can be added to the extended div description. I’m not using this yet, but eventually.

Finally, if I want to preserve some Freeway workspace wysiwyg-ness, I can set items via the inspector then override that with styles or extended styles. When the div is anonymized, it is divorced from the Inspector applied id styles… however, any classes applied through any legitimate means are preserved. So instead of a dozen divs each using the same style repeated for each unique id, they all simply use one single class style-- or if you’re clever, a combination of class styles which subset similarities.

I should, when I have time, probably work out some examples.

Best, always…

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

ThomasKimmich · May 11, 2015, 5:35pm

Cool - so let’s start with a simple example:

The first DIV I add is the 100% stretch-all-across one. In my screencasts I call this section. It has the following specs:

#section-whatever {
position: relative;
z-index: 0;
padding: 20px;
background-color: #f7f7f7;
}

Four properties, two of them theoretically redundant, one for all sections and one property which is DIV-specific.

Let’s anonymize this and turn it into an HTML5 section.

section {
padding: 20px;
}

.section-whatever {
background-color: #f7f7f7;
z-index: 1; /* if necessary */
}

It’s easy to create this class wherever you want and the background-color is also applied (WYSIWYG). So far so good.

Assumed we have 8 sections (one below the other), the ID method will cause 32 lines, by classifying it will be - hm - depending if all sections have a background color applied and z-index required 8 + 8*2 = 24.

I’d for sure use this method if the class management in Freeway would be slightly better - cause in fact it doesn’t really exist (the TAG field problem we all know).

Or do I miss here something fundamental?

Cheers

Thomas

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

ThomasKimmich · May 11, 2015, 5:44pm

Assumed we have 8 sections (one below the other), the ID method will cause 32 lines, by classifying it will be - hm - depending if all sections have a background color applied and z-index required 8 + 8*2 = 24.

Shame on me and my math!!!

It’s 1+8*2 = 17 or nearby the half:-)))))

Cheers

Thomas

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

The_Big_Erns · May 12, 2015, 6:58pm

Okay, so I have made a crude example page in Freeway 7 to show using id styles vs class styles for the same effect. File is downloadable.

http://cssway.thebigerns.com/workbench/class-vs-id-styles/

Thomas, I think that you said that you start with a wrapping element - which I also used to do. Now the PageDiv is my wrapping element… if you insert your containers into the “page” looking thing in the workspace, that is now the PageDiv element as represented in the Freeway workspace. That makes for one less div-- and is just a thought.

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

ThomasKimmich · May 12, 2015, 8:38pm

Hi Ernie,

thanks for the example.

No. I use the section exactly the same as you do. As the outer-wrapper of a single functional part. So it’s needed anyway.

I’m currently very critical in hunting after “one DIV less” for some good reasons, such as padding where I have absolutely no issue with.

We are talking the same language now - that’s what I was after. Cool - so let me mind about your basic question.

Cheers

Thomas

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

ThomasKimmich · May 13, 2015, 8:08am

OK Ernie, so let me try:

Assumed you want to get rid of an unwanted (redundant) style, the only chance I see for now is using ID2class action. That’s what I did in the past:

Applied the action, check both options available (Remove/Convert). This prints the style into the head-section. Pick it up and re-create it (in the style dialogue). I usually place it on an extra sheet and edit it from there. There you can remove those styles (or do whatever you want). Once available, uncheck the “Convert” option. Freeway removes the ID, but doesn’t print it back to the head.

I did it in my WP challenge for another reason (loop):

http://www.kimmich-digitalmedia.com/videos/007_wpc-ids-to-class-more-valid-html

and I remember another need for this procedure where the position property destroyed a “scroll to fix” script.

Naturally there is the downside of doing this on each DIV ever and ever again, so worth to do just because of this one liner?

So what could be a better option?

Don’t declare the z-index for relative positioned items at all. This would be Towers’ Task!!

What do you think? Or do I still misinterpret you?

Cheers

Thomas

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