93 lines
No EOL
3.9 KiB
Markdown
93 lines
No EOL
3.9 KiB
Markdown
# HIPPIE
|
||
|
||
Hippie interweaves preeminent personal interface elements
|
||
|
||
> 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 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](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://quelltext.interaktionsweise.de/interaktionsweise/hippie/tags).
|
||
|
||
## Contribution
|
||
|
||
For contribution please use the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#summary) 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 a 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 semi-colons, 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](https://interaktionsweise.de)
|
||
|
||
## License
|
||
|
||
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details. |