README

本项目是实用工具的集合，适用于任何Web项目。这包括Sass混入。

安装

然后在您的composer中包含它

"require": {
  "wearebase/web-front-end-utilities" : "*"
}

并指定版本或最低版本。

配置包的安装位置

如果您想在除 vendor 之外的地方安装，在您的 composer.json 中添加以下内容

"extra": {
  "installer-paths": {
    "wp-content/themes/timber/packages/{$name}": ["wearebase/web-front-end-utilities"]
  }
}

启用

Sass

启用 Sass

将包添加到您的Compass构建路径中。在这个例子中，我已经导入了该项目的所有包。

add_import_path "wp-content/themes/timber/packages"

使用 Sass

• 在您的项目变量中，您可以添加以下内容来覆盖默认值
  • $grid-gutter-width
  • $magic-gutter
  • $magic-margin-gutters
  • $magic-padding-gutters
  • $magic-tablet-margin-gutters
  • $magic-tablet-padding-gutters
  • $magic-mobile-margin-gutters
  • $magic-mobile-padding-gutters

文件顺序

• 字体堆栈
• • 您的项目设置文件 -
• • 您的bootstrap变量 -
• 响应式
• 混入
• • 您的Sass代码 -
• 神奇边距

Sass: 包含内容

混入

提供大量包含，有助于您编写CSS。

包括亮点

• 伪元素生成
• 神奇的垂直居中
• hocus（在一个规则中包含hover和focus）
• 比例生成器
• 响应式字体大小 - 需要"responsive"文件
• 精灵混入
• 额外Bootstrap！

响应式

响应式包含了一组响应式工具，用于针对bootstrap断点 - 移动、平板电脑、桌面和大型桌面。这些将根据您的bootstrap配置而变化，但如果没有提供，则默认为bootstrap的默认值。

还提供了适用于视网膜设备、视网膜-sm、视网膜-xs和iPhone 5的混入。

在添加您的bootstrap变量后包含此文件。

字体堆栈

首先在Sass中包含此文件，您可以使用大量字体堆栈。完全可选，但可能很有用。

神奇边距

使用类似 mt4 的类，可以快速为项目添加 4 个边距的边距。如果使用bootstrap，则会自动拉入边距，但默认为10px。

类的示例

• [type][direction][x]: type: p 或 m，direction: t r b l 的 x 边距
  • 示例： pt2、mb0、mt2、pl2
• 如果方向为空，则填充或边距将应用于所有方向
  • 示例：m0，p1，p4
• 添加 t- 仅适用于平板电脑（需要导入“响应式”）
• 添加 m- 仅适用于手机（需要导入“响应式”）

如果您引用的栅格大小没有被生成，只需调整变量以匹配您想要的栅格数量。栅格从0生成到您指定的数量。