README

Seeds: 为中小企业启动的发行版

轻量级发行版，可启动任何规模的项目，您可以使用它来加速您的项目。

Seeds专注于阿拉伯语网站和RTL界面，如果您在阿拉伯语网站上遇到任何问题，欢迎您与我们合作。

赞助和支持

Sprintive是一家将想法变为现实的网络解决方案提供商，以人为本，Drupal是我们行动的核心，它通过深入理解业务目标和目标来构建和交付Drupal项目，以帮助公司创新和成长。

文档

• 创建子主题
• 使用Sass进行样式设计
• 启用RTL样式
• 您可以在Sass中使用混合
• 您可以扩展的Sass占位符类
• CKEditor RTL和LTR样式
• 在Sass中使用响应式字体大小
• 在某些内容类型中禁用bootstrap容器
• 覆盖blazy加载器
• 设置默认媒体

创建子主题

创建子主题很简单，您需要在项目中执行git init，然后运行create_subtheme.sh并遵循说明，您就可以得到一个现成的主题。运行

./public_html/profiles/contrib/seeds/themes/custom/seeds_coat/scripts/create_subtheme.sh

您将被提示输入您主题的机器名称和标签，之后，主题将自动创建和激活。

使用Sass进行样式设计

创建子主题后，它将自动在子主题文件夹中运行npm install，您需要做的就是运行

gulp watch OR npm start

然后开始设计。完成后，请确保运行

gulp build OR npm run build

在部署到生产环境时构建和压缩CSS。

您可以在theme.json中修改某些设置

{
	"livereloadPort": 35729,
	"rtlEnabled": false
}

启用RTL样式

在您的THEMENAME.theme中，找到以下行

/* Comment out and change "THEMENAME" to enable rtl style */
// $variables['page']['#attached']['library'][] = 'THEMENAME/rtl';

取消注释以启用RTL样式。

您可以在Sass中使用混合

@include form($gutter: 15px, $min-width: 180px);

此混合定义了表单的一般类

• .form-2col
• .form-3col
• .form-4col

当您创建一个网络表单时，您可以创建一个容器，然后添加上面的任何一个作为包含表单元素的行。默认情况下，它适用于所有网络表单。

@include form-inline($gutter: 5px, $break: 767px);

定义一个带有间隙和最大断点的内联表单。

@include responsive-image-blazy($lg, $md, $sm);

与seeds_coat响应式图像样式结合使用时，它可能非常有用。此混合用于您想使用blazy与核心响应式图像样式结合使用时，以避免使用padding-top重新排列内容。请检查_mixin.scss文件以获取更多信息。

.node--type-article {
	@include responsive-image-blazy(
		('w':1200,'h':900),
		('w':900,'h':600),
		('w':400,'h':400)
	);
}

其中'w'是图像的宽度，'h'是高度。此混合使用三个bootstrap断点：lg, md, sm

@include shadow();

在元素上设置阴影容器。与图像一起使用时很有用。

@include fontawesome($content, $psuedo: 'before');

包含一个fontawesome图标。请参阅Fontawesome v4

@include fontawesome('\f2d1');

您可以扩展的Sass占位符类

@extend %center

居中元素。

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: auto;

@extend %absolute-full

将位置设置为绝对并将它拉伸。

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;

CKEditor RTL和LTR样式

转到/admin/config/content/seeds或Admin >> Configuration >> Content Authoring >> Seeds Content Settings，您将看到CKEditor样式设置。默认情况下，它已初始化，但如果您想更改它，请随时更改。

在Sass中使用响应式字体大小

在您的_theme-variables.scss文件中，取消注释此行

// $enable-responsive-font-sizes: true

您现在可以使用bootstrap 4内置的混合

@include  rfs(64px);
// OR
@include  responsive-font-size(64px);
// OR
@include  font-size(64px);

在某些内容类型中禁用bootstrap容器

前往 /admin/structure/types，点击编辑一个内容类型。您将看到各种设置。在底部，您会看到 容器设置，导航到那里并启用 流体容器 来禁用 Bootstrap 容器。

覆盖blazy加载器

前往 /admin/config/seeds_media。您将看到 blazy 设置。勾选 覆盖 blazy 加载器？ 然后设置背景图片和颜色为您喜欢的样式，点击保存并刷新缓存，您应该会看到加载器呈现不同的外观。

设置默认媒体

我们还提供了一项便捷的功能，您可以设置一些默认媒体，以防止客户端意外编辑。简单来说，编辑任何媒体，您会在底部看到一个复选框，默认媒体，勾选它并保存，现在只有具有 绕过默认媒体访问权限 的用户才能编辑媒体。