hippie/README.md

# HIPPIE

> WORK IN PROGRESS (it is not ready to be used)

This is a [Node.js](https://nodejs.org/) based generator for static HTML documents.

It uses the [gulp](https://gulpjs.com/) module to fiddle everything together. Styling is powered by the CSS extension language [SASS](https://sass-lang.com/). The HTML pages itself are made with the templating engine [Nunjucks](https://mozilla.github.io/nunjucks/).

## Installing

Clone the repository `https://quelltext.interaktionsweise.de/interaktionsweise/hippie.git` to a folder to create your build environment.

Change to the newly created folder. By default this would be *hippie*.

Run the command `git submodule update --init`.
This will load the submodules.

Run the command `npm install`.
This will install all dependencies into the folder *node_modules*.

## Usage

The command `gulp --tasks` will give you an overview of possible actions.

Run the command `gulp` for a live development environment.
This will create a folder *build* with the resulting files.
Also the source files will be watched for changes which are reflected live at [localhost:3000](http://localhost:3000) and the *build* directory.

`gulp build` will create the resulting *build* directory ready for deployment.

HIPPIE is intended to be used as a basis when creating HTML sites. It can be used without changes. It can be modified to have a different look and feel. It also can be used to build a new basis on top of it.

## Content

### Intro

There is an *intro* page which explains the main elements and their intended usage. It uses the default styling methods and also shows variations. The page is written in german language. However it has a semantic structure and the text itself can also just be seen as example content.

### Sass (CSS)

Everything has its default style.

CSS classes follow a naming scheme of `<object>_<description>`.

* *Object* usually is the name of the HTML element. If it is not a elemtn directly it is the thing which receives the styling
* *Description* is a name of the style e.g. what it does, how it looks

## Versioning

This project uses [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://quelltext.interaktionsweise.de/interaktionsweise/hippie/tags).

## Authors

**Stephan Hagedorn** - *Initial work* - [Interaktionsweise](https://interaktionsweise.de)

## License

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.