StyleSheetLayout: overflow technique
FND
that the columns (MainMenu and Sidebar) are using absolute positioning.
There's quite a simple fix for that - the "overflow technique"[1][2].
The advantages of using that technique are:
* it's The Right Way (abspos is evil)
* inherent flexibility
it's very simple to integrate both a vertical and a horizontal menu;
also, it's easy to toggle the sidebar without having to worry about
dependencies (e.g. displayArea margins)
* independent block formatting context[3] for the displayArea
nested floats inside the displayArea are not a problem (i.e. using
"clear: both;" inside the displayArea does not mess with the page
layout's floated columns)
This only requires a few modifications of the StyleSheetLayout, as well
as a tiny adjustment in the PageTemplate.
I've posted the patch using pastebin[4], and have uploaded a quick
sample on TiddlySpot[5].
Both Clint and Saq seemed to like this suggestion when I spoke to them
on IRC yesterday.
Feedback would be appreciated!
-- F.
[1] overflow technique:
---------------
<style type="text/css">
#nav,
#contents {
margin: 0 10px;
border: 1px solid #AAA;
padding: 5px;
}
#nav {
float: left;
}
#contents {
display: inline-block; /* IE bugfix: give layout ("hasLayout") */
}
#contents {
display: block; /* restore proper behavior (see IE bugfix above) */
overflow: hidden;
}
</style>
<body>
<div id="nav">sidebar</div>
<div id="contents">page contents</div>
</body>
---------------
[2] proof of concept draft: http://paste.css-standards.org/23965/view
[3] http://www.w3.org/TR/CSS21/visuren.html#block-formatting
schilke
ACK!
all points (without knowledge about possible technical issues - if
there are any)
--
schilke
FND
> there are any)
Well, I just spoke to Saq again, and he's a bit concerned that this
might break existing custom themes.
That's a valid point, of course - but I would assume that not all custom
themes are affected, and fixing the remaining ones should be very easy
(removing the horizontal margin from the displayArea should do the trick).
Maybe we should save this for the previously-discussed redesign*... !?
Nevertheless I'm quite fond of this proposal and would like to see it
implemented ASAP (though, admittedly, less for practical reason than for
the fact that the current abspos technique makes me cringe - no offense
to the original creator).
-- F.
Saq Imtiaz
Cheers,
Saq
http://tiddlythemes.com ) : a gallery of TiddlyWiki themes.
TiddlySnip ( http://tiddlysnip.com ) : a firefox extension that turns TiddlyWiki into a scrapbook!
LewcidTW ( http://tw.lewcid.org ) : a repository of extensions for TiddlyWiki
FND
> TiddlyThemes.com ;)
If it's as easy as I said it was, that shouldn't be a huge problem (it's
hard to estimate, but I'd say it'd take maybe an hour tops?).
By the way, I forgot to add that this technique also makes it somewhat
easier to have a footer (that's problematic with the current layout as
the abspos'd columns don't push the footer down).
-- F.
PhilHawksworth
I think this is a great development. Anything that brings the CSS
methods conventions used up-to-date is really useful in my opinion.
I'd have to echo the concerns about themes getting jiggered though.
If you are able to document an easy fix to the typical issues that
might arise, then I think it would be really useful.
Great work.
Phil
FND
> methods conventions used up-to-date is really useful in my opinion.
Yay, a fellow CSS evangelist... ;)
> I'd have to echo the concerns about themes getting jiggered though.
> If you are able to document an easy fix to the typical issues that
> might arise, then I think it would be really useful.
I just took a brief look at Saq's Monochrome[1] theme; it seems that
all that's required there is to adjust the displayArea's right margin
(by subtracting the width - and possibly the margin - of the sidebar).
In themes retaining the vertical MainMenu, the displayArea's left
margin would need to be adjusted in a similar fashion.
This easy fix most likely works for almost all themes - that is, as
long as build upon the default page layout (though if they don't, the
default StyleSheetLayout and PageTemplate probably don't matter much
anyway).
Oh, and I just noticed yet another advantage of this overflow
technique:
Since the content area just falls into place between the floated
columns, those columns' width could be defined using % instead of EM.
This means that the columns don't grow when increasing the font size,
so the tiddler contents have enough room at all times (instead of the
displayArea being squished, as is the case now).
(I think this would be a "fluid" instead of an "elastic" layout then -
though I can never really remember which is which... A quick Google
search seems to confirm this assumption - but the respective
article[2] is TLDR for now.)
-- F.
[1] http://tiddlythemes.com/empties/Monochrome.html
[2] http://green-beast.com/blog/?p=199
Saq Imtiaz
Also, the biggest concern should not be whether the themes at TiddlyThemes can be easily fixed. The major concern is that this change would break the TiddlyWiki layout of everyone out there that has customized the PageTemplate.... That is a lot of people and I just don't see how that is worth doing.
That said, I am working on a theme as we speak and I am giving this method a whirl. So thanks for sharing Fred.
Saq
TiddlyThemes.com ( http://tiddlythemes.com ) : a gallery of TiddlyWiki themes.
FND
Over on [tw]* BJ has come up with a simple idea on how to further
simplify (and/or "normalize") the style sheets:
By extending the use of tiddler slices to values other than just the
colors (e.g. width and/or height), we might
a) allow users to easily adjust basic layout elements' dimensions
(e.g. header height)
b) make it easier for developers/designers to ensure a consistent
layout - e.g. for identical padding or margin on similar elements
(though this is probably secondary, as CSS has various facilities
for achieving the same result)
-- F.
* http://tinyurl.com/2b8yk4
(http://groups.google.com/group/TiddlyWiki/browse_thread/thread/e4d22ec20eaeb690/77d0751d985b2ce4?#77d0751d985b2ce4)
FND
I've created a StyleSheet tiddler with the necessary changes for users
to import into a regular TiddlyWiki (instead of overwriting
StyleSheetLayout):
http://cleanlayout.tiddlyspot.com
A few of the benefits of this technique are now demonstrated here:
http://cleanlayout.tiddlyspot.com/#FlexibilityTest
(This is using the ToggleElementPlugin*, setting "display: none;".)
Also, I have set the MainMenu's width to "auto", so it now automatically
adjusts to its contents. (Credit for this idea goes to PhilH.)
-- F.