Get started

Steps to Install Miz and Start Designing with Miz

1. Installing Miz #

If you have the installer file , move it to your desired location. However, if you are using npm, after downloading the package with:

            
TERMINAL

            npm i miz-59
        

you must run one of the following commands to publish Miz for your chosen framework:

            
TERMINAL

            npm run miz publish:react
npm run miz publish:vue
npm run miz publish:laravel
        

2. Setting Up config and Initial Values #

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

1. _color.scss File
   • Complete or modify the $color-palette variable with your desired colors .
   • Add the colors you want to generate background-color classes for in $backgrounds .
   • Repeat this for $colors (text color classes for the color property) and $borders (border color classes for the border-color property).
2. _dims.scss File
   • Variables starting with all-border define border-radius and can be customized.
   • Configure the following variables according to your needs:
   • max :The maximum value for generating related classes.
   • min :The minimum value for generating related classes.
   • step :The step size between min and max for class generation.
   • $conf-opacity :Defines classes that control the opacity property values.
   • $conf-z-index :Configures the range of values for the z-index property.
   • $conf-aspect-ratio :Defines classes that control the aspect-ratio property values.
   • $conf-border-thickness :Controls border thickness (border-width).
3. _path.scss File
   • This file specifies the paths of folders inside assets. If you add or move a folder, define a new variable for its path.
4. _reset.scss File
   • The $reset variable accepts true/false. If true, reset CSS styles are applied; otherwise, they are not.
5. _responsive.scss File
   • $breakpoints defines responsive breakpoints.
   • $header-space-horizontally: Defines horizontal spacing in the tag header.
   • $boxed-space-horizontally: Defines horizontal spacing for boxed tag section.
   • $boxed-space-vertically: Defines vertical spacing for boxed tag section.

   The variables $header-space-horizontally, $boxed-space-horizontally, and $boxed-space-vertically define spacing in the tag section and are dependent on $breakpoints:

   • Variables that start with $conf- define key responsive design features.
     • count (number of classes to generate),
     • responsive (for enabling/disabling features in responsive mode),
     • unit (unit of values),
     • factor (value factor for responsiveness).
   • These variables are designed to fine-tune responsive layouts and other features in your project.

3. Configuring the Structure #

1. _icon.scss File

   $icon-prefix defines the prefix for icon-related classes.

2. _typography.scss File
   • $font-prefix defines the prefix for font-related classes.
   • $font-size defines the font sizes, and you can add or modify the values as needed.
   • $fonts is used to define fonts. You can specify multiple fonts in this variable, including the font name, the folder where the fonts are stored (assets/fonts/font-name), and the font type (such as extra-bold, bold, semi-bold, medium, regular, light, extra-light, and thin).

4. 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/your-theme, and in the your-project/sass/miz/sass/themes/_index.scss file, import one component at a time.

            
SCSS

            // {miz/sass/themes/_index.scss}

@import "your-theme";
        

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.

If you do not wish to use the theme, comment out this line in your-project/sass/miz/sass/_index.scss :

            
SCSS

            // {miz/sass/_index.scss}

@import "theme";
        

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