-
Notifications
You must be signed in to change notification settings - Fork 2
/
README.html
34 lines (30 loc) · 3.53 KB
/
README.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html><head><meta charset="UTF-8"><title>README.md</title></head><body><p align="center"><img width="200" src="https://i.postimg.cc/zXc2sf0z/Bubblegum.png" alt="Bubblegum icon"></p><p>Bubblegum is a classless CSS framework, this is more than a simple framework, this is a simple, flexible and intuitive modern framework, fast to install, easy to use, and customizable.</p><p>Created with <a href="https://stylus-lang.com/">stylus</a>.</p><p><a href="https://github.com/antharuu/BubbleGum/issues"><img src="https://img.shields.io/badge/Version-1.1.1-green" alt="GitHub issues"></a><a href="https://openbase.io/js/bubblegum-css?utm_source=embedded&utm_medium=badge&utm_campaign=rate-badge"><img src="https://badges.openbase.io/js/rating/bubblegum-css.svg" alt="Rate on Openbase"></a></p><p>A complete html documentation is in the folder or here: <a href="https://github.com/antharuu/BubbleGum/wiki">https://github.com/antharuu/BubbleGum/wiki</a>.</p><h4 id="love-logic-but-want-to-use-bootstrap-or-what-you-want--use-bubblegumed">LOVE LOGIC BUT WANT TO USE BOOTSTRAP OR WHAT YOU WANT ? USE "<a href="https://github.com/antharuu/Bubblegumed">BUBBLEGUMED</a>"!</h4><h2 id="installation">INSTALLATION</h2><p>You can simply download the project or the css on this github repository. Easier and cleaner ways to come.</p><h3 id="with-npm">With npm</h3><pre><code>npm i bubblegum-css</code></pre><h3 id="with-composer">With composer</h3><pre><code>composer require antharuu/bubblegum "v1.1.2"</code></pre><h3 id="with-cdn">With CDN</h3><pre><code class="language-html">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bubblegum-css@1.1.2/dist/bubblegum.min.css"></code></pre><h2 id="usage">USAGE</h2><p>In the idea it's just a css framework like many others, it's strongly inspired by bootstrap and tailwindcss. It is however used differently and in a way that I find is more aesthetic for the html code and more practical and intuitive to use.</p><h3 id="examples-of-equivalent-use">Examples of equivalent use</h3><pre><code class="language-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></code></pre><pre><code class="language-html"><!-- BOOTSTRAP -->
<h1 class="color-primary text-center bg-secondary">My text</h1>
<!-- BUBBLEGUM -->
<h1 _font="primary center" _bg="secondary">My text</h1></code></pre><pre><code class="language-html"><!-- 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></code></pre><pre><code class="language-html"><!-- 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></code></pre><p align="center"><img width="120" src="https://i.postimg.cc/zXc2sf0z/Bubblegum.png"></p></body></html>`