Statix makes creating and working with static HTML templates quick and easy.
Why do I need Statix in my life?
Have you ever wanted the power of reusing snippets in your HTML but don’t know where to start?
Do you want a good base front-end structure for your project without throwing the whole of Bootstrap it?
Statix has your back.
Here are some of the simple problems that Statix helps you solve:
Statix leverages Assemble to give you the ability to write a snippet of HTML once and then include it across multiple HTML files.
Editing a navigation link across 10 static HTML pages? No problem. Want to change a piece of footer text across the whole of your site templates? Easy!
Simply manage one code snippet and include it wherever you want it to appear in each HTML template.
Statix uses Kickoff and Grunt to give you a minimal starting point for your front-end projects. Just enough structure – no extra bloat.
Write content in Markdown
One of the biggest pains in the ass is having to write content for static sites or templates in HTML.
Statix brings together the power of using a templating language (such as Handlebars), with the flexibility of being able to write content using Markdown.
This means that for small site builds (ones that don’t need a CMS) content editors can update a much more readable markdown file, rather than dig into HTML syntax.
Fast starting point
Statix gives you a great base to get up and running as quickly as possible. Whether templating a full site or just spinning up a prototype, Statix tries to get out of your way so you can start coding.
There’s no complicated config to mess around with before you start. Once installed, simply typing
grunt serve into the terminal will spin up a local server that you can see your project change in realtime as you edit it.
Statix can be extended as much or as little as you like.
The base setup of Statix only utilises a very small amount of Assemble’s features. If you want to use it’s more powerful templating functionality then you can extend this in the usual way, as you would if you were using Assemble on it’s own without the Statix framework.
What’s under the hood
Collectively, this gives you a framework that streamlines the creation of maintainable, flexible HTML templates with virtually no project setup required.
Should you wish to rip out the CSS (or SCSS) and JS and replace it with a structure or framework you feel more comfortable with (such as Bootstrap), that is also very simple with a couple of small changes to the project setup.
- Github: .zip
- Git clone:
- SVN checkout:
svn checkout https://github.com/TryKickoff/statix your-project-folder
Getting started with Statix
- Download or clone the git repo. To clone run
git clone https://github.com/TryKickoff/statix.git your-project-folder
- Ensure you have Sass, Node and Grunt installed, as Statix needs these dependencies to operate.
- Install the project dependencies by running
npm installfrom the root of the directory.
grunt serve. This will build your project for the first time and use the connect module to start a static web server for your templates.
- Build your templates using Statix!
Compiled template files are created in the
/dist folder at the root of the project, and this can be changed in the Gruntfile if you would rather compile elsewhere.
/js/dist and Sass is compiled to the
Installing Statix dependencies
- Install Node from nodejs.org
- Install Grunt CLI -
npm install -g grunt-cli
Once these dependencies are installed, see 'Getting started with Statix' for instructions on running your project.
Further documentation and demos
- See the Kickoff documentation for all demos and information relating to Kickoff
- Check out the Assemble documentation for more information on Assemble.
- Read the excellent Getting started guide to make a start with Grunt.
Using your own front-end framework
Don't want to use Kickoff?
That’s cool – Statix has been built so the you can do this very easily.
To replace the SCSS
Delete the files in the /assets/src/scss folder, replacing them with your framework of choice.
Next, go to
/_grunt-configs/config.js in the root of the project and change the name of the compiled
distFile to whatever you want to.
Finally, change the reference to the compiled CSS file in the
To replace the JS
Delete the files in the
/js folder, replacing them with your own structure.
Replacing anything else…
Statix uses Grunt to take care of simple tasks like minification and concatenation.
If you know Grunt yourself, you can change pretty much any aspect of the config as you would any other Grunt project. If you don't like certain default config options of Statix, fork the repo and change them!
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -m 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request
If you're using Statix we'd love to hear about it; give us a shout on Twitter, or email us and let us know how you’re using it.