Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
June 8, 2022 04:59 pm GMT

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

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 -

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>

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>

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>

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>

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


Original Link: https://dev.to/shubhamtiwari909/waadu-css-a-mini-framework-4bfi

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To