https://github.com/antharuu/bubblegum

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.
https://github.com/antharuu/bubblegum

classless classless-css css efficiency-css-framework framework modern stylus

Last synced: about 2 months ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/antharuu/bubblegum
• Owner: antharuu
• License: mit
• Created: 2020-12-28T16:09:59.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2023-10-31T13:47:27.000Z (about 1 year ago)
• Last Synced: 2024-10-18T08:29:18.745Z (2 months ago)
• Topics: classless, classless-css, css, efficiency-css-framework, framework, modern, stylus
• Language: Stylus
• Homepage: https://bubblegum.vercel.app
• Size: 5.77 MB
• Stars: 11
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.html
  • Changelog: CHANGELOG.html
  • License: LICENSE

Awesome Lists containing this project

README

        
README.md
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.
Created with stylus.
A complete html documentation is in the folder or here: https://github.com/antharuu/BubbleGum/wiki.
LOVE LOGIC BUT WANT TO USE BOOTSTRAP OR WHAT YOU WANT ? USE "BUBBLEGUMED"!
INSTALLATION
You can simply download the project or the css on this github repository. Easier and cleaner ways to come.
With npm
npm i bubblegum-css
With composer
composer require antharuu/bubblegum "v1.1.2"
With CDN


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/bubblegum.min.css">
USAGE
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.
Examples of equivalent use
<!-- 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>
`