YS CSSv1.0
YS CSS is designed to help your existing css frameworks. Developer Yasin Sunmaz.
Margin
| Class | Css | Description |
|---|---|---|
| .m0 | margin: 0!important; | Leaves no gaps in the outer area |
| .m5 | margin: 5!important; | Creates an outer space of 5px. |
| .m10 | margin: 10!important; | Creates an outer space of 10px. |
| .m15 | margin: 15!important; | Creates an outer space of 15px. |
| .m20 | margin: 20!important; | Creates an outer space of 20px. |
| .m25 | margin: 25!important; | Creates an outer space of 25px. |
| .m30 | margin: 30!important; | Creates an outer space of 30px. |
| .m50 | margin: 50!important; | Creates an outer space of 50px. |
Margin Top
| Class | Css | Description |
|---|---|---|
| .mt-0 | margin-top: 0!important; | Resets top gap |
| .mt-5 | margin-top: 5!important; | Creates a 5px area to the top of the outer area. |
| .mt-10 | margin-top: 10!important; | Creates a 10px area to the top of the outer area. |
| .mt-15 | margin-top: 15!important; | Creates a 15px area to the top of the outer area. |
| .mt-20 | margin-top: 20!important; | Creates a 20px area to the top of the outer area. |
| .mt-25 | margin-top: 25!important; | Creates a 25px area to the top of the outer area.. |
| .mt-30 | margin-top: 30!important; | Creates a 30px area to the top of the outer area. |
| .mt-50 | margin-top: 50!important; | Creates a 50px area to the top of the outer area. |
| .mt-75 | margin-top: 75!important; | Creates a 75px area to the top of the outer area. |
| .mt-100 | margin-top: 100!important; | Creates a 100px area to the top of the outer area. |
Margin Bottom
| Class | Css | Description |
|---|---|---|
| .mb-0 | margin-bottom: 0!important; | Resets bottom gap |
| .mb-5 | margin-bottom: 5!important; | Creates a 5px area to the bottom of the outer area. |
| .mb-10 | margin-bottom: 10!important; | Creates a 10px area to the bottom of the outer area. |
| .mb-15 | margin-bottom: 15!important; | Creates a 15px area to the bottom of the outer area. |
| .mb-20 | margin-bottom: 20!important; | Creates a 20px area to the bottom of the outer area. |
| .mb-25 | margin-bottom: 25!important; | Creates a 25px area to the bottom of the outer area. |
| .mb-30 | margin-bottom: 30!important; | Creates a 30px area to the bottom of the outer area. |
| .mb-50 | margin-bottom: 50!important; | Creates a 50px area to the bottom of the outer area. |
| .mb-75 | margin-bottom: 75!important; | Creates a 75px area to the bottom of the outer area. |
| .mb-100 | margin-bottom: 100!important; | Creates a 100px area to the bottom of the outer area. |
Margin Left
| Class | Css | Description |
|---|---|---|
| .ml-0 | margin-left: 0!important; | Resets left gap |
| .ml-5 | margin-left: 5!important; | Creates a 5px area to the left of the outer area. |
| .ml-10 | margin-left: 10!important; | Creates a 10px area to the left of the outer area. |
| .ml-15 | margin-left: 15!important; | Creates a 15px area to the left of the outer area. |
| .ml-20 | margin-left: 20!important; | Creates a 20px area to the left of the outer area. |
| .ml-25 | margin-left: 25!important; | Creates a 25px area to the left of the outer area. |
| .ml-30 | margin-left: 30!important; | Creates a 30px area to the left of the outer area. |
| .ml-50 | margin-left: 50!important; | Creates a 50px area to the left of the outer area. |
| .ml-75 | margin-left: 75!important; | Creates a 75px area to the left of the outer area. |
| .ml-100 | margin-left: 100!important; | Creates a 100px area to the left of the outer area. |
Margin Right
| Class | Css | Description |
|---|---|---|
| .mr-0 | margin-right: 0!important; | Resets right gap |
| .mr-5 | margin-right: 5!important; | Creates a 5px area to the right of the outer area. |
| .mr-10 | margin-right: 10!important; | Creates a 10px area to the right of the outer area. |
| .mr-15 | margin-right: 15!important; | Creates a 15px area to the right of the outer area. |
| .mr-20 | margin-right: 20!important; | Creates a 20px area to the right of the outer area. |
| .mr-25 | margin-right: 25!important; | Creates a 25px area to the right of the outer area. |
| .mr-30 | margin-right: 30!important; | Creates a 30px area to the right of the outer area. |
| .mr-50 | margin-right: 50!important; | Creates a 50px area to the right of the outer area. |
| .mr-75 | margin-right: 75!important; | Creates a 75px area to the right of the outer area. |
| .mr-100 | margin-right: 100!important; | Creates a 100px area to the right of the outer area. |
Paddings
| Class | Css | Description |
|---|---|---|
| .p0 | padding: 0!important; | No spaces inside |
| .p5 | padding: 5!important; | Creates an interior area of 5px. |
| .p10 | padding: 10!important; | Creates an interior area of 10px. |
| .p15 | padding: 15!important; | Creates an interior area of 15px. |
| .p20 | padding: 20!important; | Creates an interior area of 20px. |
| .p25 | padding: 25!important; | Creates an interior area of 25px. |
| .p30 | padding: 30!important; | Creates an interior area of 30px. |
| .p50 | padding: 50!important; | Creates an interior area of 50px. |
Padding Top
| Class | Css | Description |
|---|---|---|
| .pt-0 | padding-top: 0!important; | Cleans the gaps above the interior area. |
| .pt-5 | padding-top: 5!important; | Creates a 5px area above the inner area. |
| .pt-10 | padding-top: 10!important; | Creates a 10px area above the inner area. |
| .pt-15 | padding-top: 15!important; | Creates a 15px area above the inner area. |
| .pt-20 | padding-top: 20!important; | Creates a 20px area above the inner area. |
| .pt-25 | padding-top: 25!important; | Creates a 25px area above the inner area.. |
| .pt-30 | padding-top: 30!important; | Creates a 30px area above the inner area. |
| .pt-50 | padding-top: 50!important; | Creates a 50px area above the inner area. |
| .pt-75 | padding-top: 75!important; | Creates a 75px area above the inner area. |
| .pt-100 | padding-top: 100!important; | Creates a 100px area above the inner area. |
Padding Bottom
| Class | Css | Description |
|---|---|---|
| .pb-0 | padding-bottom: 0!important; | Cleans the gaps beneath the interior area. |
| .pb-5 | padding-bottom: 5!important; | Creates a 5px area below the inner area. |
| .pb-10 | padding-bottom: 10!important; | Creates a 10px area below the inner area. |
| .pb-15 | padding-bottom: 15!important; | Creates a 15px area below the inner area. |
| .pb-20 | padding-bottom: 20!important; | Creates a 20px area below the inner area. |
| .pb-25 | padding-bottom: 25!important; | Creates a 25px area below the inner area. |
| .pb-30 | padding-bottom: 30!important; | Creates a 30px area below the inner area. |
| .pb-50 | padding-bottom: 50!important; | Creates a 50px area below the inner area. |
| .pb-75 | padding-bottom: 75!important; | Creates a 75px area below the inner area. |
| .pb-100 | padding-bottom: 100!important; | Creates a 100px area below the inner area. |
Padding Left
| Class | Css | Description |
|---|---|---|
| .pl-0 | padding-left: 0!important; | Clears gaps to the left of the internal area. |
| .pl-5 | padding-left: 5!important; | Creates a 5px area to the left of the internal area. |
| .pl-10 | padding-left: 10!important; | Creates a 10px area to the left of the internal area. |
| .pl-15 | padding-left: 15!important; | Creates a 15px area to the left of the internal area. |
| .pl-20 | padding-left: 20!important; | Creates a 20px area to the left of the internal area. |
| .pl-25 | padding-left: 25!important; | Creates a 25px area to the left of the internal area. |
| .pl-30 | padding-left: 30!important; | Creates a 30px area to the left of the internal area. |
| .pl-50 | padding-left: 50!important; | Creates a 50px area to the left of the internal area. |
| .pl-75 | padding-left: 75!important; | Creates a 75px area to the left of the internal area. |
| .pl-100 | padding-left: 100!important; | Creates a 100px area to the left of the internal area. |
Padding Right
| Class | Css | Description |
|---|---|---|
| .pr-0 | padding-right: 0!important; | Cleans gaps to the right of the internal area. |
| .pr-5 | padding-right: 5!important; | Creates a 5px area to the right of the internal area. |
| .pr-10 | padding-right: 10!important; | Creates a 10px area to the right of the internal area. |
| .pr-15 | padding-right: 15!important; | Creates a 15px area to the right of the internal area. |
| .pr-20 | padding-right: 20!important; | Creates a 20px area to the right of the internal area. |
| .pr-25 | padding-right: 25!important; | Creates a 25px area to the right of the internal area. |
| .pr-30 | padding-right: 30!important; | Creates a 30px area to the right of the internal area. |
| .pr-50 | padding-right: 50!important; | Creates a 50px area to the right of the internal area. |
| .pr-75 | padding-right: 75!important; | Creates a 75px area to the right of the internal area. |
| .pr-100 | padding-right: 100!important; | Creates a 100px area to the right of the internal area. |
Width
| Class | Css | Description |
|---|---|---|
| .wid-auto | width: auto !important; | The width is automatically adjusted according to the scanner. |
| .wid-25 | width: 25px !important; | Sets the width to 25 px. |
| .wid-50 | width: 50px !important; | Sets the width to 50 px. |
| .wid-75 | width: 75px !important; | Sets the width to 75 px. |
| .wid-100 | width: 100px !important; | Sets the width to 100 px. |
| .wid-125 | width: 125px !important; | Sets the width to 125 px. |
| .wid-150 | width: 150px !important; | Sets the width to 150 px. |
| .wid-175 | width: 175px !important; | Sets the width to 175 px. |
| .wid-200 | width: 200px !important; | Sets the width to 200 px. |
Height
| Class | Css | Description |
|---|---|---|
| .hei-auto | height: auto !important; | The height is automatically adjusted according to the scanner. |
| .hei-25 | height: 25px !important; | Sets the height to 25 px. |
| .hei-50 | height: 50px !important; | Sets the height to 50 px. |
| .hei-75 | height: 75px !important; | Sets the height to 75 px. |
| .hei-100 | height: 100px !important; | Sets the height to 100 px. |
| .hei-125 | height: 125px !important; | Sets the height to 125 px. |
| .hei-150 | height: 150px !important; | Sets the height to 150 px. |
| .hei-175 | height: 175px !important; | Sets the height to 175 px. |
| .hei-200 | height: 200px !important; | Sets the height to 200 px. |
Buttons
Example
Red Button Dark Red Button White Button Yellow Button Green Button Blue Button Dark Blue Button Gray Button
<!-- Standard red (button) -->
<button type="button" class="button button-red">Default red button</button>
<!-- Standard red button -->
<a href class="button button-red">Default red button</a>
<!-- Standard dark red button -->
<a href class="button button-dark-red">Default dark red button</a>
<!-- Standard white button -->
<a href class="button button-white">Default white button</a>
<!-- Standard yellow button -->
<a href class="button button-yellow">Default yellow button</a>
<!-- Standard green button -->
<a href class="button button-green">Default green button</a>
<!-- Standard blue button -->
<a href class="button button-blue">Default blue button</a>
<!-- Standard dark blue button -->
<a href class="button button-dark-blue">Default dark blue button</a>
<!-- Standard gray button -->
<a href class="button button-gray">Default gray button</a>
Button Size
<!-- Extra small button -->
<a href class="button button-blue button-xs">Default yellow button</a>
<!-- Small button -->
<a href class="button button-blue button-sm">Default white button</a>
<!-- Medium button -->
<a href class="button button-blue button-md">Default dark red button</a>
<!-- Large button -->
<a href class="button button-blue button-lg">Default red button</a>
Button Radius
<!-- Large radius button -->
<a href class="button button-blue button-r-lg">Default red button</a>
<!-- Medium radius button -->
<a href class="button button-blue button-r-md">Default dark red button</a>
<!-- Small radius button -->
<a href class="button button-blue button-r-sm">Default white button</a>
<!-- Extra small radius button -->
<a href class="button button-blue button-r-xs">Default yellow button</a>
Colors
Example
Black Text White Text Red Text Blue Text Yellow Text Dark Blue Text Green Text Orange Text Gray Text Sea Green Text
<!-- Black text -->
<span class="black">Black Text</span>
<!-- White text -->
<span class="white">White Text</span>
<!-- Red text -->
<span class="red">Red Text</span>
<!-- Blue text -->
<span class="blue">Blue Text</span>
<!-- Yellow text -->
<span class="yellow">Yellow Text</span>
<!-- Dark blue text -->
<span class="dark-blue">Dark Blue Text</span>
<!-- Green text -->
<span class="green">Green Text</span>
<!-- Orange text -->
<span class="orange">Orange Text</span>
<!-- Gray text -->
<span class="gray">Gray Text</span>
<!-- Sea green text -->
<span class="sea-green">Sea Green Text</span>
Background Colors
Example
Black Background Color White Background Color Red Background Color Blue Background Color Yellow Background Color Dark Blue Background Color Green Background Color Orange Background Color Gray Background Color Sea Green Background Color
<!-- Black background color -->
<span class="b-black white">Black Background Color</span>
<!-- White background color -->
<span class="b-white">White text</span>
<!-- Red background color -->
<span class="b-red">Red Background Color</span>
<!-- Blue background color -->
<span class="b-blue">Blue Background Color</span>
<!-- Yellow background color -->
<span class="b-yellow">Yellow Background Color</span>
<!-- Dark blue background color -->
<span class="b-dark-blue white">Dark Blue Background Color</span>
<!-- Green background color -->
<span class="b-green">Green Background Color</span>
<!-- Orange background color -->
<span class="b-orange">Orange Background Color</span>
<!-- Gray background color -->
<span class="b-gray">Gray Background Color</span>
<!-- Sea green background color -->
<span class="b-sea-green">Sea Green Background Color</span>
Font Size
Example
Font 1
Font 2
Font 3
Font 4
Font 5
Font 6
Font 7
Font 8
Font 9
Font 10
Font 11
<!-- Font 1 -->
<p class="text f-1">Font 1</p>
<!-- Font 2 -->
<p class="text f-2">Font 2</p>
<!-- Font 3 -->
<p class="text f-3">Font 3</p>
<!-- Font 4 -->
<p class="text f-4">Font 4</p>
<!-- Font 5 -->
<p class="text f-5">Font 5</p>
<!-- Font 6 -->
<p class="text f-6">Font 6</p>
<!-- Font 7 -->
<p class="text f-7">Font 7</p>
<!-- Font 8 -->
<p class="text f-8">Font 8</p>
<!-- Font 9 -->
<p class="text f-9">Font 9</p>
<!-- Font 10 -->
<p class="text f-10">Font 10</p>
<!-- Font 11 -->
<p class="text f-11">Font 11</p>
Display
| Class | Css | Description |
|---|---|---|
| .d-b | display: block !important; | This element always starts on a new line and takes the entire line width. |
| .d-i | display: inline !important; | These elements are arranged one after the other and only retain the width of their content. |
| .d-ib | display: inline-block !important; | One side inline acts as one side block. |
| .d-ih | display: inherit !important; | The element takes the values of the parent element. |
| .d-f | display: flex !important; | It is used to align the components horizontally and vertically. |
| .d-n | display: none !important; | It removes everything completely. |
Float
| Class | Css | Description |
|---|---|---|
| .f-l | float: left !important; | The element is located on the left. |
| .f-r | float: right !important; | The element is located on the right. |
| .f-i | float: inherit !important; | The element inherits the parent float value. |
| .f-n | float: none !important; | The element is displayed where it occurs. The default value. |
Text Align
| Class | Css | Description |
|---|---|---|
| .t-l | text-align: left !important; | Left-justified text (default) |
| .t-r | text-align: right !important; | Leaves the text to the right. |
| .t-c | text-align: center !important; | Center the writing. |
| .t-i | text-align: inherit !important; | The element takes the values of the parent element. |
| .t-j | text-align: justify !important; | Justify the text |
| .t-s | text-align: start !important; | The same as left if direction is left-to-right and right if direction is right-to-left. |
| .t-s | text-align: end !important; | The same as right if direction is left-to-right and left if direction is right-to-left. |
Z-Index
| Class | Css | Description |
|---|---|---|
| .z-100 | z-index: 100 !important; | It makes the z-index value 100. |
| .z-250 | z-index: 250 !important; | It makes the z-index value 250. |
| .z-500 | z-index: 500 !important; | It makes the z-index value 500. |
| .z-750 | z-index: 750 !important; | It makes the Zz-index value 750. |
| .z-1000 | z-index: 1000 !important; | It makes the z-index value 1000. |