Contents

Discover what’s included in MIZ, including our compiled and source code flavors.

MIZ File Structure #

Once installed , the folder and you'll see something like this:

                    miz
├───pkg
│       merge-components.js
│       miz-min.cjs
│       server.js
│       watch-all.js
│
├───sass
│   │   _index.scss
│   │
│   ├───config
│   │       _colors.scss
│   │       _commons.scss
│   │       _dims.scss
│   │       _icon.scss
│   │       _index.scss
│   │       _paths.scss
│   │       _reset.scss
│   │       _responsive.scss
│   │       _typography.scss
│   │
│   ├───global-functions
│   │       _break-point.scss
│   │       _colors.scss
│   │       _images.scss
│   │       _index.scss
│   │
│   └───kernel
│       │   _index.scss
│       │
│       ├───common
│       │       _aspect-ratio.scss
│       │       _colors.scss
│       │       _cursor.scss
│       │       _functions.scss
│       │       _image.scss
│       │       _index.scss
│       │       _opacity.scss
│       │       _overflow.scss
│       │       _position.scss
│       │       _user-select.scss
│       │       _visibility.scss
│       │       _z-index.scss
│       │
│       ├───kernel-functions
│       │       _break-point.scss
│       │       _colors.scss
│       │       _images.scss
│       │       _index.scss
│       │
│       └───responsive
│           │   _index.scss
│           │
│           ├───boots
│           │       _border.scss
│           │       _colors.scss
│           │       _icon.scss
│           │       _index.scss
│           │       _responsive.scss
│           │       _typography.scss
│           │
│           ├───functions
│           │       _index.scss
│           │       _responsive.scss
│           │       _space.scss
│           │
│           ├───layouts
│           │       _borders.scss
│           │       _dims.scss
│           │       _displays.scss
│           │       _flex.scss
│           │       _grid.scss
│           │       _index.scss
│           │       _layouts.scss
│           │       _orders.scss
│           │
│           └───mixins
│                   _index.scss
│                   _reset.scss
│                   _variables.scss
│
└───themes
    │   config.js
    │   _index.scss
    │
    └───mizoon
        │   _index.scss
        │
        ├───components
        │   │   _index.scss
        │   │
        │   ├───accordion
        │   │       index.html
        │   │       script.js
        │   │       _index.scss
        │   │
        │   ├───badge
        │   │       index.html
        │   │       script.js
        │   │       _index.scss
        │   │
        │   ├───breadcrumb
        │   │       index.html
        │   │       script.js
        │   │       _index.scss
        │   │
        │   ├───button
        │   │       index.html
        │   │       script.js
        │   │       _index.scss
        │   │
        │   ├───button-group
        │   │       index.html
        │   │       script.js
        │   │       _index.scss
        │   │
        │   ├───card
        │   │       index.html
        │   │       script.js
        │   │       _index.scss
        │   │
        │   ├───dropdown
        │   │       index.html
        │   │       script.js
        │   │       _index.scss
        │   │
        │   ├───floating-labels
        │   │       index.html
        │   │       script.js
        │   │       _index.scss
        │   │
        │   ├───form-control
        │   │       index.html
        │   │       script.js
        │   │       _index.scss
        │   │
        │   ├───input-group
        │   │       index.html
        │   │       script.js
        │   │       _index.scss
        │   │
        │   ├───list-group
        │   │       index.html
        │   │       script.js
        │   │       _index.scss
        │   │
        │   ├───masonry
        │   │       index.html
        │   │       script.js
        │   │       _index.scss
        │   │
        │   ├───nav
        │   │       index.html
        │   │       script.js
        │   │       _index.scss
        │   │
        │   ├───offcanvas
        │   │       index.html
        │   │       script.js
        │   │       _index.scss
        │   │
        │   ├───pagination
        │   │       index.html
        │   │       script.js
        │   │       _index.scss
        │   │
        │   ├───progress
        │   │       index.html
        │   │       script.js
        │   │       _index.scss
        │   │
        │   ├───radio-checkbox
        │   │       index.html
        │   │       script.js
        │   │       _index.scss
        │   │
        │   ├───range
        │   │       index.html
        │   │       script.js
        │   │       _index.scss
        │   │
        │   ├───select
        │   │       index.html
        │   │       script.js
        │   │       _index.scss
        │   │
        │   ├───tab
        │   │       index.html
        │   │       script.js
        │   │       _index.scss
        │   │
        │   ├───table
        │   │       index.html
        │   │       script.js
        │   │       _index.scss
        │   │
        │   ├───tooltip
        │   │       index.html
        │   │       script.js
        │   │       _index.scss
        │   │
        │   └───waiting-indicator
        │           index.html
        │           script.js
        │           _index.scss
        │
        └───config
                _colors.scss
                _component.scss
                _dims.scss
                _index.scss
                _responsive.scss
                _typography.scss
                

MIZ Folder Structure #

                    miz
├───pkg
├───sass
│   ├───config
│   ├───global-functions
│   └───kernel
│       ├───common
│       ├───kernel-functions
│       └───responsive
│           ├───boots
│           ├───functions
│           ├───layouts
│           └───mixins
└───themes
    └───mizoon
        ├───components
        │   ├───accordion
        │   ├───badge
        │   ├───breadcrumb
        │   ├───button
        │   ├───button-group
        │   ├───card
        │   ├───dropdown
        │   ├───floating-labels
        │   ├───form-control
        │   ├───input-group
        │   ├───list-group
        │   ├───masonry
        │   ├───nav
        │   ├───offcanvas
        │   ├───pagination
        │   ├───progress
        │   ├───radio-checkbox
        │   ├───range
        │   ├───select
        │   ├───tab
        │   ├───table
        │   ├───tooltip
        │   └───waiting-indicator
        └───config