Design patterns for type challenges, rendered in CSS and SCSS
In the rush to work with the latest frameworks and libraries, it's easy to forget the simple fact that users don't care about clever coding. What they see is content. The sad truth is that the web often does a poor job of presenting text-based information. Typeplate takes steps to address this problem.
Billed as a 'Typographic starter kit', Typeplate provides a set of CSS and SCSS directives covering all the classic textual set-ups without being proscriptive about how or when you set them. What you have is a set of customisable solutions that prompt you to take a more hands-on approach to web typography. And eyeballs everywhere will thank you.
As a developer, it's well worth just working your way through the docs for Typeplate. When you're busy hacking away at the lavaScript coal-face, design concerns can too easily slip. That's a shame because the principles behind web typography, as expressed here, resonate with ideas that guide software design: modularity, re-usability, non-repetition and so on.
You start to realise that the need for structure extends beyond the code-base into the content and it's very often the type-setting which leads the charge on this front. The use of modular scale is a good case in point. Taking a base size, which is visually pleasing in the font you've chosen, then multiplying up and dividing down by a pleasing ratio (such as the golden mean) is a great way to introduce meaningful structure to type size, spacing and pacing.
Using Sass
The use of SASS in this project is central; its only when you condense typographic principles into rnixins and variable declarations that you see the underlying mathematical simplicity. No longer will you need to spend all day fiddling with px values just to find that things still look 'a bit off'. That said, there are no hard and fast rules. It's good to improvise, and the modular nature of Typeplate allows for this. But it gives you a baseline from which, and around which, to vary. Without that any improvisations will look messy at best.
Verdict: Typeplate considers font-size settings, colours, indentation and footnotes with an infored eye, but leaves numbers up to you.
http://typeplate.com/
Long-awaited update for the popular code. Sublime Text (ST), the code editor of the moment, has just released a beta of its third incarnation.
Available to those with a licence for ST2 (registered users), the latest version is faster, has improved window management and debuts a superb set of Goto commands.
Goto commands? Glad you asked. The most impressive of the editor's new capabilities is by far the ability to search all of a project's files for the occurrence of symbols/classes, enabling you to jump directly to their definitions from any instance occurrence. This is going to be one of those things you do reflexively after a while.
There's a host of additional changes to the functionality, such as find/replace, but this appears to be a nuts and bolts upgrade. Notably with plug-ins now using Python 3.3, Sublime Text 2 plug-ins will have to be ported to maintain compatibility. This will doubtless cause a few raised eyebrows.
Verdict: A strong dev environment with IDE-like feature in an enjoyable and highly efficient text editing format. http://www.sublimetext.com
Koken (CMS)
Designers, artists and photographers are the target audience for Koken, so quite naturally the focus is on the system's easy to use content management system. Uploading, grouping, tagging, controlling access and monitoring traffic. This is a playground for anyone with content to show and tell. That may be the focus, but the free website publishing system is a well-rounded product with a decent templating engine and extensible plug-in architecture. There are a few rough edges but this is still a beta product and given that status, it's an interesting one.
Verdict: The docs are clear; tempting and plug-in development are straightforward; and there's the beginnings of a community forming. Web: www.koken.me
Typeform Beta (Web Services)
There's definitely an art to creating good forms, yet few people enjoy the job. Even fewer actually get it right. Typeform steps in to fill this deficit with a nicely devised web app, which allows you to drag and drop your questions, style the entries and monitor their use. Though still in beta, the Typeform experience is smooth and simple: drop elements into order and provide a few settings. You can choose a theme and customise the colours, but design input is kept to a minimum. It's quick to hook your form into a page to begin monitoring input.
Verdict: A few more customisation options would be nice, but the effort-saving goodness that Typeform offers is hard to resist. Web: www.typeform.com
Event spy (Dev Tools)
Getting a clear picture of the order in which things happen is an important step towards understanding and subsequently taming a web page with a glut of listeners, event triggers and associated handling code. Event Spy Lets you keep tabs on every event for which a listener is registered, as it happens, live in the Chrome developer tools panel. Great for debugging pages or understanding how an app is working, it covers dynamically attached handlers, creating a rapidly growing log of a page's relevant behaviours and the associated code.
Verdict: It'd be nice to have a filtering mechanism given the amount of interaction that causes a log entry, but this is a useful tool all the same. Web: event-spy.blogspot.co.uk
