Waadu Css A mini Framework
Tags: css, html, webdev, productivity
Published: 2022-06-08 16:59:40

Hello guys today i am going to show you my own mini css framework (still in the development phase)
After using Bootstrap and TailwindCSS , i thought of creating my own mini framework with some different values of my own which i use frequently and also with some extra colors and backgrounds with it.

Lets get started...

CDN - 
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ShubhamTiwari909/WaaduCSS@master/Waaducss.css" />

```

## I have added some properties and components and it can be accessed just like we use in bootstrap or tailwind using the class name in the html tag.

## I am going to show some feature of this mini framework.

# 1. Cards - 

Code -
```html
 <!-- A horizontal card stack -->
      <div class="w-card-group-horizontal">
        <div class="w-card w-card-dark w-card-shadow-large w-bg-ink w-text-walnut">
          <div class="w-card-heading">This is a dark card</div>
          <div class="w-card-body">
            This is a body This is a bodyThis is a bodyThis is a bodyThis is a
            bodyThis is a bodyThis is a body
          </div>
          <div class="w-card-footer">This is a footer</div>
        </div> 
        <div class="w-card w-card-blue-bordered w-card-shadow-small w-card-hover">
          <div class="w-card-heading">This is a bordered only card</div>
          <div class="w-card-body">
            This is a body This is a bodyThis is a bodyThis is a bodyThis is a
            bodyThis is a bodyThis is a body
          </div>
          <div class="w-card-footer">This is a footer</div>
        </div>
        <div class="w-card w-card-red">
          <div class="w-card-heading">This is a card with red background</div>
          <div class="w-card-body">
            This is a body This is a bodyThis is a bodyThis is a bodyThis is a
            bodyThis is a bodyThis is a body
          </div>
          <div class="w-card-footer">This is a footer</div>
        </div>
        <div class="w-card w-white-gradient">
          <div class="w-card-heading w-text-ink">This is a card with gradient background</div>
          <div class="w-card-body">
            This is a body This is a bodyThis is a bodyThis is a bodyThis is a
            bodyThis is a bodyThis is a body
          </div>
          <div class="w-card-footer">This is a footer</div>
        </div>
      </div>

    <!-- A full width responsive card -->
    <div class="w-card-purple-bordered">
      <div class="w-card-heading w-text-ink">This is a card with gradient background</div>
      <div class="w-card-body">
        This is a body This is a bodyThis is a bodyThis is a bodyThis is a
        bodyThis is a bodyThis is a body
      </div>
      <div class="w-card-footer">This is a footer</div>
    </div>
```

Result - 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tc739cfpztoil06dpyqe.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2bb800q1hm6ry48rzrmj.png)


As you can see we have different varieties of card and also in the second image you can see we have a hover effect when the mouse is hover the card gets a full width.

# 2. Grid -
It has grid system startin from 1-10 , and it is applied like 
lg-w-grid-1 for for pc view , md-w-grid-1 for tablet or medium devices and sm-w-grid-1 for mobile devices.
Code - 
```html
  <!-- Grid system -->
      <div style="height:400px" class="w-grid md-w-grid-cols-10 lg-w-grid-cols-8 w-place-items-center w-bluepurple-gradient">
        <h1 class="w-place-self-start">one</h1>
        <h1>two</h1>
        <h1>three</h1>
        <h1>four</h1>
        <h1>five</h1>
        <h1>one</h1>
        <h1>two</h1>
        <h1>three</h1>
        <h1>four</h1>
        <h1>five</h1>
        <h1>one</h1>
        <h1>two</h1>
    </div>
```

Result - 

PC view-

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dtckg4y1r380j8frz4o0.png)

Tablet View - 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ihne7baoqyxayxdsbyo1.png)

Mobile View-


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u5g2lssar8apar2jkfqu.png)

Also it has properties like justify-content , justify-items, justify-self, place-content,place-self and place-items.We have used the place-self property to the first element in the grid and it is responsive by using the classname with lg- and md- , it will make the grid according to the screensize.

# 3. Forms - 
It has styling for forms and it's elements like input,label, select etc (except radio and checkbox button).

Code- 

```html
   <div class="w-flex w-justify-content-center">
      <form class="w-card-blue-bordered w-shadow-medium">
        <div class="w-grid md-w-grid-cols-2 w-m-5 lg-w-grid-cols-2 w-justify-content-baseline">
          <label class="w-form-label w-text-ink">Name</label>
          <input type="text" class="w-form-input w-border-orchid">
        </div>
       <div class="w-grid md-w-grid-cols-2 w-m-5 lg-w-grid-cols-2 w-justify-content-baseline">
        <label class="w-form-label w-text-ink">Email</label>
        <input type="text" class="w-form-input w-border-orchid">
       </div>
       <div class="w-grid md-w-grid-cols-2 w-m-5 lg-w-grid-cols-2 w-justify-content-baseline">
        <label class="w-form-label w-text-ink">Password</label>
        <input type="text" class="w-form-input w-border-orchid">
       </div>
       <div class="w-grid md-w-grid-cols-2 w-m-5 lg-w-grid-cols-2 w-justify-content-baseline">
        <label class="w-form-label w-text-ink">Phone</label>
        <input type="text" class="w-form-input w-border-orchid">
      </div>
      <div class="w-grid md-w-grid-cols-2 w-m-5 lg-w-grid-cols-2 w-justify-content-baseline">
        <label class="w-form-label w-text-ink">City</label>
        <Select type="text" class="w-form-input w-border-orchid w-bluepurple-gradient w-text-ice">
          <option value="A" class="w-text-ink">A</option>
          <option value="B" class="w-text-ink">B</option>
          <option value="C" class="w-text-ink">C</option>
        </Select>
      </div>
      <div class="w-grid lg-w-grid-cols-2">
        <div></div>
        <button class="w-button w-border-radius-2 w-border-solid w-border-bluetack w-border-width-2 w-bluepurple-gradient w-text-ice w-justify-self-center">Submit</button>
      </div>
      </form>
    </div>
```

Result - 

Bordered form - 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vjtb42fkhdmwjtfeqoix.png)

Gradient white form - 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zpj4zt1w96i3l95ymuvc.png)

Dark form - 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3kyx6uivtk82tci7kxz4.png)

# 4. Colors and Backgrounds - 
We have many colours with awesome names like mint, mushroom , champagne, ice , ink , apricot , banana , etc which we can use like w-bg-apricot and for text w-text-apricot and also gradients like w-red-gradient, w-bluepurple-gradient, w-white-gradient,w-black-gradient, etc.

# 5. Squares and Circles - 
Code - 

```html
  <!-- squares -->
    <div class="w-grid lg-w-grid-cols-4 w-m-bottom-5">
      <div
        class="w-grid w-square w-red-gradient w-border-solid w-border-width-2 w-border-ambrosia w-square-hover"
      >
        <h1 class="w-place-self-center">Square</h1>
      </div>
      <div
        class="w-grid w-square w-bluepurple-gradient w-border-solid w-border-width-2 w-border-ambrosia w-square-hover"
      >
        <h1 class="w-place-self-center">Square</h1>
      </div>
      <div
        class="w-grid w-square w-border-solid w-border-width-2 w-border-ambrosia w-square-hover"
      >
        <h1 class="w-place-self-center">Square</h1>
      </div>
    </div>

    <!-- circles -->
    <div class="w-grid lg-w-grid-cols-3 md-w-grid-cols-2">
      <div
        class="w-circle-1 w-border-apricot w-grid w-place-content-center w-darkmode-hover"
      >
        <h1>Hello circles</h1>
      </div>
      <div
        class="w-circle-1 w-border-apricot w-grid w-place-content-center w-darkmode-hover"
      >
        <h1>Hello circles</h1>
      </div>
      <div
        class="w-circle-1 w-border-apricot w-grid w-place-content-center w-darkmode-hover"
      >
        <h1>Hello circles</h1>
      </div>
      <div
        class="w-circle-1 w-border-apricot w-grid w-place-content-center w-darkmode-hover"
      >
        <h1>Hello circles</h1>
      </div>
      <div
        class="w-circle-1 w-border-apricot w-grid w-place-content-center w-darkmode-hover"
      >
        <h1>Hello circles</h1>
      </div>
      <div
        class="w-circle-1 w-border-apricot w-grid w-place-content-center w-darkmode-hover"
      >
        <h1>Hello circles</h1>
      </div>
      <div
        class="w-circle-1 w-border-apricot w-grid w-place-content-center w-darkmode-hover"
      >
        <h1>Hello circles</h1>
      </div>
      <div
        class="w-circle-1 w-border-apricot w-grid w-place-content-center w-darkmode-hover"
      >
        <h1>Hello circles</h1>
      </div>
    </div>
```

Result - 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4oobxzmoau2wrc8wafqh.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9vp0dc3jpqf4p2zcwqsh.png)

As you can see we have circles and squares and these can be used with other properties like background , border , grid etc and they also support hover and animation effect.

# 6. Responsive Navbar -

Code - 

```html
<nav class="w-darkblue-gradient w-p-3 w-text-champagne w-flex w-justify-content-spacebetween sm-block sm-text-center">
          <div class="w-m-2">
            Logo
          </div>

          <div class="w-grid lg-w-grid-cols-5 md-w-grid-cols-5 w-grid-cols-1">
            <div class="w-m-left-2 w-m-right-2">
              <p>Home</p>
            </div>
            <div class="w-m-left-2 w-m-right-2">
              <p>Categories</p>
            </div>
            <div class="w-m-left-2 w-m-right-2">
              <p>Pricing</p>
            </div>
            <div class="w-m-left-2 w-m-right-2">
              <p>Contact</p>
            </div>
            <div class="w-m-left-2 w-m-right-2 w-m-top-1">
             <button class="w-bluepurple-gradient w-text-champagne w-p-left-3 w-p-right-3 w-p-top-1 w-p-bottom-1 w-border-radius-1 w-darkmode-hover">Sign in</button>
            </div>
            </div>
        </nav>
```

Result - 

Pc View - 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/agk8ridhdcemkpogmaef.png)

Tablet or medium view - 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9pyn3vvo4m1rivdqfne9.png)


Mobile View - 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8rzs9h291x13xsn43qml.png)


# 7. Hover and Animation - 
We have some hover effects like full width for cards, w-round-hover, w-darkmode-hover and animation like w-bounce, w-blink, w-flip-x and w-flip-y, w-round-and-square, w-background-change-animation and w-text-animated classes to use.

# 8. Other stylings - 
It includes padding, margin, fonts, flexbox, border, border-radius, buttons, lists etc to use. We have a different set of buttons and we can also create buttons by combining different properties of this mini framework.


Thats it for this post.
THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION , PLEASE MENTION IT IN THE COMMENT SECTION.
^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/higher-order-function-in-javascript-1i5h

https://dev.to/shubhamtiwari909/styled-componenets-react-js-15kk

https://dev.to/shubhamtiwari909/introduction-to-tailwind-best-css-framework-1gdj