Verstat is a tool, intended to simplify and automate website development process.

After years of CMS-based, then Grunt and Docpad-based frontend development, we just made our own vehicle. It is very similar, but simpler and smarter.

This website is made with Verstat. Source code available at GitHub.

Prerequisites

1. Install fresh stable Node.JS with NPM from official website.
2. Install Verstat CLI tool:

   npm install -g verstat-cli

New project

1. Create project dir, open terminal at this directory.
2. Initialize empty project:

   verstat init

3. Install your favorite plugins:

   verstat install watch livereload jade coffee stylus

4. Start Verstat!

   verstat serve

5. Open browser at http://localhost:8080/
6. Edit files in src directory and see changes live!

Generate static website

verstat generate

... and take output from out directory.

verstat install <plugin1> <plugin2>
verstat uninstall <plugin1> <plugin2>

General purpose

watch

Watch source files for changes and rebuild. It is simple but very smart.
Only relevant files are rebuilt.

livereload

Do livereload on file changes. HTML and JS reloads whole page, while CSS is applied without page reload. Works together with "watch" plugin.

sprockets

Concat css and js files in sprockets-like way:

/*= require ... */

and

/*= require_tree ... */

Examples: verstat.min.js and verstat.min.css.

globals

Prepend file contents into all other files same-type source files. Currently supports Stylus and Jade files.

For example, you have many Stylus files.
You can define global settings, such as fonts, dimensions, utility mixins without needing to @import.
See here.

Preprocessors

coffee

CoffeeScript is a little language that compiles into JavaScript.
http://coffeescript.org/

jade

Jade is a high performance template engine heavily influenced by Haml and implemented with JavaScript
http://jade-lang.com/

stylus

Expressive, dynamic, robust CSS.
http://learnboost.github.io/stylus/

less

Less is a popular CSS pre-processor.
http://lesscss.org/

marked

Markdown is a plain text formatting syntax.
http://en.wikipedia.org/wiki/Markdown

Postprocessors

prettify-html

do correct HTML prettifying

uglify

JavaScript mangler/minifier

csso

Yandex's CSS optimizer/minifier

cssmin

port of YUICompressor for CSS

group-css-media-queries

don't be scared on preprocessor output, media query sections will be grouped!

BEM

Plugins related to Block-Element-Modifier methodology. More info at bem.info

bemto

kizu's bemto smart mixins for jade. Depends on bem plugin.

bem

generic bem boilerplate

jadebem [deprecated]

our old simple mixins for jade. Deprecated in favor of bemto.

Other plugins

moment

adds moment.js to templates, for date formatting

Verstat is and always will be open source project.

Feel free to fork any Verstat-related repository and make pull requests at GitHub.

Any questions and proposals → [email protected].

Contributors

• Se7enSky – birthplace
• @krava – maintainer, core and plugins
• @romavab – verstat.info website maintainer
• Kiselev – logo designer