wawecss

v1.2.3

Published

a year ago

WaweCss is a modern and multi-support CSS framework.

Downloads

0High
0Medium
0Low

ebuworks

wawecss css frameworks tailwindcss bootstrap css frameworks

WaweCss

WaweCss is a new CSS Framework designed to provide a set of pre-defined styles and components for building modern and responsive websites and web applications.

Usage

To use WaweCss in your HTML document, follow these steps:

Download the "wawe.css" file from the WaweCss website or repository. Or use with JsDelivr CDN Network.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/2qke/WaweCss@main/wawe.css">

Place the "wawe.css" file in the same directory as your HTML file if you downloaded it from the repo.
Make a sample button design with WaweCss using the sample code below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/2qke/WaweCss@main/wawe.css">
    <title>WaweCss Example!</title>
</head>
<body class="bgr-white">
    <div class="flex flex-row">
        <button class="button-aqua radius-10 m-left-9">Button Example Aqua</button>
        <button class="button-orange radius-6 m-left-9">Button Example Orange</button>
        <button class="button-red radius-8 m-left-9">Button Example Red</button>
        <button class="bgr-gray radius-8 cp m-left-9">Button bgr-gray</button>
        <button class="cp default-button bgr-dark text-white radius-7 m-left-9">Default Button</button>
      </div>
</body>
</html>

Result Aqua Button (Added as an example img)

What will we add next?

text-size, more text-color, more bg-color and some missing styles

Navigation

#Flex #Margin #Border #Background-Color #Text-Color #Text Features #Effect #Justify #Responsive #Other Class

ClassList

Our main goal is for you to use it as multi-support. You can use it in some parts you don't like in libraries such as Bootstrap or TailwindCSS that you usually use. You can also use us as an option. We do not have such a large structure yet, but our goal is to modernize!

Flex

flex — display: flex; | Classic display-flex structure flex-col — flex: direction: column; | Classic display-flex and flex-column structure flex-row — flex: direction: row; | Classic display-flex and flex-row structure

Margin

mx-auto | It ensures that the object is at a certain distance from the right and left. m-left — margin-left | Margin Left class has from 2 to 20 (use m-left-5 vb.) m-right — margin-right | Margin Right class has from 2 to 20 (use m-right-5 vb.)

Border

border — border-radius | Border Radius class has from 2 to 30 (use border-5 vb.)

Background Color

bgr-dark — background-color: rgb(31, 33, 39); | Background color dark bgr-gray — background-color: rgb(101, 101, 109); | Background color gray bgr-white — background-color: rgb(231, 231, 231); | Background color white

Text Color

text-dark — color: rgb(41, 42, 44); | Text color dark text-gray — color: rgb(185, 185, 185); | Text color gray text-white — color: rgb(224, 224, 224); | Text color white

Text Features

text-center | Centers the text. item-center | Used to center items on the vertical (horizontal) axis. text-no-decoration | It removes the lines under the links you are using. list-no-decoration | Removes objects such as dots, numbers or letters in the li classes you create. hide-item | Hides the object.

Effect

white-effect | Adds a white transition effect. (0.3s) red-effect | Adds a red transition effect. (0.3s) orange-effect | Adds a orange transition effect. (0.3s) yellow-effect | Adds a yellow transition effect. (0.3s)

Justify

jcenter | This style attribute is used to center the elements in the flex container horizontally (on the x-axis). jend | This style property aligns items inside the flex container horizontally (on the x-axis) to the right. jright | Aligns the contents of the flex container horizontally to the right. jleft | Aligns the contents of the flex container containing the class horizontally to the left. jbetween | This style property aligns elements in the flex container horizontally (on the x-axis) by spacing them apart.

Responsive

responsive-button — Makes the buttons mobile friendly.

Other

cp — cursor: pointer; | Classic cursor-pointer

Created by 2qke & thislaex My web site: ebusoft.com.tr