Rebuilding my personal site
In the virtual internet world, personal websites are like our houses. We want them to look nice, invite friends over, and hope they have a good time. Unlike real houses, the cost of building the house from the ground up, from foundation to design, is relatively cheap. I recently took the time to do just that and wanted to share some of the tools I used to build this up.
Getting inspirations
I wanted to go with a minimalist design approach. Personally, I find it extremely appeasing when I visit a site and the relevant parts of the site are the only parts I see. Conversely, it's a pain when a design throws a ton of components at you and makes it an adventure looking for the content you want to see. Too many colors, too many fonts, and too many social media links are a bother and it's good practice to work on designs that concentrate on presenting the most relevant content as clearly as possible.
I got many of my inspirations from browsing sites featured on Minimal Sites. Identifying what part of your content is expendable can be hard, but it's made easier if you see a really cool design that works without certain components you thought you could never do without.
Mocking my plans
You can have a vague idea of what you want the final design to look like in your head, but mental images don't compare to visual images and I found that mocking up my designs before starting them ended up being a large timesaver.
mockingbird is a simple free online service that let's you easily mock up designs before you put them into practice. The UI is intuitive, you can access your mocks from anywhere, and it's easy to share/collaborate if you're working as part of a larger team. Through the mocking process, I could hash out exactly what I wanted my site to look like without wrestling with HTML/CSS yet. Here's a link to this site's mockingbird project and below is a screenshot of one of my pages on it. There certainly were changes from my mocks to the current result, but having the mocks in the first place was a great start.
Building the site
To actually implement the mocks, there's not much else other than bunkering down and spitting out HTML and CSS. Producing HTML and CSS can be frustrating as a developer because you're trained by the mantra of DRY (Don't Repeat Yourself) and the evils of copy+paste. However, when you're working with raw HTML and CSS, you can't help but repeat yourself over and over.
Have a navigation bar on each of your pages? Copy+paste. Want to apply that special shade of green onto different text, backgrounds, and borders? Copy+paste. This leaves your site a pain to maintain if you want to make even a small adjustment on a section shared by all of your pages or if you want to change that special shade of green for all those components.
This is where SASS and Template Toolkit come in for me, helping to reduce repetition and making the site much more maintainable.
SASS
Short for "Syntactically Awesome Stylesheets", SASS is a language that compiles into CSS, but has many features (such as functions, mixins, variables, extending classes) that vanilla CSS does not have. Regular CSS is valid SASS so it's very easy to switch to SASS even if you've already started a project with plain CSS. SASS goes a long way to reduce the amount of repetition and boilerplate code found in your stylesheets and once you go SASS, you can't turn back. I promise.
(Also check out Compass while you're exploring SASS. It works with SASS to introduce a bunch of useful out-of-the-box features)
Template Toolkit
Most repetition problems in HTML are addressed in web framework templates. Most of the good frameworks have some kind of template inheritance, allowing you to create some base HTML file with common components, like navigation and header, and extend on this base with specific pages. I was pretty adamant on making my personal site lightweight and mostly just static files, but I still wanted some sort of lightweight templating engine to help generate the HTML cleanly without much repetition. Template Toolkit does just that, allowing you to produce template files and define inheritances, which then compiles into all the necessary HTML you need.
One feature that I wish Template Toolkit had was a watch option. With SASS, you can configure a watcher that automatically compiles your SASS into CSS whenever the watcher detects a change in any of the SASS files. It was a nuisance to keep calling Template Toolkit to compile to HTML every time I made a change to the templates. The good news is Template Toolkit is open source and if you want a feature you can just implement it yourself!
You can use my fork of Template Toolkit here to use the watch option when calling ttree. This sets up a listener and will automatically compile your templates when it detects a change in templates.
Summary
I had plenty of fun remodeling my internet house and picked up some tools on the way.
Minimalist design inspiration: http://minimalsites.com
Design mockups: http://gomockingbird.com
Better CSS: http://sass-lang.com
Lightweight HTML template engine: http://www.tt2.org
If you have any other suggestions for other tools that serve these purposes, feel free to comment below!