Technocrat.net Style-Sheet Developer's Guide

Goals

One of our goals is to provide the user with the maximum control over their own presentation. One particular issue is fonts: users have strong preferences regarding what body font they'd like to read. Let's make that easy for them by not overriding the browser-default body font in our default style sheet, since most browsers make it easy for the user to set that font. We can offer user-selectable style sheets that set a body font.

A literature review says that Serif vs. Sans-Serif is mostly a matter of personal choice. Serifs don't necessarily make text more readable for everyone.

We also would like to accomodate readers with different preferences for font size. Visually-impaired people will select large fonts. For many of our readers this is mostly a matter of their age. Sometime between 40 and 50, the lens of the eye becomes unflexible and fine focus doesn't work very well any longer.

There are also broad differences in display resolution. Pixels don't look the same on a Nokia 770 and a Plasma TV.

Thus, let's make font choice easy for our users by defining sizes in em units where possible. Sizes that are defined in pixel units should be ones that are appropirate regardless of font-size.

General Information

Drawing of the CSS box model.

Image courtesy of Hicks Design. The image is licensed under Creative Commons Attribution-2.0.

This should help all of us who don't know the difference between margin and padding.


Style-Sheet Coding Style Guidelines

We use Sass (which is part of Haml) to write CSS stylesheets. We use Haml to write HTML. Our style-sheet source, written in Sass, is here. If you can install Haml, we prefer that you write directly in it. Otherwise, we will run css2sass over your CSS, to get Sass.

Most of the important elements in our layout have a class name declared, or they are surrounded by a div or span element with a declared class name. Please use the class names rather than the element names in your stylesheet.

Note that different sorts of pages have different layout, so you should classify your styles for the pages they are meant to apply to by grouping them within the class that is defined for the body of that particular page:

site
The front page.
comments
Story pages.

Comment Styling

All stories and replies are "comments". If you want to style them differently on the front page, surround them with the body class name: site for the front-page style, and with comments for the story-page style.

This layout is stable, it will probably continue to work this way. Here is the comment

title (the title of the comment)
attributes (table with one row, used to lay out block elements side-by-side)
user (the name of the author, with a link to his/her info)
date
section (the name of the section, with a link to its info)
button-to (editors only, these are the block elements we need the table for)
button-to
button-to
preface (text, only for stories, not replies)
body (text, some stories have no body)
readMore (says "Read More" and gives text size and number of replies)
replies
reply
comment (this is a reply)
reply
comment (this is a reply)
... (followed by more replies)

The comment title will be given the class redundantTitle instead of if it's the same as the title of the parent comment. The style-sheet may make it disappear in that case, or use a smaller font size, a different color, etc.

Comment Page

A comment page is rendered for stories and their replies. The layout is less stable than that for comments, but will probably stay similar to what it is now.

The layout as it's meant to be positioned looks something like this:

Drawing of the layout of comment pages.

SVG version The SVG version is the master image for editing.

Here is the class hierarchy:

comments (this is the body element)
h1 (h1 element (not class) for title at top of layout, will probably be moved to left_sidebar)
error (error message, only if present, will probably be moved to top)
notice (transient notice, only if present will probably be moved to top)
hr (hr element, will probably be removed)
content
header
torso
left_sidebar
session_iframe (the session info gets loaded here, it gets styled seprately from this page)

center_column
top
comment
bottom
right_sidebar
story_list_iframe (the story list gets loaded here, it gets styled seprately from this page)
footer
hr (hr element, will probably be removed)
p (paragraph element, will probably be removed)
links to source code and developer documentation. Will probably be moved to the footer.