Your browser doesn’t support some of the latest CSS features used to build this site.

Read more about my usage of new CSS features.

I made my front-end build process and prototyping framework generic and documented it all for others to use.

Yes, another one.

There’s so many front-end frameworks, build tools etc out there, but this is my one. A few people have commented on the structure and build processes of this website and I was speaking to a friend the other day about the subject. We knew that creating generic reusable frameworks like these were greatly beneficial — especially when having to rapidly prototype static sites.

We spent the morning coding together and I was sending him certain files and snippets of mine to have a look at — parts of my gulpfile around automated performance and regression testing, as well as Handlebars templates and snippets. I actually just thought it’d be easier to strip out my website content from the project and thus started creating my framewerk

Framewerk is the stripped down, generic, well-documented version of the framework I used to build this site. It’s also more up to date and uses more modern versions of dependencies.

What does it do then?

It’s for creating static site builds and for quick prototyping of HTML, CSS, JavaScript. It comes with accessibility, performance and regression testing baked in for your pages and components as standard.

I spent a lot of time documenting a break down of the build tasks on the the GitHub README, but in short, it does these things:

  • Organises build files
  • Builds static html pages from Handlebars templates, using Metalsmith
  • Spins up a local server for your site with browsersync tools
  • Runs automated accessibility tests on your static pages
  • Runs automated visual regression tests on your static pages and components
  • Runs automated performance monitoring tests on your website after deployment
  • Produces html documentation for JavaScript and complexity reports
  • Transpiles, lints and builds your JavaScript
  • Transpiles latest CSS features, lints, builds your CSS from your .scss files
  • Implements git hooks to implement testing and enforce standards across your team
  • And probably more…just try it

Opinionated? Yes.
Easy to use for rapid prototyping and static site building? Also yes.

Use it if you want…

git clone https://github.com/furzeface/framewerk.git
cd framewerk
npm install
npm start

More instructions on the GitHub README.

Have it if you want…

It’s all open sourced on GitHub so fork it, change it, do what you want with it.

Open issues for any bugs or suggestions.

framewerk 1.0.0

The name?

It’s one of those cool names where you spell it wrong or put a letter backwards, or something. Also I’m going to see Kraftwerk 3D next week, and it rhymes.