For those interested in how I built this site, here’s a quick overview. If you don’t find the answers you’re looking for or have a specific question drop me an email, i’d be happy to help.
I’m using Go based static site templating engine Hugo, primarily because it’s flexible and lightning fast. The site uses a custom theme built on top of the Victor-Hugo boilerplate, which is a great starting point for a Gulp and Webpack assets pipeline. I made a few modifications to include SCSS support and a responsive image build task, which generates both retina and non-retina image sizes.
Type is currently set using system defaults, meaning it will render differently depending on your operating system. I’m using a fluid type mixin developed by Mike Riethmuller to make it responsive for different screen resolutions. Type sizes are set using 2 modular scales, 5:6 — minor third for smaller devices and 8:15 — major seventh for desktop.
The CSS is written in SCSS, and follows SuitCSS, a component based CSS methodology developed by Nicholas Gallagher. It’s pretty similar to the BEM method, I just prefer the syntax. Otherwise theres not much in it.
I organise my SCSS partials loosely based on ITCSS, in terms of order of specificity, however I opted to use a more conventional system for file naming and folder structure. I have Sourcemaps set up so go ahead and inspect element to see what’s going on. Alternatively you can head over to github.
Deployment and hosting
The site is hosted directly from a Github repository and uses Netlify, an awesome CDN for continuous deployment. That means when I push changes to Github it automatically deploys the live site.
All the code can be found on github. Feel free to use it for your own learning and development. If you have any questions drop me an email or a tweet. I’d be more than happy to help.