Andrew Pollack's Blog
Technology, Family, Entertainment, Politics, and Random Noise| Professional Services | Second Signal | Presentations | Andrew's Blog | Support |
Config driven CSS websites in Domino - What do you tokenize?
By Andrew Pollack on 07/04/2008 at 01:58 PM EDTI'm soliciting ideas & best practices on building configurable "theme like" CSS for a Domino site. I'm in the midst of a design refresh for this blog, as well as the main NCT site. They are both functional but truly ugly. I've decided to merge the two into a much more integrated self -- but more on that later. As part of the redesign work, I've been hand crafting a bit of HTML and CSS that will eventually become the framework into which all the active content will be placed. Every time I do this, I try to come up with the best scheme for making the site easily updated with new colors and so on.
The whole point of CSS is that it makes up for the lack of tokenization in HTML. That is to say, there is no "Meta-Tag" that you can use for colors in html tags so that you can define your colors in one place. Instead of every table cell you want to be "red" having to have a color tag on the table cell tag, you define your table cells with a "class" and then you assign your colors and things there.
Great, now the bad news. CSS is one of long line of terrible standards created during the hype of the late 90's when foolish investors paid six figure salaries to 20 something year old CIS majors fresh out of university, gave them big offices, swimming pools, game rooms, and a bunch of equipment with the sole job of creating "something interesting".
CSS, designed to solve the problem of no tokenization in HTML, has no tokenization. You end up with long CSS files where the same color codes and file paths are repeated over and over, making updates painful.
We can get around that in Domino, by generating our pages on the fly. Other systems use external scripting to do the same thing. Where you would normally put a color tag, you might embed a token like ${MainBGcolor}. A scripting tool can then run and quickly replace all instances of that token in your template with the color you've assigned, and produce an output file containing your actual CSS. In Domino, instead of tokens we use <computed text&rt;.
All of these solutions talk about HOW you can tokenize your CSS ahead of time, but the better question is still "WHAT" do you tokenize and how? Colors are the obvious choice, background images? Icon images? What do you tokenize when you build your css?
this blog site. Since, I've done a great deal more with it and with html and
javascript in general (this blog site was a learning exercise).
These days I do fairly large "household name" sites that most people who read
this would recognize, and that's forced me to get deeper into the browser
variants and so on.
In answer to your question: First is "yes" I'm probably not using it in the
most efficient way.
The second answer is that I often will try to stick with a color scheme that
uses the same colors for different things on the site. They don't necessarily
cascade from one another.
The third answer is that cascading doesn't always work. Anchor references are
among my biggest complain in that regard.
could have DIV.sidebar and DIV.comment (which on this side share a background
color) but you could also have DIV.blue-background, which just set the
background, border and text colors, and assign your comments to have class
"comment blue-background" and you sidebar to have "sidebar blue-background."
Then both would apply.
(Of course, the sidebar probably ought to be an ID instead of a class, but you
get the point.)
be easier for end users to modify the colors and sizes. I had color picker and
drop downs for header tags and paragraphs and lists. And it was pretty cool at
first but then I realized it was very limiting and I had to add more and more
fields to make it work right.
So I came to the conclusion that unless you are using one very bland design
that will not change much, this approach wouldn't work. It was a lot faster to
just plain type in the CSS and be able to tweak as text than to use fields or
tokens representing the individual properties.
What I did end up doing was a stylesheet or theme document with tabs for
header, main, col1, col2, etc so at least the end user could find things
easier. Then on the output form to the web, I formalize it into a flat text
sheet.
The cool thing about Domino is that I could make the sheet appear one way with
tabs etc on Notes and flatten for the web.
CSS itself is in a rich text field, allowing the use of colour formatting,
computed text, etc. Given all that, it's pretty easy to define a number of text
fields in the same document which store colour hex values. These fields can
then be referenced in the body of the CSS via computed text, making central
updates a breeze (i.e. define a colour "tag" and link that to one of these
colour fields).
Other Recent Stories...
- 01/26/2023Better Running VirtualBox or VMWARE Virtual Machines on Windows 10+ Forgive me, Reader, for I have sinned. I has been nearly 3 years since my last blog entry. The truth is, I haven't had much to say that was worthy of more than a basic social media post -- until today. For my current work, I was assigned a new laptop. It's a real powerhouse machine with 14 processor cores and 64 gigs of ram. It should be perfect for running my development environment in a virtual machine, but it wasn't. VirtualBox was barely starting, and no matter how many features I turned off, it could ......
- 04/04/2020How many Ventilators for the price of those tanks the Pentagon didn't even want?This goes WAY beyond Trump or Obama. This is decades of poor planning and poor use of funds. Certainly it should have been addressed in the Trump, Obama, Bush, Clinton, Bush, and Reagan administrations -- all of which were well aware of the implications of a pandemic. I want a military prepared to help us, not just hurt other people. As an American I expect that with the ridiculous funding of our military might, we are prepared for damn near everything. Not just killing people and breaking things, but ......
- 01/28/2020Copyright Troll WarningThere's a copyright troll firm that has automated reverse-image searches and goes around looking for any posted images that they can make a quick copyright claim on. This is not quite a scam because it's technically legal, but it's run very much like a scam. This company works with a few "clients" that have vast repositories of copyrighted images. The trolls do a reverse web search on those images looking for hits. When they find one on a site that looks like someone they can scare, they work it like ......
- 03/26/2019Undestanding how OAUTH scopes will bring the concept of APPS to your Domino server
- 02/05/2019Toro Yard Equipment - Not really a premium brand as far as I am concerned
- 10/08/2018Will you be at the NYC Launch Event for HCL Domino v10 -- Find me!
- 09/04/2018With two big projects on hold, I suddenly find myself very available for new short and long term projects.
- 07/13/2018Who is HCL and why is it a good thing that they are now the ones behind Notes and Domino?
- 03/21/2018Domino Apps on IOS is a Game Changer. Quit holding back.
- 02/15/2018Andrew’s Proposed Gun Laws
CSS, are you correctly using the CASCADING aspect of it?
I can't think of a circumstance where I wished I'd had tokenization like that.
As I ponder it, it seems like I'd be over-classing and not using the
hierarchical nature of CSS if I did run into that problem.
Like.... why would you need to define MainBGColor in more than one place?
That's just the BODY {background-color: }
Even if you were looking to do individual cells or something, then it's just TD
{background-color:}