PHPackages peterstollenwerk/auf-style - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. peterstollenwerk/auf-style ActiveKirby-plugin peterstollenwerk/auf-style ========================== auf-style 0.0.10(5y ago)028[3 issues](https://github.com/peterstollenwerk/auf-style/issues)[1 PRs](https://github.com/peterstollenwerk/auf-style/pulls)proprietaryHTML Since Aug 25Pushed 5y ago1 watchersCompare [ Source](https://github.com/peterstollenwerk/auf-style)[ Packagist](https://packagist.org/packages/peterstollenwerk/auf-style)[ RSS](/packages/peterstollenwerk-auf-style/feed)WikiDiscussions master Synced today READMEChangelog (10)Dependencies (9)Versions (12)Used By (0) auf-style test ============== [](#auf-style-test) --- Setup ----- [](#setup) --- somewhere in your site.yml: `style_settings: auf_style/site_style_settings` --- copy `site/plugins/auf-style/assets/css` to `my-kirby-site/assets/css` --- add theme-class to your html: `` Open: `css/auf-style-fluid-typography.css` Adjust Sizes to your likeing: `--size-7: 4.75;` Set the root font-size, this is going to be the min-font-size for fluid typo: `--root-font-size-unitless: 14;` Set Fluid Typography min and max screen range `--min-screensize: 100;` `--max-screensize: 1200;` --- `$page->style_settings()->toStyle()->toCssClasses();` `$page->style_settings()->toStyle()->inlineStyles();` --- Included Dependencies --------------------- [](#included-dependencies) Color Convert Methods: --- DONE ---- [](#done) - *Testpage Preview - Box-Shadow-Themes* \[2020-08-11\] - *Day/Night-Mode Toggle* \[2020-08-13\] - *Create Responsive Type Prototype:* \[2020-08-13\] 1. 2. 3. 4. - *Boxes Preview* \[2020-08-14\] - *\[target: 2h; performance: 8h\] Explore if it´s necessary to add dedicated button-colors to the color theme?* \[2020-08-17\] - *Use a form-dummy to evaluate the day & night-themes* \[2020-08-17\] - *\[target: 4h-8h performance: 8h\] Create Test Page with Default HTML-Elements!?* \[2020-08-17\] - *\[target: 2h; performance: 2h\] Create Auf-Elements/Link/Button* \[2020-08-17\] - Created Builder Snippets to test Box Classes in the field - *Implement Special Classes: .safe-text and .safe-text--extra* \[2020-08-19\] - *\[target: 2h; performance: 11.5h\] Fine Tune CSS Styles // Import Prototype V4 and work with test boxes Vererbung!* \[2020-08-19\] - *\[target: 3h; performance: 3h\] Implement UID from Structure UID Field* \[2020-08-19\] - *Color-Themes* \[2020-08-19\] - *Background-Themes* \[2020-08-19\] - *Border-Themes* \[2020-08-19\] - *Outline-Themes* \[2020-08-19\] - *Box-Shadow-Themes* \[2020-08-19\] - Text-Shadow-Themes - *\[target: 1h\] Implement missing box-variables in page-theming-21.html:* \[2020-08-24\] - *outlines, etc...* \[2020-08-24\] - *\[target: 1h; performance: 4h\] Implement page-theming-21.html into backend* \[2020-08-25\] - *Set the classnames "box-theme-" and "boxes-theme-"-prefix in the config, because we will need them for our auf elements implementation* \[2020-08-25\] - *\[target: 0.5; performance: 1h\] Implement hardcoded fluid-typography.html --> css* \[2020-08-25\] - *\[target: 2h; performance: 1.5h\] Implement hardcoded Font-Sizes: * \[2020-08-25\] - *Font-weight* \[2020-08-25\] - *1h Font-style* \[2020-08-25\] - *\[target: 0.5h\] Implement Text-Shadow-Theme: Use custom-field for now* \[2020-08-25\] - *\[target: 2h\] Implement Sizes: * \[2020-08-25\] - *\[performance: 1h\] Type-Themes: Implement Font-Size-Themes to overwrite default styles and set custom css\_selectors* \[2020-08-25\] - *Check if it´s possible to resize the font-size via >html style="--root-font-size: 12;"> Yes!* \[2020-08-26\] - *Create Custom Style Settings Field* \[2020-08-26\] - *Create BoxThemeField* \[2020-08-26\] - *Implement Box-Theme-Field into StyleSettingsField and check performance* \[2020-08-26\] - *Inline Styles can and should be realized with Kirby Editor!* \[2020-08-26\] - *Test Kirby Editor functionality!* \[2020-08-26\] - *Seems like the editor needs »pretty: false« setting in the yml config: [TimOetting/kirby-builder#132](https://github.com/TimOetting/kirby-builder/issues/132)* \[2020-08-26\] - *Maybe the Box-Themes shoudln´t be using variables!?* \[2020-08-27\] - *Create Class to get all CSS classes from Style Tab* \[2020-08-27\] - *Implement --inverted-color and --inverted-background-color* \[2020-08-30\] - *custom\_inline\_style="background-color: red;"* \[2020-08-30\] - *P1: InlineStyle: margin, oder --margin-left: 4rem;* \[2020-08-30\] margin-top: rem..., custom... \[auto, initial, unser\] - allowed Features - rem - auto - custom margin-bottom +-rem - *Do we need to apply custom-classes?* \[2020-08-31\] - *Do we need the possibility to add a .new-class to an element?* \[2020-08-31\] --- ### P1 [](#p1) - We need »layout--themes« for Style and Grid-Settings! - This could and should be generated from demo »element«-live-builds in the backend. .element--page-title {} .element--page-title .title {} .element--page-title .subtitle {} .element--page-title .tagline {} - P2: Implement Box Helpers - .border-outset, .borders-outset - .padding-outset, .paddings-outset - .text-safe, .texts-safe - safe-text--textshadow - safe-text--background - min-height: ...rem -> element-box / custom-box - style\_children - Create Usable Default Font-sizes Theme! - Maybe calc the padding depending on the screen-size? - Maybe calc the margin depending on the screen-size? - Implement Padding-Theme? Deko Bilder müssen als Content geladen werden, damit Z-Index überlappungen wie gewünscht funktionieren. - Create Snippets for Reusable DecoElements in the backend to ensure Z-Index Layering - Implement Component-Style: Every custom component »Element« could be styled via builder-dummy - Implement Sun-/Moon Icons for Template Switching - Implement Font-Size Component? --- ### P2 [](#p2) - Make it impossible to remove style fields??: - \[target: 1h;\] Implement Link Field: - \[target: 0.5h;\] Separate Border-Radius-Theme! As a Designer I want to set a border-radius independently of the border style, to give even boxes without border a radius. - \[target: 10m;\] add --box-shadow-color to the color\_themes --- ### P3 [](#p3) - Create Testpage for Site / Page / Box / Table / Button-Styles - \[target: 5h\] Select Starting Theme individually per Page - \[target: 2h; performace: \] Set night and day styles from backend - \[target: 5d\] Implement nice style-generator for each theme: - \[target: 1d\] Create custom Styles-View As an editor i want a fast backend to concentrate on the content and be productive. The style tab inside the site generates a 1000 lines, 1/3 of them are null or ""-values. Backend loads slower. Wouldn´t it be better to create a dedicated styles-view and generate the styles as a imprtable css file? - Select Themes via: - Implement Text-Styles \[bold, uppercase, underline, strike\] -> check Blocks-Plugin - \[target: 6h\] Create Preview Field For Gradients - Example Plugin: - Kirby Info: - \[target: 3d\] Create Typescale from Backend: - \[target: 2d\] Vertical Rhythm - \[target: 1d\] Google Fonts - implement box helper classes: - .border-outset .outline { outline-color: var(--outline-color); outline-width: var(--outline-width); outline-style: var(--outline-style); outline-offset: var(--outline-offset); } \*, my-outlins-selector { --outline-width: 2px; --outline-style: dashed; --outline-offset: 2px; } ### Health Score 23 — LowBetter than 27% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity7 Limited adoption so far Community7 Small or concentrated contributor base Maturity51 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~1 days Total 10 Last Release 2078d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/3701148?v=4)[Pedro](/maintainers/torpedro)[@torpedro](https://github.com/torpedro) --- Top Contributors [![peterstollenwerk](https://avatars.githubusercontent.com/u/11475106?v=4)](https://github.com/peterstollenwerk "peterstollenwerk (213 commits)") ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/peterstollenwerk-auf-style/health.svg) ``` [![Health](https://phpackages.com/badges/peterstollenwerk-auf-style/health.svg)](https://phpackages.com/packages/peterstollenwerk-auf-style) ``` ### Alternatives [getkirby/cms The Kirby core 1.5k535.5k352](/packages/getkirby-cms)[distantnative/retour-for-kirby Manage redirects and track 404s right from the Kirby CMS Panel 14689.4k1](/packages/distantnative-retour-for-kirby)[arnoson/kirby-vite Vite helper for Kirby CMS 9759.2k3](/packages/arnoson-kirby-vite)[getkirby/staticache Static site performance on demand 9615.4k](/packages/getkirby-staticache)[fabianmichael/kirby-meta Your all-in-one powerhouse for any SEO and metadata needs imaginable. 6910.7k1](/packages/fabianmichael-kirby-meta)[thathoff/kirby-oauth Kirby OAuth 2 Plugin 3823.9k](/packages/thathoff-kirby-oauth) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)