Colophon

The theme for MarieHogebrandt.se is © 2013 Marie Hogebrandt under the MIT Licence, derived from Roots, _s and the Gold­en Grid Sys­tem, proud­ly pow­ered by Word­Press.

Libraries

Nor­mal­ize

A CSS library to nor­mal­ize the styles to com­pen­sate for dif­fer­ent browsers

Type­plate

Typog­ra­phy is not an acci­dent, good typog­ra­phy even less so

jQuery

The Javascript library for mod­ern design

Mod­ern­izr

Javascript library for check­ing capa­bil­i­ties

Selec­tivizr

Poly­fill for advanced CSS-selec­tors

Fan­cy­box

A light­box script for mixed con­tent

jQuery Mouse­wheel Plu­g­in

Plu­g­in to add cross-brows­er sup­port for the mouse­wheel

Icons & Ornaments

We love Icon Fonts! — A free & open source icon fonts host­ing ser­vice for icons.

• Enty­po by Daniel Bruce
• Brandi­co by Fontel­lo
• Font Awe­some by Dave Gandy
• Print­ers Orna­ments One by Michelle Dixon
• Logo is Con­stanze Ini­tials by ClaudeP

Typography

Both text and head­ing type are Cal­en­das Plus by Atipo, a beau­ti­ful font­face with a very clas­si­cal air to it. I like the lines and vari­ance in strokes, which cre­ates a very pleas­ant view.

The var­i­ous orna­ments on head­ers and para­graphs, as well as the dif­fer­ent styles of head­ers (crossheads for first three lev­els, indent­ed side­heads for the fol­low­ing two and final­ly the run-in side­head for the sixth lev­el) are inspired by the mas­ter­work The Ele­ments of Typo­graph­ic Style by Robert Bringhurst.

For some extra styling of typo­graph­i­cal ele­ments (such as wrap­ping amper­sands in a span with the class amp) I use an updat­ed ver­sion of WP-Typog­ra­phy, orig­i­nal­ly cre­at­ed by Jef­frey D. King.

Other design concerns

Exclu­sive Paper from Sub­tle Pat­terns

Back­ground for the site, and over­all Sub­tle Pat­terns is a nice site

Development

The cre­ation of this theme is an exper­i­ment. It has been based on test­ing some of the newest and most inter­est­ing tools out there, as well as using tried-and-true meth­ods.

Language Abstraction

Sassy CSS

A Pre-proces­sor lan­guage heav­i­ly based on CSS-syn­tax. Used togeth­er with Com­pass to bring even more ease into the cre­ation of good CSS.

Mark­down

Though the HTML is writ­ten nor­mal­ly, posts & pages are writ­ten using Mark­down, with­in the con­text of Word­Press the plu­g­in WP Mark­down by Stephen Har­ris.

Development Tools

Dependencies Handler & Package Managers

Ruby

A lan­guage in itself, but for my pur­pos­es uses a gemfile to install required gems, main­ly CSSCSS and Sass.

Node­JS

Serv­er-side JavaScript, here only used for instal­la­tion of build tools such as Grunt, using the pack­age man­ag­er npm and package.json to install required pack­ages

Bow­er

Han­dling web depen­den­cies such as Type­plate and Word­Press, uses the file bower.json

Com­pos­er

Depen­den­cy man­ag­er for PHP

Various Tools

Grun­tJS

Accord­ing to it’s cre­ator, Grunt is The JavaScript Task Run­ner, used to auto­mate bor­ing chores such as auto­mat­i­cal­ly lint JavaScript and PHP, com­pile SCSS and build a lean, mean Mod­ern­izr machine. The spec­i­fi­ca­tions are found in the project’s Grunt­file

Yeo­man

A work­flow more than any­thing else, where Yo is a scaf­fold­er, pulling in files and cre­at­ing default set­tings. This theme is based on the default webapp, but one of my WIP is to cre­ate a scaf­fold­er for themes

CSSCSS

A ruby gem (with a grunt wrap­per) for check­ing CSS for dupli­cate styles, as one part of a bet­ter (and clean­er) code­base

Col­or Scheme Design­er

A good tool for pro­to­typ­ing colours that go well togeth­er