Learn NextGenCSS🔥 with Project in 4 minutes !?!?
Published: 2024-01-06 09:47:27


  

#  NextGenCSS 🔥
  ![logo](https://github.com/rudransh61/NextGenCSS-/raw/master/logo.png)

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 
[Github](https://github.com/rudransh61/NextGenCSS-)
## !!! Version 0.1 released
  
##  Documentation

Learn this CSS library of next generation .

[Documentation](https://nextgencss.gitbook.io/untitled/)
  
##  Usage/Examples

  

```html

<!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 !!

![example1](https://raw.githubusercontent.com/rudransh61/NextGenCSS-/master/example1.png)

- Responsive also


![example2](https://raw.githubusercontent.com/rudransh61/NextGenCSS-/master/example2.png)

## Heading
```html 
<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
```html
<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](https://nextgencss.gitbook.io/)

## Project Blog Page
```html
<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>

```

## Output with few lines of code Responsive ALSO

see on github .\video_example.mp4


## Thanks to our Contributors !!!!!
<!-- Copy-paste in your Readme.md file -->

<a href = "https://github.com/rudransh61/NextGenCSS-/graphs/contributors">
  <img src = "https://contrib.rocks/image?repo=rudransh61/NextGenCSS-"/>
</a>


Thanks 😁