Shubham Tiwari

Posted on Jun 8, 2022

Waadu Css A mini Framework

#css #html #webdev #productivity

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 -

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

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

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 -

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

Tablet View -

Mobile View-

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-

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

Gradient white form -

Dark form -

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 -

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

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 -

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

Tablet or medium view -

Mobile View -

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