reluem / contao-uikit
一个用于集成UIkit框架的contao扩展包。
0.5.3
2023-01-02 14:44 UTC
Requires
- php: ^7.0
- codefog/contao-haste: ~4.20
- contao/core-bundle: ^4.10
- felixpfeiffer/subcolumns: ^3.1
- menatwork/contao-multicolumnwizard-bundle: ^3.4
- npm-asset/uikit: ^3.5
- oveleon/contao-component-style-manager: ~2.4
Requires (Dev)
- contao/manager-plugin: ^2.0
- doctrine/doctrine-cache-bundle: ^1.3
- friendsofphp/php-cs-fixer: ^2.6
- php-http/guzzle6-adapter: ^1.1
- php-http/message-factory: ^1.0.2
Conflicts
- contao/core: *
- contao/manager-plugin: <2.0 || >=3.0
README
添加到根目录的composer.json
"require" : {
"oomphinc/composer-installers-extender": "^2.0",
},
"extra": {
"installer-types": [
"npm-asset"
],
"installer-paths": {
"assets/{$name}/": [
"type:npm-asset"
]
}
},
"repositories": [
{
"type": "composer",
"url": "https://asset-packagist.org"
}
]
此模块的composer.json中包含自动加载UIkit资源的片段。您需要在根json中具有上述提到的要求,以便从npm-asset加载资源。
"require" : {
"npm-asset/uikit": "~3.0"
},
接下来,在您的文件目录中创建一个自定义的.scss主题,并在您的Contao页面布局中引用它。您的自定义文件将覆盖UIkit核心中的变量,使您能够更改例如颜色或字体。
### Your Custom SCSS file
// 1. Your custom variables and variable overwrites.
// e.g. $global-primary-background: rgb(0, 48, 135);
// 2. Import default variables and available mixins.
@import "../../assets/uikit/src/scss/variables-theme.scss";
@import "../../assets/uikit/src/scss/mixins-theme.scss";
// 3. Your custom mixin overwrites.
// 4. Import UIkit.
@import "../../assets/uikit/src/scss/uikit-theme.scss";
// 5. Other Custom SCSS
特性
模块
- 带有模块选择器的导航栏
- 列集
- 用于新闻订阅的华丽警报
内容元素
- 英雄图片
- 带按钮的链接预告
其他
- 图标插入标签
- JS自动移动到DOM末尾