These days I've been going through the skin files and trying to simplify some stuff. To little avail, though... It's still kind of messy.
Still, I've been thinking about the sidebar system (cf. my talk with Emanuele), and was reminded of two things:
- the macro system is really powerful and great,
- it's totally going to confuse themers.
Well, to be honest with my greatness, it's not that hard to understand: <we:sidebar> holds the sidebar code, <we:offside> has the main content, etc... And 'sidebar' is defined in the index template, as well as in <skeleton> tags in sub-skins. So far, so good.
Now, I've always considered Weaving to be a skin that really, really should require as little 'hacking' as possible.
In Wedge, by default, the sidebar has two different codebases:
- IE6/IE7 use a table-based layout (<table> tags)
- Other browsers use table emulation (<div> tags with display:table on them)
It's okay because it explains how flexible the system is.
Now, if we delve into sub-skins, the skeleton is modified. When it comes to Warm, it's okay that it's modified because the sidebar position really is quite removed from the original layout. It's a great example of what you can do with careful planning.
But in Wine, the skeleton is modified so that the sidebar can be shown on the LEFT of the screen instead of the right. It's just an example, of course -- but it's still completely silly to change the HTML for what can be done in CSS.
Well, in my defense, back then I didn't know that table cells could be swapped with CSS. I learned about that some time ago, that you just need to apply 'direction: rtl' to the parent display: table, and 'direction: ltr' to its children. And it works perfectly. Despite it being a 'dirty hack', it's still extremely simple to apply and even to understand -- and it has the added benefit of leaving the sidebar contents where it belongs, i.e. at the end of the HTML source. (Heck, I'm even considering pushing the menu into a display:table of its own, and using display:table-header-group to move it to the top regardless of its position in the source...)
Okay, so far so good. I'm definitely doing that. I only need to redefine the skeleton once (in Warm), and Wine is left alone. Consider it an 'announcement' of a change I'll commit soon. What matters right now is IE 6/7.
Now, when it comes to them, doing table-based layout is cooler in my opinion, but a more realistic way of handling them would be to instead use the negative margin hack to show the sidebar correctly. i.e., by putting a negative right margin on the main contents and a positive right margin that compensates for it right in the first nested div, I can easily put a right-floated sidebar on the right. It's a proven method, and has no drawbacks -- except that it's not a proper 'column' that shows up, instead just a floated sidebar, meaning that if you set a background color on the sidebar, it only extends as far as the sidebar contents will extends, rather than filling the entire sidebar.
It's a well known problem.
It can also be fixed by using faux columns or other alternative tweaks for IE that are also well documented. But it just adds to the bloat and limits extensibility.
So... Here's my question, basically (and as TL:DR).
When it comes to IE6/IE7 compatibility, what would you prefer to have by default in the skins provided in Wedge?
1/ What exists right now, i.e. the <div>s are replaced on-the-fly to simple <table> tags for IE6/7 only?
2/ A simple CSS float hack that positions the sidebar <div> correctly but doesn't extend the sidebar to the full height?
3/ A complicated CSS hack that positions the sidebar <div> correctly and extends the sidebar just like (1) would do?
4/ Like (3), but applied to all browsers, instead of using the more logical 'display: table' setting? (<-- don't bother, that one's just troll bait :P)
As a reminder - none of these change anything for non-IE browsers. They will *always* use <div> tags. Also, I'm still considering the possibility of allowing for the sidebar to be removed (possibly to be replaced by a single-line fallback for mini-links like the time of day and Unread posts/replies.)
So... Please start discussing :)
Still, I've been thinking about the sidebar system (cf. my talk with Emanuele), and was reminded of two things:
- the macro system is really powerful and great,
- it's totally going to confuse themers.
Well, to be honest with my greatness, it's not that hard to understand: <we:sidebar> holds the sidebar code, <we:offside> has the main content, etc... And 'sidebar' is defined in the index template, as well as in <skeleton> tags in sub-skins. So far, so good.
Now, I've always considered Weaving to be a skin that really, really should require as little 'hacking' as possible.
In Wedge, by default, the sidebar has two different codebases:
- IE6/IE7 use a table-based layout (<table> tags)
- Other browsers use table emulation (<div> tags with display:table on them)
It's okay because it explains how flexible the system is.
Now, if we delve into sub-skins, the skeleton is modified. When it comes to Warm, it's okay that it's modified because the sidebar position really is quite removed from the original layout. It's a great example of what you can do with careful planning.
But in Wine, the skeleton is modified so that the sidebar can be shown on the LEFT of the screen instead of the right. It's just an example, of course -- but it's still completely silly to change the HTML for what can be done in CSS.
Well, in my defense, back then I didn't know that table cells could be swapped with CSS. I learned about that some time ago, that you just need to apply 'direction: rtl' to the parent display: table, and 'direction: ltr' to its children. And it works perfectly. Despite it being a 'dirty hack', it's still extremely simple to apply and even to understand -- and it has the added benefit of leaving the sidebar contents where it belongs, i.e. at the end of the HTML source. (Heck, I'm even considering pushing the menu into a display:table of its own, and using display:table-header-group to move it to the top regardless of its position in the source...)
Okay, so far so good. I'm definitely doing that. I only need to redefine the skeleton once (in Warm), and Wine is left alone. Consider it an 'announcement' of a change I'll commit soon. What matters right now is IE 6/7.
Now, when it comes to them, doing table-based layout is cooler in my opinion, but a more realistic way of handling them would be to instead use the negative margin hack to show the sidebar correctly. i.e., by putting a negative right margin on the main contents and a positive right margin that compensates for it right in the first nested div, I can easily put a right-floated sidebar on the right. It's a proven method, and has no drawbacks -- except that it's not a proper 'column' that shows up, instead just a floated sidebar, meaning that if you set a background color on the sidebar, it only extends as far as the sidebar contents will extends, rather than filling the entire sidebar.
It's a well known problem.
It can also be fixed by using faux columns or other alternative tweaks for IE that are also well documented. But it just adds to the bloat and limits extensibility.
So... Here's my question, basically (and as TL:DR).
When it comes to IE6/IE7 compatibility, what would you prefer to have by default in the skins provided in Wedge?
1/ What exists right now, i.e. the <div>s are replaced on-the-fly to simple <table> tags for IE6/7 only?
2/ A simple CSS float hack that positions the sidebar <div> correctly but doesn't extend the sidebar to the full height?
3/ A complicated CSS hack that positions the sidebar <div> correctly and extends the sidebar just like (1) would do?
4/ Like (3), but applied to all browsers, instead of using the more logical 'display: table' setting? (<-- don't bother, that one's just troll bait :P)
As a reminder - none of these change anything for non-IE browsers. They will *always* use <div> tags. Also, I'm still considering the possibility of allowing for the sidebar to be removed (possibly to be replaced by a single-line fallback for mini-links like the time of day and Unread posts/replies.)
So... Please start discussing :)
