Get started

Steps to Install Miz and Start Designing with Miz

1. Installing Miz #

If you have the Miz installer file , move it to your desired folder and run it. The project will be created and set up in that same location.

If you're using npm, install Miz by running:

            
TERMINAL

            npm i miz-59
        

After installation, you'll be prompted to choose your framework so Miz can configure everything properly:

            
TERMINAL

            Please select an option: 
1) publish:laravel 
2) publish:vue 
3) publish:react 
Enter your choice number: 

2. Setting Up config and Initial Values #

After installation, navigate to: your-project/sass/miz/sass/config

1. _color.scss File
   • Miz gives you a flexible way to manage colors using custom palettes. Start by defining your colors inside the $color-palette variable — you can create multiple palettes like light, dark, or even page-specific ones like landing-dark, and set one as the default.
   • Use $backgrounds, $colors, and $borders to define which colors should generate CSS classes.
   • For each color you define, Miz automatically generates three types of classes:
     • .bg-primary-color → for background color
     • .primary-color → for text color
     • .border-primary-color → for border color
   • This way, you define colors once, and Miz handles generating all utility classes for consistent styling.
2. _dims.scss File
   • This file contains variables for fine-tuning various CSS properties.
   • Configure the following variables based on your needs:
   • $border-radius: Different values for rounding corners.
   • max: The highest value used when generating classes (like for opacity, z-index, etc.).
   • min: The smallest value used when generating classes.
   • step: The increment between min and max for class generation.
   • $conf-opacity: Settings for opacity-related classes.
   • $conf-z-index: Defines the available range for z-index classes.
   • $conf-aspect-ratio: Controls the aspect-ratio property with sub-variables like nominator, denominator, and step.
   • $conf-border-thickness: Controls border thickness with the last-width variable specifying the thickest border allowed.
3. _path.scss File
   • This file defines folder paths as Sass variables, allowing you to easily reference directories in your project. If you move or add a folder, simply create a new variable for its path.
4. _responsive.scss File
   • This file contains variables that control your project's responsive behavior. The $breakpoints variable defines where your layout should adapt to different screen sizes.
   • Use variables like $header-space-horizontally, $boxed-space-horizontally, and $boxed-space-vertically to control spacing in headers and boxed sections.

   These spacing variables depend on $breakpoints, so each breakpoint should have its own set of values.

   • Variables prefixed with $conf- manage key responsive features:
     • count: Number of classes to generate
     • responsive: Enables/disables responsiveness
     • unit: Unit of measurement (px, rem, etc.)
     • factor: Scaling factor for responsive calculations
   • These variables help you fine-tune your design for better performance across different screen sizes.
5. _icon.scss File
   • $icon-prefix: Defines the prefix used for icon class names.
   • $icon-size: Specifies the size of icons and can be customized as needed.
6. _typography.scss File
   • $font-prefix: Sets the prefix for text-related classes.
   • $font-size: Defines available font sizes.
   • Other variables like $text-align, $text-transform, $text-decoration-line, $text-decoration-style, and $font-style control text appearance.
   • $fonts: Defines font families, including font name, folder path, available weights, and formats.

3. Setting Up the Theme #

The themes folder is for additional components provided by Miz. To integrate Bootstrap components, add them to a new folder in your-project/sass/miz/sass/themes/mizoon, and in the your-project/sass/miz/sass/themes/config.js file, import one component at a time.

            
SCSS

            export const config = {
    theme: 'mizoon',
    output: 'public/assets/js/mizchin.min.js'
};
        

If you want to customize the component settings, you can edit its configuration files accordingly.

The primary component is Miz, and its configuration takes precedence over the settings of other components.

To disable themes completely:

            

                
JS
                
            
            export const config = {
    theme: null,
    output: 'public/assets/js/mizchin.min.js'
};
        

For more information on creating and customizing your theme

4. Writing Code & Structuring the Page #

The standard page layout looks like this:

            
HTML

            <header>
    <nav>
        <ul>
            <li>menu item 1</li>
            <li>menu item 1</li>
        </ul>
    </nav>
</header>
<main>
    <section class="hero">
        <h1>site important sentence</h1>
    </section>
    <section>
        <h2> products </h2>
        <article>
            <h3> product 1 </h3>
        </article>
        <article>
            <h3> product 2 </h3>
        </article>
    </section>
</main>
<footer></footer>
        

For better layout , use this approach:

            
HTML

            <section class="section">
    <div class="container">
        <div class="block">
            <div class="div"></div>
        </div>
    </div>
</section>
        

Key Points:

• container, block, and div are all div elements, while section remains a standard <section>.
• If you do not wish to use this structure, you must at least assign the .section class to <section>, since it applies the spacing defined in $boxed-space-horizontally and $boxed-space-vertically inside _responsive.scss
• Use the .header class to set spacing for the <header>.