AlternateIdea: Azure Template for Typo

April 26th, 2005

Azure Template for Typo

6 comments on 567 words

Azure I’ve been working a good bit on the new default template for “Typo”:http://www.typo.leetsoft.com . It’s complete for the most part, still need to do some browser testing, namely “Safari”:http://www.apple.com/safari and other mac browsers to make sure things look o.k.

As I’m still new to “ruby”:http://ruby-lang.org and “rails”:http://rubyonrails.com , I thought it might be somewhat of a learning process trying to get this implemented, boy was I wrong.

It was extremely easy to get everything put in place. While there is mixed ruby and html in the templates, it is very minimal. Great care has been taken to minimize the efforts on designers, and make it just as fun to design for rails as it is to program for it :-) . There’s nothing like the satisfaction of seeing things just come together, and your design coming to life.

There are a few minor issues that need to be worked out before Typo can be valid straight out of the box. It mainly has to deal with syndication of “tadalist”:http://www.tadalist.com , “del.icio.us”:http://del.icio.us , etc. If you choose not to syndicate anything, you are left with ordered list with no list items present, thus resulting in invalid pages. Hopefully we’ll get this worked out.

Once we get the public design pushed out, I will start focusing on the administration, and there is also talk of a website just for “Typo”:http://typo.leetsoft.com .

Hopefully with the 2.5 release we’ll be able to handle most of the functionality of typo through the administration interface. While a lot of people prefer to blog from a client, managing other aspects of your website including categories, syndication, configuration, templates, etc. should be handled through the administration.

I pondered on the idea of some sort of template system at first, but after working with Typo integrating Azure, I don’t really see the need for it anymore. Currently all it takes is changing 1 line in 1 file to choose a new stylesheet, and if you need to do any further editing to your templates, its extremely easy to do in the editor of your choice.

If you have any ideas for the administration interface beyond whats already there, feel free to leave a comment with your likes/dislikes so we can improve upon it.

Discussion

Ben said on April 28th

Love the new template Justin. Looking forward to getting Typo up and running myself…
Justin said on April 28th

Thanks Ben, hope you enjoy Typo!
Moe said on April 29th

Wow! I love your designs and your use of pattern overlays & gradients… Very simple yet classy. Great Job!!!!
Ed said on April 29th

May I suggest the following modification to the Azure stylesheet?

To prevent floated elements from “poking” outside the containing parent (avoiding the use of clear:both):

div.post { overflow: auto; }

Typo looks great thanks to your contributions. Keep up the good work.
Justin said on April 30th

Thanks for the tip Ed.

I didn’t think overflow:auto would have any bearing on the floated elements due to the fact the post containers are already growing in height based on content, and overflow:auto would be redundant?
Justin Palmer said on February 20th

Testing coComment.

Sorry, comments are closed for this article.

Justin develops iPhone and Mac software over at Labrat Revenge by night and by day he is the Design Director for entp, the company behind Lighthouse, Warehouse, and Mephisto. You can check out his dated portfolio for a peek of what he's done.

Beautifully simple issue tracking and project management. With a beautiful Mac-like interface, email and subversion integration, Lighthouse is the perfect project management tool. We took the suck out of issue tracking.

Jan12

YouTube has just announced HouseHub and Senate Hub.
permalink
Oct10

Best Practices For Cocoa and CocoaTouch—Invaluable tips from Cocoa developers.
permalink
Sep25

Track House And Senate Votes On Twitter. I’ve put together a small script that parses vote data collected by Govtrack.us and posts to twitter.
permalink
Jul28
permalink
Protip: Color grep searches in terminal
```
alias grep='GREP_COLOR="1;37;41" LANG=C grep --color=auto'
```
Stash this away in your Z Shell (~/.zshenv) or Bash environment (~/.bashrc) and set your preferred ANSI code.
Jun08

ActiveRecord Ported To Objective-C brought to us by Ninja Kitten
permalink
May06

With the release of Opera’s DragonFly, IE 8’s Developer tools, Safari’s/Webkit’s Web Inspector and Drosera; and the Grand Daddy of them all, Firebug – we’ve now come full circle.
permalink

Feb08

permalink

DoubleClick and Define using Apple Dictionary


var selection;
if(window.getSelection)
  selection = window.getSelection();
else if(document.selection)
  selection = document.selection.createRange();

document.observe("dblclick", function() {
  if(navigator.userAgent.include("Macintosh")) {
      location.href = "dict://" + selection;
    }
});

A quick (and probably dirty) Prototype-based hack allowing Mac users to get the definition of any word by double clicking it.

Feb08

permalink

A strftime for Prototype


Object.extend(Date.prototype, {
  strftime: function(format) {
    var day = this.getUTCDay(), month = this.getUTCMonth();
    var hours = this.getUTCHours(), minutes = this.getUTCMinutes();
    function pad(num) { return num.toPaddedString(2); };

    return format.gsub(/\%([aAbBcdDHiImMpSwyY])/, function(part) {
      switch(part[1]) {
        case 'a': return $w("Sun Mon Tue Wed Thu Fri Sat")[day]; break;
        case 'A': return $w("Sunday Monday Tuesday Wednesday Thursday Friday Saturday")[day]; break;
        case 'b': return $w("Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec")[month]; break;
        case 'B': return $w("January February March April May June July August September October November December")[month]; break;
        case 'c': return this.toString(); break;
        case 'd': return this.getUTCDate(); break;
        case 'D': return pad(this.getUTCDate()); break;
        case 'H': return pad(hours); break;
        case 'i': return (hours === 12 || hours === 0) ? 12 : (hours + 12) % 12; break;
        case 'I': return pad((hours === 12 || hours === 0) ? 12 : (hours + 12) % 12); break;
        case 'm': return pad(month + 1); break;
        case 'M': return pad(minutes); break;
        case 'p': return hours > 11 ? 'PM' : 'AM'; break;
        case 'S': return pad(this.getUTCSeconds()); break;
        case 'w': return day; break;
        case 'y': return pad(this.getUTCFullYear() % 100); break;
        case 'Y': return this.getUTCFullYear().toString(); break;
      }
    }.bind(this));
  }
});

UPDATE: Bugs fixed. Thanks Andrew and Stephen

Also, some of my old and new code has been posted on GitHub. You might find something useful.

Feb04

A beautiful, organic animation by Flight404 created using Processing.

Processing in Action
Jan08

Aaron Patterson shows us how to define ruby methods which can be called from JavaScript using RKelly.
permalink
Jan07

Dustin might not surprise you at your house with a book in hand, but he’ll damn sure send you his innermost fu in the form of a shiny yellow and black book. It’s an excellent read if you’re looking to put more funk in your functions and class in your classes. Check out “Pro JavaScript Design Patterns” by Dustin and Ross Harmes.

—I’m Justin Palmer and I approve this message.
permalink
Dec23

IE 8 PAsses the Acid 2 Test for those not keeping tabs on things.
permalink
Oct24

Mislav has written up an excellent overview on upgrading Radiant (which used 1.5) to Prototype 1.6. The article does a great job of showing how 1.6 is superior to 1.5.
permalink
Oct19

According to the New York Times, the Daily Show Archives, with over 7,000 videos are online—free and searchable.
permalink
Oct11

Telemarketer gets owned