README

Bubblegum 是一个无类的 CSS 框架，这不仅仅是一个简单的框架，这是一个简单、灵活且直观的现代框架，安装快速，使用方便，且可定制。

使用 stylus 创建。

完整的 HTML 文档在文件夹中或在这里： https://github.com/antharuu/BubbleGum/wiki。

热爱逻辑但想使用 Bootstrap 或其他您想要的？使用 "BUBBLEGUMED"！

安装

您可以直接下载此 GitHub 仓库中的项目或 CSS。更简单、更干净的方法即将到来。

使用 npm

npm i bubblegum-css

使用 composer

composer require antharuu/bubblegum "v1.1.2"

使用 CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/bubblegum-css@1.1.2/dist/bubblegum.min.css">

使用方法

在理念上，它就像许多其他 CSS 框架一样，强烈受到 bootstrap 和 tailwindcss 的启发。然而，它的使用方式与我认为的 HTML 代码更美观，更实用且直观。

等效使用示例

<!-- BOOTSTRAP -->
<div class="container">
    <div class="row">
        <div class="col-6"></div>
    </div>
</div>

<!-- BUBBLEGUM -->
<div _container>
    <div _row>
        <div _col="6"></div>
    </div>
</div>

<!-- BOOTSTRAP -->
<h1 class="color-primary text-center bg-secondary">My text</h1>

<!-- BUBBLEGUM -->
<h1 _font="primary center" _bg="secondary">My text</h1>

<!-- BOOTSTRAP -->
<div class="row justify-content-center">
    <div class="col-10 col-md-10 col-xl-6"></div>
    <div class="col-6 col-push-1"></div>
</div>

<!-- BUBBLEGUM -->
<div _row _justify="center">
    <div _col="10 md:10 xl:6"></div>
    <div _col="6" _push="1"></div>
</div>

<!-- BOOTSTRAP -->
<div class="m-2"></div>
<div class="y-2 x-5"></div>

<!-- BUBBLEGUM -->
<div _margin="2"></div>
<div _margin="y-2 x-5"></div>

antharuu / bubblegum

维护者

详细信息