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.
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>
text-size, more text-color, more bg-color and some missing styles
#Flex
#Margin
#Border
#Background-Color
#Text-Color
#Text Features
#Effect
#Justify
#Display
#Cards
#Responsive
#Other Class
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 — 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
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-radius | Border Radius class has from 2 to 30 (use border-5 vb.)
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-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-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.
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)
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.
d-block | Changes the default behavior of an item and displays the item in a block layout. A block layout means that the element stretches horizontally to use the full width of the row that contains it. Therefore, an item with a block order will not be on the same line as other items that come before or after it. The width of an element with a block layout is automatically adjusted based on the content it contains, and the width of the element may vary depending on the screen or the top element.
d-contents | Removing the display of the element itself, showing its contents directly as the contents of the parent element. That is, an element with the .d-contents class replaces its content, not itself. Therefore, an item with this property is not displayed in the containing row or block, and is only displayed so that its content is at the same level as the items above or below it.
d-inline | Displays images of the item inline with other content side-by-side. Therefore, an item with an inline layout will be displayed on the same line as any other content it is tracking. The width of the element will be limited by the height of the content and will not move to a new line as long as the content is placed side by side.
d-inline-block | it makes the element behave as if it has a block layout, while displaying it in an inline layout juxtaposed with other content. Therefore, an element with an inline-block layout will display on the same line as other surrounding content and adjust itself to the width of the content. However, the height and vertical properties of the content are applied as in the block layout and placed in a row with other elements surrounding the element content.
d-inline-flex | While showing the item in inline layout side by side with other content, it also allows to manage the content with flex layout. Flex layout provides the ability to organize and align content flexibly and automatically, making it easy to organize and sort content.
d-inline-table | While displaying the item in inline layout juxtaposed with other content, it also allows to organize the content in a tabular layout. The table layout provides features to organize and align content in rows and columns.
d-list-item | displays the item in the order list item, and therefore the item behaves like a bullet or, respectively, a list element. This style attribute is assigned by default to li tags within HTML lists and helps these tags create the bullet or sequence of the list.
cards | WaweCSS default Cards
cards-shadowy | WaweCSS shadowy Cards
cards-border | WaweCSS border Cards
container-1200 | Functionally, when you use this class, you can keep your content within a limited area and limit it to a certain width, not using the full width of your page. This can be useful when you want to control and edit the width of the contents.
responsive-button | Makes the buttons mobile friendly.
responsive-container | Makes the container mobile friendly.
cp — cursor: pointer; | Classic cursor-pointer
Created by 2qke & thislaex
My web site: ebusoft.com.tr laéx site: laex.com.tr