Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/2qke/wawecss

WaweCss, is a modern CSS framework.
https://github.com/2qke/wawecss

css framework wawe wawecss

Last synced: 2 days ago
JSON representation

WaweCss, is a modern CSS framework.

Awesome Lists containing this project

README 

        
# 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:



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



````html



``````



2. Place the "wawe.css" file in the same directory as your HTML file if you downloaded it from the repo.



3. Make a sample button design with WaweCss using the sample code below.



```html



    

    

    

    WaweCss Example!



    


        Button Example Aqua

        Button Example Orange

        Button Example Red

        Button bgr-gray

        Default Button

      



```

# 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


#Display


#Cards


#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.



## Display

`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

`cards` | WaweCSS default Cards 


`cards-shadowy` | WaweCSS shadowy Cards


`cards-border` | WaweCSS border Cards



## Container

`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

`responsive-button` | Makes the buttons mobile friendly.


`responsive-container` | Makes the container mobile friendly.



## Other

`cp — cursor: pointer;` | Classic cursor-pointer



> Created by 2qke & thislaex


> My web site: ebusoft.com.tr

> laéx site: laex.com.tr