Welcome to the Teutonic CSS docs (retired)

As of 2023-05 Teutonic CSS will no longer be continued. More details here.

This repo here (only) contains the website contents for https://teutonic.co, which is the documentation for Teutonic CSS. This is a static page thing, based on Jekyll, hosted on GitHub pages. The CSS for Teutonic CSS is over here.

Quick contributing

Found a typo or an error? Just edit the Markdown and send a pull request.

Development

Want to contribute and develop the main styles and the docs? This is how to run the build process locally. It will run two builds in parallel: on the one side, the doc pages (here) are getting generated by Jekyll and on the other side, the Gulp process that will compile the SCSS from the other folder.

1. Have Node & NPM (or yarn) installed
2. Have Ruby and Jekyll installed, best with Bundler
3. Have "Teutonic CSS" locally in a folder (on the same level as this docs folder)
4. Install Node dependencies from package.json: npm install
5. Run bundle exec jekyll serve (or jekyll serve)
6. And in a different terminal session run: gulp
7. Now you can edit the "Teutonic SCSS" files and the docs as well
8. The CSS changes will be loaded into the docs

It is recommended to install the dependencies in the vendor folder: https://jekyllrb.com/tutorials/using-jekyll-with-bundler/#configure-bundler

Data structure

• docs where the site is gonna be build.
• All content lives in _examples.

Component frontend metadata cheat sheet

title:        Hallowach     # will be rendered as headline
category:     typography    # which context?
fullscreen:   true          # full width or not?        OPTIONAL, default false
hide:         false         # Hide the whole thing?     OPTIONAL, default false
hideExample:  false         # Hide the example output?  OPTIONAL, default false
hideCode:     true          # Hide code example?        OPTIONAL, default false

description: >
  lrem inspun …             # below headline in paragraph, Markdown, OPTIONAL

syntax:       .box          # One or multiple syntax examples [ "asdasd", "dsdaasd"]

details: >
  lrem inspun …             # even more info …

scss:                       # SCSS files in use without filetype
  - 'box'
  - 'grid'

data:                       # dummy data to populate examples
  websites:
    4chan : http://www.4chan.org/
    A List Apart : https://alistapart.com

Releasing

The release cycle sucks. Here is how to do it currently:

Release the core

1. Run npm version patch or whatever to create a new version in package.json
2. Take care that an associated Git tag is created as well
3. Make sure to push tag and changes to GitHub like git push --tags
4. Run gulp so that the new CSS files are created as well
5. Run npm publish to up the source code and make CDN links from UNPKG available

Update the docs (here)

The teutonic-css-docs should know about the new release as well. Therefore find all instances of the release tag in _config.yml and update accordingly. Push the changes to GitHub to update the files on https://teutonic.co

Author

• Frank Lämmer

License

Teutonic Docs are released under Creative Commons.