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