YS CSS

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

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

Menus

Margin Margin Top Margin Bottom Margin Left Margin Right Padding Padding Top Padding Bottom Padding Left Padding Right Width Height Buttons Button Size Button Radius Colors Background Colors Font Size Display Float Text Align Z-Index