An open API service indexing awesome lists of open source software.

https://github.com/fortrabbit/teutonic-css-docs

These are the docs for Teutonic CSS
https://github.com/fortrabbit/teutonic-css-docs

css-framework scss

Last synced: 4 months ago
JSON representation

These are the docs for Teutonic CSS

Awesome Lists containing this project

README

          

# Welcome to the Teutonic CSS docs (retired)

As of 2023-05 Teutonic CSS will no longer be continued. More details [here](https://medium.com/teutonic-css/retiring-my-own-little-css-framework-e0a130ca2a33).

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](https://github.com/fortrabbit/teutonic-css/).

## 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**
2. Have "Teutonic CSS" locally in a folder (on the same level as this docs folder)
3. Install Node dependencies from package.json: `npm install`
4. Run `bundle exec jekyll serve` (or `jekyll serve`)
5. And in a different terminal session run: `gulp`
6. Now you can edit the "Teutonic SCSS" files and the docs as well
7. 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

```yml
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](https://twitter.com/frank_laemmer)

## License

Teutonic Docs are released under Creative Commons.