Helpers and Utilities

HazeCSS utilities offer a comprehensive toolkit for managing layout, spacing, positioning, and display properties, and much more. Some of these will be briefly discussed in scope of this page, the related pages with more details on each subject will be linked below.

There's a wide range of flex utilities for creating flexible and responsive layouts. With these, you can control the direction of the flex items with classes like .flex-row or .flex-column; You can control the alignment with classes like .justify-content-* or .align-items-*. Flex utilities also adapt to different screen sizes, allowing responsive designs without complex custom CSS.

    <div class="d-flex justify-content-between bg">
        <div class=class="w-25 text-start">
            <div class=class="bg-alt">Block</div>
            <div class=class="bg-alt">Block</div>
        </div>
        <div class=class="w-25 d-flex align-items-center text-center">
            <div class=class="flex-fill bg-alt">Block</div>
        </div>
        <div class=class="w-25 text-end">
            <div class=class="bg-alt">Block</div>
            <div class=class="bg-alt">Block</div>
        </div>
    </div>

There is a wide range of classes used in the example above, from display properties, alignment and justification to backgrounds, sizing, spacing and text formatting:

• The .d-flex and class is used to manage layout, alignment and sizing for various elements. Aplying the specified class on a container will transform the direct children elements into flex items.
• The .justify-content-between class is used to change the alignment of the flex items on the main axis (the x-axis in this case)
• The .align-items-center class is used to change the alignment of the flex items on the main axis (which is the y-axis in this case).

More information on the content justification, items alignment and other adjacent functionalities will be provided in the Utilities/ Flex section.

The positioning utilities enable precise control over element positioning. With classes like .position-absolute or .position-relative, flexible options are available for positioning elements within a layout, seamlessly integrating with responsive designs and allowing elements to adapt to different viewport sizes.

    <div class="position-relative rounded-5 bg">
        <div class="position-absolute top-0 start-0">
        <div class="position-absolute top-0 end-0">
        <div class="position-absolute top-50 start-50">
        <div class="position-absolute bottom-50 end-50">
        <div class="position-absolute bottom-0 start-0">
        <div class="position-absolute bottom-0 end-0">
    </div>

The .position-* classes are used to configure the position of an element within the viewport. In the given example, there are two positions used: .position-relative on the parent container which sets the positioning context for its child elements that have .position-absolute. In this context, the child elements are positioned relative to this container rather than the entire document.

The .start-*, .top-*, .end-* and .bottom-* classes are used to set the position of each absolute element within the parent container, based on the given percentage. For instance, .top-50 places the child element at 50% (of the parent element) from the top of the parent element, effectively centering the child element on the y-axis.

More information on the .position-* classes, the edge positions and other adjacent functionalities will be provided in the Utilities/ Position section.

There's a comprehensive suite of spacing utilities designed for effortless margin and padding management. These utilities seamlessly adapt to varying viewport widths and screen sizes, ensuring consistent spacing across all devices. You can use classes like .m-* or .p-* to apply the spacing you need to enhance the visual appeal and readability of the UI elements.

        <div class=class="ms-1 me-4 p-3 my-1">
            .ms-1 .me-4 .my-1 .p-3
        </div>
        <div class=class="ms-2 me-3 p-3 my-1">
            .ms-2 .me-3 .my-1 .p-3
        </div>
        <div class=class="ms-3 me-2 p-3 my-1">
            .ms-3 .me-2 .my-1 .p-3
        </div>
        <div class=class="ms-4 me-1 p-3 my-1">
            .ms-4 .me-1 .my-1 .p-3
        </div>
    
    

There you can see how different horizontal (start and end) margins apply to a container, while the padding is set to 3 all-around and the vertical margin is set to 1.

More information on the margin and padding classes will be provided in the Utilities/ Position section.

The display utilities allow precise control over element visibility and behavior across different breakpoints. Utilize classes like .d-block or .d-none to manage the display of elements based on screen size, simplifying layout creation and reducing the need for CSS media queries.

    <div class="p-3">
        <div class="d-flex w-100">
            <div class="d-flex w-50 flex-center">.d-block</div>
            <div class="d-flex w-50 flex-center">.d-block</div>
        </div>
        <div class="d-none d-lg-block">.d-none .d-lg-block</div>
        <div class="d-block">.d-block</div>
    </div>

There is a wide range of display classes used in the example above, as follow:

• The .d-flex class is used to apply flexbox behavior to the container, allowing its children to be laid out in a flexible manner along a specified axis
• The .d-none class is used to to hide the element from display, effectively rendering it invisible on the webpage
• The .d-lg-block class is used to to make the element visible and displayed as a block-level element only on large screens and above, while it remains hidden on smaller screens
• The .d-block class is used to make the element visible and displayed as a block-level element across all screen sizes, overriding any other display properties that may be applied

More information on the display properties will be provided in the Utilities/ Display section.