DEV Community

Cover image for Waadu Css A mini Framework
Mysterio
Mysterio

Posted on

Waadu Css A mini Framework

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

Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Result -

Image description

Image description

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>
Enter fullscreen mode Exit fullscreen mode

Result -

PC view-

Image description

Tablet View -

Image description

Mobile View-

Image description

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>
Enter fullscreen mode Exit fullscreen mode

Result -

Bordered form -
Image description

Gradient white form -

Image description

Dark form -

Image description

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>
Enter fullscreen mode Exit fullscreen mode

Result -

Image description
Image description

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>
Enter fullscreen mode Exit fullscreen mode

Result -

Pc View -

Image description

Tablet or medium view -

Image description

Mobile View -

Image description

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

Discussion (4)

Collapse
sh20raj profile image
Shaswat Raj

Nice !
Use minified CDN i.e. :- cdn.jsdelivr.net/gh/ShubhamTiwari9...

Collapse
shubhamtiwari909 profile image
Mysterio Author

Sure βœ…

Collapse
bias profile image
Tobias Nickel

with npm it goes to unpkg.com

i like it, it could be a replacement of mini.css, because that is no longer maintained.πŸ˜’

Thread Thread
shubhamtiwari909 profile image
Mysterio Author

I am adding more styling in it and it is taking time as i am a college student so i have other works also πŸ˜‚πŸ˜‚