Rongila.css

A class based css librarary built with animations and responsiveness in mind😍

version: 0.2.1

Features -

1. Written in vanilla css✔
2. Simple class based usage😄
3. lightweight(<30KB)🐱‍🏍
4. Easy to use animations & hover effects🤯

Installation -

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/TriptoAfsin/rongila-css@2.10/rongila.css">

🌍Demo Site: Visit

Usage instructions -

⚡Full Documentation⚡

Example 1(Text Sizes) -

<p class="txt-sm center-txt">Small text</p>
<p class="txt-med center-txt">Med text</p>
<p class="txt-lg center-txt">Lg text</p>
<p class="txt-xl center-txt">XL text</p>

Output -

Example 2(Card) -

<div class="card-container">
    <div class="card">
        <p class="card-title">Card Title</p>
        <p class="card-subtitle">Card Subtitle😎</p>
        <p class="card-txt">Card txt, 12,3,45, Dhaka Bangladesh</p>
        <button class="card-btn pad2 right">CLick Me</button>
    </div>
</div>

Output -

Example 3(Footer, Columns, Rows) -

<footer class="shadow grey">
        <div class="column">
            <p class="txt-xl">Rongilla CSS</p>
            <p class="txt-med">Yet another class based css library</p>
            <p>All rights reserved by: Tripto Afsin ©2020</p>
        </div>
        <div class="column">
            <p class="txt-lg">Browse</p>
            <a href="https://www.facebook.com/">Home</a>
            <a href="https://www.facebook.com/">Browse</a>
            <a href="https://www.facebook.com/">About</a>
        </div>
        <div class="column">
            <p class="txt-lg">Sign up for newsletter</p>
           <input type="email" placeholder="Email" class="no-animation">
        </div>
        <div class="column">
            <p class="txt-lg">Address</p>
            <p>Dhaka, Bangladesh</p>
        </div>
        <div>
            <p class="txt-lg">Follow us</p>
            <a href="https://www.facebook.com/"><img  class="footer-icon" src="1200px-Facebook_Logo_%282019%29.png"></img></a>
            <a href="https://twitter.com/?lang=en"><img class="footer-icon" src="https://assets.stickpng.com/thumbs/580c43c53e.png"></img></a>
            <a href="https://www.instagram.com/"><img  class="footer-icon" src="https://upload.wikimedia.orgstagram_logo_2016.svg.png"></img></a>
        </div>
    </footer>

Output -