Update: as many have noticed, Scribbish breaks the live search for versions > 2.5.6. I am working on an updated theme that takes advantage of the newer features but in the meantime you can hack the file layouts/default.rhtml to make Scribbish work with 2.6.0.
Look for the call to observe_field in layouts/default.rhtml and replace it with this:
<%= observe_field "q",
:frequency => 1,
:url => { :controller => "live", :action => "search" },
:loading => "Element.show('loading')",
:complete => "Element.hide('loading')",
:update => "results",
:with => "'q=' + escape($F('q'))" -%>
It’s the last line that should make it compatible with the typo trunk, but will break compatibility with 2.5.6 :\ That’s what I get for not leaving it in a partial. Ugh, it looks ugly in a view.
/Jeff
Scribbish is a theme for typo. Its layout standardizes on a simple xhtml structure and styles are separated into individual files which are included in the correct order, making it easier to control the cascade and to figure out ‘what-goes-where’. Use it as-is, or copy it to make new themes.
Scribbish has its own page now
Start by copying Scribbish
The easiest way to make a typo theme is to copy an existing one and go to town, right? Well, Scribbish is a good theme to copy. It starts you off with a standard xhtml structure (valid, of course), stylesheets, and a css framework to keep them organized. With this in place, all you have to do is dive in and start designing.
The XHTML structure
The structure used by Scribbish is basic yet flexible enough that it shouldn’t require modification. I mean, that’s really the whole idea here—if you always use the same xhtml structure, you only ever need to modify the css to make new themes. Yes, this is very much a CSS Zen Garden approach. The code follows.
<html>
...
<div id="container">
<div id="header"></div>
<div id="page">
<div id="content"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</div>
...
</html>
A CSS framework
The structure is complemented by a simple css framework: each main element (#header, #content, #sidebar, #footer) has a corresponding css file. Additionally, page layout is handled by the file layout.css, and everything is assembled by application.css, the only file you need to include in your html. The key benefit to this approach is common to any framework (even Rails): everything has a place.
print.css file.
Anatomy of a theme
So, where does everything go? Here is the breakdown (courtesy of the unix program, Tree).
$ tree typo/themes/scribbish
typo/themes/scribbish/
|-- about.markdown
|-- images
|-- javascript
|-- layouts
| `-- default.rhtml #=> The xhtml structure
|-- preview.png
`-- stylesheets
|-- application.css #=> Imports files / orchestrates framework
|-- layout.css #=> Handles layout (dimensions/position)
|-- header.css #=> Rules for div#header
|-- content.css #=> Rules for div#content
|-- sidebar.css #=> Rules for div#sidbar
|-- footer.css #=> Rules for div#footer
`-- local.css #=> Imported last; overrides other rules
Application.css is the one to pay attention to here. Using the css import rule, it includes all the other stylesheets and arranges them in the correct order. It also defines global rules, such as the default font properties, default states for hyperlinks, and rules for different media types, such as print. Since this file does all the work, it’s the only that’s included by layouts/default.rhtml.
Layout.css is where you handle your dimensions, widths, heights and floats for any element. So, if you wanted to move, say, the sidebar to the right of the content, you’d do it here. To make things easier you can use the helper elements, div#container and div#page, to manipulate the entire document and the content+sidebar elements respectively. In the end, you’ll find that a pixel perfect layout is much easier to achieve when you’re only looking at a few rules in a single file that doesn’t even scroll in your editor.
Customizable live-search (aka, the Spinner)
One of the things about the default Azure layout is that it uses a Rails ‘partial’ to render the live-search spinner. (For the uninformed, the spinner is an animated GIF that indicates progress during the AJAX-enabled live-search). Unfortunately, using a partial means the live-search isn’t theme-able. Scribbish solves this by placing the contents of the live-search partial inside layout.rhtml (where it can be modified), and makes it easier to customize the spinner by controlling it via css.
Room for improvement
The principal drawback to using several css files is display speed. Specifically, display speed in the Rails development environment. Because the development environment doesn’t implement caching, and because typo uses Rails to process theme urls (adding the overhead of logging), it takes a few seconds longer to load up each page. Fortunately, stylesheets are cached by Rails and everything is quite snappy in the production environment.
Download and installation
Version 0.1 (November 6, 2005)
Installation is as easy as unpacking Scribbish in the themes directory at the root of your typo application. This should leave you with a directory named ‘Scribbish’ on the same level as the default ‘Azure’ theme. If you’re using unix,
$ cd themes $ curl -O http://quotedprintable.com/files/scribbish-0.1.tar.gz $ tar xzf scribbish-0.1.tar.gz
That’s all there is to it. The Scribbish theme will now show up in the typo back-end under the ‘Themes’ tab. All you have to do is activate it.
Feedback
Feedback is welcome and appreciated. I haven’t tested in as many browsers as I’d like to (no Windows machines in the house). If you find bugs, oddities, or have questions, please email me at packagethief[at]gmail.com.
Great work. If I’d be one of the judges, you should get the PowerBook ;-)
I like it. Works fine on Firefox 1.5rc1 on the Mac except the spinner on the livesearch appears slightly behind the search input field.
very nice, very clean
Thank you for taking the time to do this for the community!
It will make it much easier to create new themes that look good and are easy to maintain.
Scribbish is now posted on the Typo Garden contest site as well.
Lovely work. Thanks so much for your contribution.
Btw, how did you make those cool black and white code snapshots?
Jack—the ‘white-on-black’ terminal look is just css. I have the
preelement styled something like:pre { color: white; background: black; padding: 1em; }Thanks, I was just making sure it wasn’t a Textile or Markdown trick that I didn’t know about.
Great theme! I’m new to Rails and typo, so this will give me a nice template to start with. Is it compatible with typo 2.6.0?
I’m using it with Typo 2.6.0 and as far as I can tell it works just fine. Apparently some changes to the search functionality are supposed to be necessary to port 2.5.8 themes to 2.6.0, but I don’t know any details and search seems to work fine.
Anyway, this is a very nice theme and a great starting point for new themes. The layout is simple and clean, and the CSS files are broken up into logical units, which makes them easy to edit. Great job!
Ive tried your fix on typo 2.6.0 (running on dreamhost) and it worked great. Thanks for the amazing theme!