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 .
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">☰</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> Output with few lines of code Responsive ALSO
see on github .\video_example.mp4
Thanks to our Contributors !!!!!
Thanks 😁
Top comments (1)
star pls