Statix makes creating and working with static HTML templates quick and easy.
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.
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.
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.
Statix is essentially a simple setup of Assemble, a powerful static site generator, combined with Kickoff, a minimal front-end base framework, all tied together with a few handy Grunt setup tasks.
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:
https://github.com/TryKickoff/statix.git your-project-folder - SVN checkout:
svn checkout https://github.com/TryKickoff/statix your-project-folder
- 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. - Run
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.
Source maps are also created for both the Javascript and Sass. Javascript is compiled to the /js/dist and Sass is compiled to the /css folder.
- 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.
Statix is a combination of three tools; Assemble, Kickoff and Grunt. The documentation for these tools should be looked at for extending the base setup of Statix.
- 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.
Don't want to use Kickoff?
That’s cool – Statix has been built so the you can do this very easily.
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 html_start.hbs in statix/src/templates/includes
Delete the files in the /js folder, replacing them with your own structure.
Then, in /_grunt-configs/javascript.js either change the references to your own JS files, or if you would like to add in your own JS grunt helpers – such as browserify or RequireJS – then add this in as you usually would as a task in this config file.
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
Developed by Ashley Nolan & Zander Martineau.
Uses the excellent static site generator Assemble, which is developed and maintained by Jon Schlinkert and Brian Woodward.
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.
