Getting Started

Introduction Installation Support

Core Concepts

Helpers & Utilities Responsive Design Dark/ Light Mode

Components

Breadcrumb Button Navbar

Customization

Colors Variables Color Modes

Layout

Breakpoints Containers Gutters Offsets Rows & Columns

Helpers

Clearfix Focus Ring Position Ratio Stretched Link Text Truncate Vertical Rule Visually Hidden

Utilities

Border Display Flex Float Opacity Overflow Position Shadow Sizing Spacing Text Visibility Z-Index

Introduction

Haze is a CSS library at its core. While some versions solely require integrating the stylesheet into your header, others, particularly the most advanced one, also necessitate linking the accompanying JavaScript file in your website's footer.

#

Code requirements

For Haze to work correctly, you need to make your website responsive. Thus, the doctype declaration needs to be added at the top of each page.

<!DOCTYPE html>

Additionally, you need to add the 'famous' responsive viewport meta tag at the top of each page. Anmywhere within the header is fine.

<meta name="viewport" content="width=device-width, initial-scale=1">

#

Starter template

If you want to get started right away, you can use the following starter template. Just copy and paste this code into your index file and save it.


    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, 
                initial-scale=1">
            <title>This is Haze!</title>
            <link rel="stylesheet" href="https://cdn.serbanelyan.com/
                hazecss/1.0.0/css/haze-plus-plus.min.css">
        </head>
        <body>
            <section class="section">
                <div class="container">
                    <h1 class="title">
                        Hello World
                    </h1>
                    <p class="subtitle">
                        My first website with <strong>Haze</strong>!
                    </p>
                </div>
            </section>
            <script src="https://cdn.serbanelyan.com/
                hazecss/1.0.0/js/haze-plus-plus.min.js" defer>
            </script>
        </body>
    </html>