羽CSS -一个小框架的CSS工匠

介绍

该库的目标是构建一个基础框架，其中包含网格系统、若干辅助工具，并尽可能实现对旧版浏览器的最大兼容性。

快速启动

• 从jsDelivr CDN中包含

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/0kyn/plume-css/dist/css/plume.min.css">

开发

• 克隆存储库

git clone https://github.com/0kyn/plume-css.git my-project 

cd my-project 

• 观察变化

npm run dev 

生产

为生产构建资产

npm run prod 

文档

Plume CSS首先是移动的，断点被定义为Bootstrap:

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { ... }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

网格系统（12列）以同样的方式工作

<div class="plume-grid">
  <div class="row">
    <div class="col-6">50%</div>
    <div class="col-6">50%</div>
  </div>

  <div class="row">
    <div class="col-3">25%</div>
    <!-- 75% -->
    <div class="col-9">
      <div class="row">
        <div class="col-6">50% of 75%</div>
        <div class="col-6">50% of 75%</div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-12 col-xl-4">mobile->100% - laptop(>1200px)->25%</div>
    <div class="col-12 col-xl-4">mobile->100% - laptop(>1200px)->25%</div>
    <div class="col-12 col-xl-4">mobile->100% - laptop(>1200px)->25%</div>
  </div>
</div>

这个网格系统是基于 float 这使得它与旧的浏览器兼容。

助手

• 将一行中的单个列居中

<div class="row">
  <div class="col-4 col-center">~33.3% centered column</div>
</div>

• 隐藏特定断点处的列

<div class="row">
  <div class="col-12 hide-xl">column hidden on laptop(>1200px)</div>
</div>

• 仅为特定断点显示列

<div class="row">
  <div class="col-12 show-xl">column only visible on laptop(>1200px)</div>
</div>

• 杂项
  你会发现各种各样的帮助者 src/scss/base/helpers.scss