搜索peterstollenwerk / auf-style
auf-style
Requires
- bnomei/kirby3-autoid: ^2.7
- getkirby/composer-installer: ^1.1
- getkirby/editor: ^1.0
- hananils/kirby-colors: ^1.1
- sylvainjule/previews: ^1.0
- timoetting/kirby-builder: v2.0.15
Requires (Dev)
- getkirby/cms: ^3.4.2
- phpunit/phpunit: ^9.3.8
- spatie/phpunit-watcher: ^1.22
README
设置
在您的 site.yml 中某个位置
style_settings: auf_style/site_style_settings
复制 site/plugins/auf-style/assets/css
到 my-kirby-site/assets/css
向您的 HTML 添加主题类
<html class="site site--dark" data-active-theme="site--dark">
打开: css/auf-style-fluid-typography.css
调整大小到您喜欢的: --size-7: 4.75;
设置根字体大小，这是流体字体的最小字体大小: --root-font-size-unitless: 14;
设置流体字体的最小和最大屏幕范围
--min-screensize: 100;
--max-screensize: 1200;
$page->style_settings()->toStyle()->toCssClasses();
$page->style_settings()->toStyle()->inlineStyles();
包含的依赖项
颜色转换方法: https://github.com/hananils/kirby-colors
完成
-
测试页面预览 - 盒阴影主题[2020-08-11] -
日/夜模式切换[2020-08-13] -
创建响应式字体原型：[2020-08-13] 1. https://www.smashingmagazine.com/2016/05/fluid-typography/ 2. https://css-tricks.cn/fun-viewport-units/ 3. https://codepen.io/MadeByMike/pen/VvwqvW 4. https://css-tricks.cn/a-complete-guide-to-calc-in-css/ -
盒子预览[2020-08-14] -
[目标：2小时；性能：8小时] 探索是否需要添加专用的按钮颜色到颜色主题？[2020-08-17]-
使用表单占位符来评估日和夜主题[2020-08-17]
-
-
[目标：4-8小时；性能：8小时] 创建带有默认 HTML 元素的测试页面！？[2020-08-17] -
[目标：2小时；性能：2小时] 创建 Auf-元素/链接/按钮[2020-08-17] -
创建构建代码片段以测试字段中的盒子类
-
实现特殊类：.safe-text 和 .safe-text--extra[2020-08-19] -
[目标：2小时；性能：11.5小时] 调整 CSS 样式 // 导入原型 V4 并与测试盒子 Vererbung 合作！[2020-08-19] -
[目标：3小时；性能：3小时] 实现结构 UID 字段中的 UID[2020-08-19]-
颜色主题[2020-08-19] -
背景主题[2020-08-19] -
边框主题[2020-08-19] -
轮廓主题[2020-08-19] -
盒阴影主题[2020-08-19] - 文本阴影主题
-
-
[目标：1小时] 实现页面-theming-21.html 中缺失的盒子变量[2020-08-24]-
轮廓等...[2020-08-24]
-
-
[目标：1小时；性能：4小时] 将页面-theming-21.html 实现到后端[2020-08-25] -
在配置中设置类名 "box-theme-" 和 "boxes-theme-"-前缀，因为我们将在 Auf 元素实现中需要它们[2020-08-25] -
[目标：0.5小时；性能：1小时] 实现硬编码的 fluid-typography.html --> css[2020-08-25] -
[目标：2小时；性能：1.5小时] 实现硬编码的字体大小: https://cdpn.io/stollenwerk/debug/MWyaNzZ/RBrOJXnGzEWM[2020-08-25] -
字体粗细[2020-08-25] -
1小时字体样式[2020-08-25] -
[目标：0.5小时] 实现文本阴影主题：现在使用自定义字段[2020-08-25] -
[目标：2小时] 实现大小: https://cdpn.io/stollenwerk/debug/MWyaNzZ/RBrOJXnGzEWM[2020-08-25] -
[性能：1小时] 字体主题：实现字体大小主题以覆盖默认样式并设置自定义 css_selectors[2020-08-25] -
检查是否可以通过 >html style="--root-font-size: 12;"> 来调整字体大小 Yes![2020-08-26] -
创建自定义样式设置字段[2020-08-26]-
创建 BoxThemeField[2020-08-26] -
将 Box-Theme-Field 实现到 StyleSettingsField 并检查性能[2020-08-26]
-
-
内联样式可以使用并应该使用 Kirby 编辑器来实现！[2020-08-26]-
测试 Kirby 编辑器功能！[2020-08-26]-
看起来编辑器需要设置 yml 配置中的 "pretty: false"：TimOetting/kirby-builder#132[2020-08-26]
-
-
-
也许 Box-Themes 不应该使用变量！？[2020-08-27] -
创建一个类来获取从样式选项卡中所有 CSS 类[2020-08-27] -
实现 --inverted-color 和 --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]- 允许的特性
- rem
- auto
- 自定义 margin-bottom + -rem
- 允许的特性
-
我们需要应用自定义类吗？[2020-08-31] -
我们需要添加 .new-class 到元素中的可能性吗？[2020-08-31]
P1
- 我们需要 "layout--themes" 来进行样式和网格设置！
- 这应该可以从后端的 "element"-live-builds 演示中生成。
.element--page-title {} .element--page-title .title {} .element--page-title .subtitle {} .element--page-title .tagline {}
-
P2: 实现盒子助手
- .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
-
创建可用的默认字体大小主题！
- 也许根据屏幕大小计算填充？
- 也许根据屏幕大小计算边距？
-
实现填充主题？
装饰图片必须作为内容加载，以便 Z-Index 可以如预期那样重叠。
-
在后台创建用于可重用装饰元素的片段以确保 Z-Index 层次
-
实现组件样式：每个自定义组件 "Element" 都可以通过 builder-dummy 进行样式化
-
实现太阳/月亮图标以进行模板切换
-
实现字体大小组件？
P2
-
使移除样式字段变得不可能？?: https://forum.getkirby.com/t/structure-field-disable-add-delete-row-only/14391/9
-
[target: 1h;] 实现链接字段： https://getkirby.com/plugins/oblikstudio/link-field
-
[target: 0.5h;] 将边框半径主题分开！作为一个设计师，我希望独立于边框样式设置边框半径，以便给没有边框的盒子也提供半径。
-
[target: 10m;] 将 --box-shadow-color 添加到颜色主题中
P3
-
为网站/页面/盒子/表格/按钮样式创建测试页面
-
[target: 5h] 每页单独选择起始主题
-
[target: 2h; performace: ] 从后端设置夜间和日间样式
-
[target: 5d] 为每个主题实现出色的样式生成器： https://html-css-js.com/css/generator/text-shadow/
-
[target: 1d] 创建自定义样式视图：作为一个编辑器，我希望有一个快速的后端，以便专注于内容并提高生产力。网站内的样式选项卡生成了 1000 行代码，其中 1/3 是 null 或 ""-值。后端加载速度较慢。不是创建一个专门的样式视图并生成可导入的 CSS 文件更好吗？
-
实现文本样式 [粗体，大写，下划线，删除线] -> 检查 Blocks-插件
-
[target: 6h] 创建渐变预览字段 - 示例插件： https://github.com/sylvainjule/kirby-previews - Kirby 信息： https://getkirby.com/docs/reference/panel/fields/structure#preview-of-fields-in-the-table
-
[target: 3d] 从后端创建 Typescale： https://type-scale.com/
-
[target: 2d] 垂直韵律
-
[target: 1d] Google 字体
-
实现盒子助手类
- .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; }