Tiny Web Stacks

Written by Tyler Sticka on

A small stack of pancakes with butter and syrup on a plate

A lot of my day to day work involves design systems. These can get pretty complex, with a lot of moving parts. Perhaps as a reaction to that, I’ve grown to love small, simple tech stacks for those occasional side projects, micro-sites and one-off experiments that don’t demand as many features or justify such diligent maintenance.

These projects usually start the same way. Once I’ve sketched my idea and have a sense of what I want to do, I create a folder and a package.json file so I can install and manage dependencies:

mkdir new-project
cd new-project
npm init -y

Which dependencies I install depends on the project. If I’m building a single-page app, I might use Parcel, which gives me Sass support, JavaScript bundling, a local development server and a bunch of other features with no configuration:

npm i --save parcel-bundler
touch index.html main.scss app.js
npx parcel index.html

But if my project involves multiple pages or a lot of templating needs, I’m more likely to set it up with Eleventy. This takes the same number of steps:

npm i --save @11ty/eleventy
touch index.md subpage.md
npx @11ty/eleventy --serve

Projects that go well will naturally grow more complex. But there’s something to be said for starting simple.

Tyler Sticka

Tyler Sticka is Cloud Four’s VP of Design, allowing him to think about design systems every day. When he isn’t directing his team, sketching on sticky notes or nitpicking CSS, he enjoys reading comics, making video games and listening to weird music. He tweets as @tylersticka.

Never miss an article!

Get Weekly Digests

Let’s discuss your project! Email Us