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?
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
htmlpages 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
- Transpiles latest CSS features, lints, builds your CSS from your
- Implements git hooks to implement testing and enforce standards across your team
- And probably more…just try it
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
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.
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.