themejs2

• Jekyll Includes Doc
• Best Practices

Build on:

Reference to the Projects that are used to build this project:

• Responsive CSS design system from TrunkJS
• TrunkJS Content Area

Designs

• XD Design EPraxis Theme

Setup

This Project uses kickstart

• Clone the repository and run kickstart in the root directory. Inside the container run kick dev to execute the development server defined in .kick.yml.
• Don't forget to run npm install within kickstart environment.

Running It

kickstart
kick dev

Versionen bauen und veröffentlichen

Ein npm-Release wird durch einen Git-Tag im Format release/X.Y.Z ausgelöst. Beispiel für Version 1.0.12:

npm run build
git tag release/1.0.12
git push origin release/1.0.12

Der GitHub-Publish-Workflow akzeptiert nur drei numerische Versionssegmente, übernimmt 1.0.12 automatisch als Paketversion, baut das Paket und veröffentlicht es bei npm. package.json muss vorher nicht manuell versioniert werden. Jede npm-Versionsnummer darf nur einmal veröffentlicht werden.

Guides

How to Change Styles

• For theme-specific changes, edit the CSS of a theme, e.g. src/epraxis-theme/theme.scss (not to be confused with the files in docs/_src)
• Base styles come from published npm packages: @nextrap/style-* and @trunkjs/*

No legacy CSS!

Kunde: Ich möchte auf allen Blog-Seiten unter der Infotext den Hintergrund blau haben!

Bisher: Klar, ich füge eine Klasse info-box-blog hinzu und setze den Hintergrund auf blau.

Wir wollen dahin: Ich ängere das drekt in der _layout/blog.html Datei.

In order to keep the CSS small and maintainable, we do not allow legacy CSS in this project. This means:

<!-- Bad: -->
<div class="info-box-blog">...</div>

<!-- Good: -->
<div class="d-flex border border-1 bg-light p-5" style="opacity: 0.8" style-xl="opacity: 1">...</div>

Why? Keep it Simple Stupid (KISS)!

• All styles that are specific within a layout or include should be done with utility classes and style attributes.
• Utility classes are documented and changes will have a predictable effect.
• Layout and includes should be readable and understandable without having to look up custom CSS.

Checklist for adding a CSS Class:

Do you think you need a new CSS class? Please check the following:

• [ ] There is no utility class that does the same
• [ ] You need media query that is not covered by style-md= or style-xl= syntax (see trunkjs responsive docs)
• [ ] The class is used in more than one place
• [ ] The class is univerally useful (e.g. .info-box is not, .text-box is) and is not too specific
• [ ] The class has no side effects with other classes or requires specific ordering