Colophon
The theme for MarieHogebrandt.se is © 2013 Marie Hogebrandt under the MIT Licence, derived from Roots, _s and the Golden Grid System, proudly powered by WordPress.
Libraries
- Normalize
- A CSS library to normalize the styles to compensate for different browsers
- Typeplate
- Typography is not an accident, good typography even less so
- jQuery
- The Javascript library for modern design
- Modernizr
- Javascript library for checking capabilities
- Selectivizr
- Polyfill for advanced CSS-selectors
- Fancybox
- A lightbox script for mixed content
- jQuery Mousewheel Plugin
- Plugin to add cross-browser support for the mousewheel
Icons & Ornaments
We love Icon Fonts! — A free & open source icon fonts hosting service for icons.
- Entypo by Daniel Bruce
- Brandico by Fontello
- Font Awesome by Dave Gandy
- Printers Ornaments One by Michelle Dixon
- Logo is Constanze Initials by ClaudeP
Typography
Both text and heading type are Calendas Plus by Atipo, a beautiful fontface with a very classical air to it. I like the lines and variance in strokes, which creates a very pleasant view.
The various ornaments on headers and paragraphs, as well as the different styles of headers (crossheads for first three levels, indented sideheads for the following two and finally the run-in sidehead for the sixth level) are inspired by the masterwork The Elements of Typographic Style by Robert Bringhurst.
For some extra styling of typographical elements (such as wrapping ampersands in a span
with the class amp
) I use an updated version of WP-Typography, originally created by Jeffrey D. King.
Other design concerns
- Exclusive Paper from Subtle Patterns
- Background for the site, and overall Subtle Patterns is a nice site
Development
The creation of this theme is an experiment. It has been based on testing some of the newest and most interesting tools out there, as well as using tried-and-true methods.
Language Abstraction
- Sassy CSS
- A Pre-processor language heavily based on CSS-syntax. Used together with Compass to bring even more ease into the creation of good CSS.
- Markdown
- Though the HTML is written normally, posts & pages are written using Markdown, within the context of WordPress the plugin WP Markdown by Stephen Harris.
Development Tools
Dependencies Handler & Package Managers
- Ruby
- A language in itself, but for my purposes uses a
gemfile
to install required gems, mainly CSSCSS and Sass. - NodeJS
- Server-side JavaScript, here only used for installation of build tools such as Grunt, using the package manager
npm
andpackage.json
to install required packages - Bower
- Handling web dependencies such as Typeplate and WordPress, uses the file
bower.json
- Composer
- Dependency manager for PHP
Various Tools
- GruntJS
- According to it’s creator, Grunt is
The JavaScript Task Runner
, used to automate boring chores such as automatically lint JavaScript and PHP, compile SCSS and build a lean, mean Modernizr machine. The specifications are found in the project’s Gruntfile - Yeoman
- A workflow more than anything else, where Yo is a scaffolder, pulling in files and creating default settings. This theme is based on the default webapp, but one of my WIP is to create a scaffolder for themes
- CSSCSS
- A ruby gem (with a grunt wrapper) for checking CSS for duplicate styles, as one part of a better (and cleaner) codebase
- Color Scheme Designer
- A good tool for prototyping colours that go well together