wawecss v1.2.3
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