The Skella front end is a web project skeleton. It is intended to be a good starting place for new projects or example code for people who want to stop using Notepad and FTP to build web sites.
That said, you can serve the output of skella from any front end process like nginx and you can easily integrate skella with back end web stacks like Django, Negroni, Flask, or one of the Node engines.
One of the main features of skella is the Living Style Library which contains examples of the styles and components in the system.
Grunt ties it all together.
First, install Node.
Then use npm to fetch dependencies:
sudo npm install -g bower sudo npm install -g grunt-cli # From the skella root dir npm install
There are three directories which you will use during development:
- static: files like images and JS files that are deployed unchanged
- template: source files like LESS and mustache templates
- dist: the directory where the static and compiled files end up
Note: Don't edit anything in /dist as it will be overwritten. Instead, edit the files in /templates or /static.
The context data for the mustache templates lives in /templates/context.json.
To update Bootstrap variables, edit /templates/variables.less. To enable or disable Bootstrap components, edit /templates/bootstrap.less.
To run the Bower install, compile the mustache templates and LESS files, copy static files into /dist, and then concatenate and make sourcemaps run this:
To start an HTTPd on localhost:8000 and then automatically recompile mustache templates and LESS files if they change, run this:
The HTTPd we use is a little smart and it will notice if new CSS shows up in /dist/compiled.css and then automatically inject it into your browser. So, don't be surprised when you don't need to hit reload to see CSS tweaks.
If you're just changing LESS files and you don't want to wait for the rest of the compilation tools then run this:
Skella uses QUnit for testing.
If you're running
grunt dev then you can point your browser at localhost:8000/tests/.
If you want to run the tests in phantomjs then run this:
To add tests, edit /static/tests/tests.js.
Possible future work
This project is an effort of Podipo but depends on a HUGE ecosystem of open source code. So, what kind of people would we be if we kept Skella all to ourselves?
This project is licensed under the MIT open source license.
See the included LICENSE for details.