General utility classes to.
If You want to expand/collapse something for any reason or for debugging purposes you can use following classes to any element:
zust-visible : To forcibly make any element visible.zust-hidden : To hide any element.zust-invisible : To make any element invisible. Note that It will only make the element invisible, It means the element will be there and will take it's space.If you want to expand/collapse any element on dark mode you can use:
zust-visible@dark : To make any element visible on dark mode.zust-hidden@dark : To hide any element on dark mode.zust-invisible@dark : To make any element invisible on dark mode.What if you want your element to be only visible on dark mode? Simply add both zust-hidden and zust-visible@dark classes. Then see the magic. It's good when you want to change page content based on theme, like pictures.
<span class="zust-hidden zust-visible@dark">Hey, Look at me I'm Visible, Thanks to Dark Mode.</span>
It has support for Breakpoints.
If you want to show something only on certain breakpoint then add class zust-visible@ then the breakpoint name. In simple words the class name will be like this zust-visible@breakpoint-name.
I'm only visible at small breakpoint
<p class="zust-hidden zust-visible@small">I'm only visible at small breakpoint</p>
zust-hide and zust-invisible applies in the same way.
You can also change the display type by adding any of these classes
zust-inline : Sets the element's display to be inline.zust-block : Sets the element's display to be block.zust-flex : Sets the element's display to be flex.zust-inline-block : Sets the element's display to be inline-block.zust-inline-flex : Sets the element's display to be inline-flex.zust-list-item : Sets the element's display to be list-item.Display type has support for Breakpoints.
Its class name's structure will be like this display-type@breakpoint-name.
Example. If you want to make an element's display type to list-item only in small breakpoint then you will add class zust-list-item@small.
I am a list item only at small breakpoint.
<p class="zust-list-item@small">I am a list item only at small breakpoint.</p>
For utilities there are margin and padding control. add any of these classes
zust-marginless : In applied element, there will be no margin.zust-paddingless : In applied element, there will be no padding.You can also trigger marginless or paddingless in any defined breakpoint, because it has support for Breakpoints.
I've 4rem margin by default. But I will be marginless until large breakpoint.
<p class="zust-m-4 zust-marginless@until-large">I've 4rem margin by default. But I will be marginless until large breakpoint.</p>
You can also add margin to a element. You have to just add a class and the class's prefix is zust-m- then the value. The value is limited from 0 to 10, and it uses rem as unit.
Example. If you add class zust-m-1 to an element, the element's margin will be 1rem all sides.
Defining side in margin: You can define side for margin too. Use any of these prefixes
zust-m-t- : For adding margin to top side.zust-m-b- : For adding margin to bottom side.zust-m-l- : For adding margin to left side.zust-m-r- : For adding margin to right side.zust-m-x- : For adding margin to left and right sides.zust-m-y- : For adding margin to top and bottom sides.Example. If you want to add 2rem margin to top side, you will add class zust-m-t-2.
Adding padding is same as margin just -m- will be replaced with -p-. Though I will cover it again.
Adding padding to a element is super easy. You have to just add a class and the class's prefix is zust-p- then the value. The value is limited from 0 to 10, and it uses rem as unit.
Example. If you add class zust-p-3 to an element, the element's margin will be 3rem all sides.
Defining side in padding: You can define side for padding too. Use any of these prefixes
zust-p-t- : For adding padding to top side.zust-p-b- : For adding padding to bottom side.zust-p-l- : For adding padding to left side.zust-p-r- : For adding padding to right side.zust-p-x- : For adding padding to left and right sides.zust-p-y- : For adding padding to top and bottom sides.Example. If you want to add 1rem padding to left side, you will add class zust-p-l-1.
Change float just by adding class. zust-left for changing float to left. zust-right for changing float to right.
You can use class zust-clearfix for clearing floats of an item.
Without clearfix
Clearfix clears floats of an element, floats are designed for paragraphs to control image.
As you can see the image is going out of its container.
With clearfix
Clearfix clears floats of an element, floats are designed for paragraphs to control image.
Now it takes space from its container
<p>Without clearfix</p>
<div class='zust-bg-light'>
<p>Clearfix clears floats of an element, floats are designed for paragraphs to control image.</p>
<img class='zust-right' src='/resources/zusty.svg' width='80px'>
</div>
<p>As you can see the image is going out of its container.</p>
<br><br>
<p>With clearfix</p>
<div class='zust-clearfix zust-bg-light'>
<p>Clearfix clears floats of an element, floats are designed for paragraphs to control image.</p>
<img class='zust-right' src='/resources/zusty.svg' width='80px'>
</div>
<p>Now it takes space from its container</p>
Utility classes for working with flexbox.
If you want to learn more about Flexbox then Read This.
zust-justify-start: justify-content to flex-start.zust-justify-center: justify-content to center.zust-justify-end: justify-content to flex-end.zust-justify-around: justify-content to space-around.zust-justify-between: justify-content to space-between.zust-justify-evenly: justify-content to space-evenly.zust-align-start: align-items to flex-start.zust-align-center: align-items to center.zust-align-end: align-items to flex-end.zust-align-stretch: align-items to stretch.zust-align-baseline: align-items to baseline.zust-direction-column: flex-direction to column.zust-direction-column-reverse: flex-direction to column-reverse.zust-direction-row: flex-direction to row.zust-direction-row-reverse: flex-direction to row-reverse.zust-nowrap: flex-wrap to nowrap.zust-wrap: flex-wrap to wrap.zust-wrap-reverse: flex-wrap to wrap-reverse.Set flex-grow by using class zust-grow-grow-size. Sizes are from 0 to 10.
Example - If you want to set flex-grow to 5 then you will use class zust-grow-5.
Flip any element. Useful for flipping images and icons.
zust-flip-horizontal or zust-flip-x : Add this class to flip any element horizontally or by X-axis.zust-flip-vertical or zust-flip-y : Add this class to flip any element vertically or by Y-axis.Rotate anything to predefined values. The values are 15, -15, 30, -30, 45, -45, 60, -60, 90, -90, 120, -120, 180, -180.
Use them just by adding class zust-rotate- and then the value.
Example 1 - If you want to rotate something to 120 deg, just add class zust-rotate-120. The element will be rotated 120 deg.
Example 2 - If you want to rotate something to -90 deg, just add class zust-rotate--90. The element will be rotated -90 deg.
There are several class which can help you change shape
zust-fullwidth : Sets the element's width fill the rest of it's parent's width. It has support for Breakpoints.zust-fullheight : Sets the element's height fill the rest of it's parent's width. It has support for Breakpoints.zust-rounded : Sets the element's corner radius to full.zust-semi-rounded : Sets the element's corner radius to 10px, not completely rounded or sharp.zust-radiusless or zust-sharp : Sets the element's corner radius to 0, means completely radiusless.You can toggle any element's state by adding class zust-hovered, zust-focused and zust-active. It's good for debugging and/or toggling states using JavaScript.
<button class="zust-btn zust-success">I'm being Tested</button>
You can make any item static or unresponsive by adding class zust-static.
<button class="zust-btn zust-link">I'm responsive :]</button>
<button class="zust-btn zust-link zust-static">I'm unresponsive :[</button>
<br><br>
<p class="zust-form-el">
<input class="zust-input" placeholder="I will respond :D">
</p>
<p class="zust-form-el">
<input class="zust-input zust-static" placeholder="I will not respond ;_;">
</p>