HIPPIE

Hippie interweaves preeminent personal interface elements

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

This is a Node.js based generator for static HTML documents.
It uses the Eleventy project to fiddle everything together.

Styling is powered by the CSS extension language SASS. The HTML pages are written with templating engines or directly as HTML files. Mainly Liquid is used, but Markdown and Nunjucks are also options.

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

Different scripts are provided through package.json:

Run the command npm run serve 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:8080 and the /build directory.

npm run build will just create the resulting /build directory and npm run deploy will use a path prefix (hippie by default) and create the results in /deploy 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 an element directly it is the thing which receives the styling
• Description is a name of the style e.g. what it does, how it looks

JavaScript (JS)

The codebase uses ECMAScript 2023 Language Specification (14th edition).
However, currently the JSHint configuration only allows 11 as highest version.

ID values are written in camelCase. The scheme further uses parts for specific contexts.

If the ID is for an interactive element the first part is an abbreviation of the action.

• add - Add
• qry - Query
• rmv - Remove
• set - Set
• slt - Select
• tgl - Toggle

Versioning

This project uses SemVer for versioning. For the versions available, see the tags on this repository.

Contribution

For contribution please use the Conventional Commits specification.
The commit type can include the following:

• feat – A new feature is introduced with the changes
• fix – A bug fix has occurred
• chore – Changes that do not relate to a fix or feature and don't modify src or test files (for example updating dependencies)
• refactor – Refactored code that neither fixes a bug nor adds a feature
• docs – Updates to documentation such as the README or other Markdown files
• style – Changes that do not affect the meaning of the code, likely related to code formatting such as white-space, missing semicolons, and so on.
• test – Including new or correcting previous tests
• perf – Performance improvements
• ci – Continuous integration related
• build – Changes that affect the build system or external dependencies
• revert – Reverts a previous commit

Authors

Stephan Hagedorn - Initial work - Interaktionsweise

License

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