frank bosma

frankbosma.nl

The code and frontend setup of this website is available on Github. It uses quite some stuff that I wanted to check out for automated site content and code generation.

Build tool / task automation

To handle webpage generation, dependency management, SASS -> CSS translation, minification of CSS and JavaScript, image creation and maintain a development server that refreshes the site automatically with every change, I started using Gulp. It let's me do all the build steps individually or in parallel so I can have an install task that creates a production ready version of the site with one command.

CMS

I use Jekyll as a website / pages generator. Jekyll let's you easily generate webpages with Markdown or HTML and a templating language.

Responsiveness

The Responsive SASS framework is included as a Git submodule. I only use it's simple responsive grid mixins. Compared to Bootstrap it doesn't add the visual styles and it's easy to just use parts of it through SASS. The submodule system allows me to not have to include the entire framework in my repository and to easily benefit from updates.

For responsive images I'm using the <picture> polyfill and through reading I've noticed that with a combination of srcset and sizes attributes you get the best responsive image results. Images are then chosen based on viewport size, screen resolution and the width of the image component.

The different image sizes are generated from a source file through the gulp-image-resize plugin that's talking to GraphicsMagick or ImageMagick.

JavaScript dependencies

Bower is working excellent as a frontend dependency manager to download all the right versions of external JavaScript files like html5shiv or the <picture> polyfill.

Fork me on GitHub