README

安装

您可以通过Composer安装此包

composer require ensphere/gnaw

接下来，您必须在config/app.php中安装服务提供者

'providers' => [
    // ...
    Ensphere\Gnaw\Providers\AppServiceProvider::class,
];

后CSS磁盘

最后，您应该在app/config/filesystems.php中添加一个名为post-css的磁盘，其中将保存.pcss文件。这是一个典型的配置

// ...
'disks' => [
    // ...
    'post-css' => [
        'driver' => 'local',
        'root'   => resource_path( 'assets/src/css' ),
    ],
// ...    

可选地，您可以使用以下方法发布配置文件（建议将变量发布并存储在应用程序配置文件中，而不是Post CSS配置文件中）

php artisan vendor:publish --provider="Ensphere\Gnaw\Providers\AppServiceProvider" --tag="config"

使用方法

工具

列

当前最大列数是16；

• col:1-of-2
• col:5-of-16
• col:4-of-12

颜色

• background-color:blue
• color:red

间距

• padding:large

• padding-left:large

• padding-top:small

• padding-right:medium

• padding-bottom:extra-large

• padding-y-axis:very-small

• padding-x-axis:large

• margin:large

• margin-left:large

• margin-top:small

• margin-right:medium

• margin-bottom:extra-large

• margin-y-axis:very-small

• margin-x-axis:large

辅助工具

• full-width
• not-a-list
• float:left | float:right
• children:same-height
• child:vertically-aligned

示例；

<ul class="not-a-list children:same-height">
    <li class="child:vertically-aligned"><img src="http://placehold.it/40x40" alt=""></li>
    <li class="child:vertically-aligned"><img src="http://placehold.it/40x60" alt=""></li>
    <li class="child:vertically-aligned"><img src="http://placehold.it/40x80" alt=""></li>
</ul>

媒体查询变体

这是一个以移动优先的工具框架，所以不需要前缀。可用前缀有tablet--、desktop--、wide--和huge--。

• tablet--padding-x-axis:large
• dektop--col:2-of-12
• wide--margin-left:small
• huge--color:blue