Learn NextGenCSS🔥 with Project in 4 minutes !?!?

NextGenCSS 🔥

This is a fast easy CSS framework for your next project . It will provide a bunch of features to fast your development process and make writing CSS fast !!!

Github

!!! Version 0.1 released

Documentation

Learn this CSS library of next generation .

Documentation

Usage/Examples


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rudransh61/NextGenCSS-/src/index.css" media="print" onload="this.media='all'">
</head>
<body>
    <h1>Namaste 🙏</h1>
</body>
</html>

Examples of websites you can create

Design simple and beautiful websites FAST !!

Responsive also

Heading

<h1>This is h1 tag</h1>
<h2>This is h2 tag</h2>
<h3>This is h3 tag</h3>
<h4>This is h4 tag</h4>
<h5>This is h5 tag</h5>
<h6>This is h6 tag</h6>

Back grounds

<div class="bg-primary">primary</div>
<div class="bg-dark font-white">dark</div>
<div class="bg-alert">alert</div>
<div class="bg-leaf">leaf</div>
<div class="bg-orange">orange</div>
<div class="bg-yellow">yellow</div>
<div class="bg-gray">gray</div>
<div class="bg-purple">purple</div>
<div class="bg-choco">choco</div>
<div class="bg-pink">pink</div>
<div class="bg-white">white</div>

Not only this .... more at Docs

Project Blog Page

<div class="mg-x-3">
        <nav class="navbar bg-leaf mg-b-2">
            <div class="logo">Blog Name</div>
            <ul class="nav-links">
                <!-- USING CHECKBOX HACK -->
                <input type="checkbox" id="checkbox_toggle" />
                <label for="checkbox_toggle" class="hamburger">&#9776;</label> <!--Hamburger for navbar-->
                <div class="menu">
                    <li><a href="/">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">Contact</a></li>
                </div>
            </ul>
        </nav>
        <div class="grid mg-y-2">
            <div class="grid-item box">
                <div class="left ">
                    <div class="box">
                        <h1 class="">Home Page</h1>
                    </div>
                    <text>This is a small description of this home page</text>
                    <form>
                        <input placeholder="Subscribe to the NewsTeller" />
                        <button type="submit" class="btn bg-leaf" href="#">Button</button>
                    </form>
                </div>
                <div class="right">
                    <img src="https://avatars.githubusercontent.com/u/115872354?v=4" alt="img" class="size-0.6" style="margin-left: 3rem;">
                    <p class="flex" style="margin-left: 6rem;">This is a text</p>
                </div>
            </div>
        </div>
        <hr class="mg-x-4">
        <div class="container">
            <div class="col-3 mg-y-3  b-primary b-curve-primary" style="border-radius: 1rem;">
                <img src="https://avatars.githubusercontent.com/u/115872354?v=4" class="" >
                <h3 class="card-title">Post 1</h3>
                <p class="card-body">Title or description</p>
            </div>
            <div class="col-3 mg-y-3  b-primary b-curve-primary" style="border-radius: 1rem;">
                <img src="https://avatars.githubusercontent.com/u/115872354?v=4" class="" >
                <h3 class="card-title">Post 2</h3>
                <p class="card-body">Title or description</p>
            </div>
            <div class="col-3 mg-y-3  b-primary b-curve-primary" style="border-radius: 1rem;">
                <img src="https://avatars.githubusercontent.com/u/115872354?v=4" class="" >
                <h3 class="card-title">Post 3</h3>
                <p class="card-body">Title or description</p>
            </div>
            <div class="col-3 mg-y-3  b-primary b-curve-primary" style="border-radius: 1rem;">
                <img src="https://avatars.githubusercontent.com/u/115872354?v=4" class="" >
                <h3 class="card-title">Post 4</h3>
                <p class="card-body">Title or description</p>
            </div>
        </div>
    </div>