Miz - front-end web development with Ease
Donate
v1.1.2
Speed meets Strength in web design, with MIZ
page builder, components, custom theme creation, structure, and customization based on sass are all gathered at the MIZ frontend framework to put the speed and power of development in the palm of your<br>hand
Get Started
Read Documentation
Your browser does not support the video tag.
Zero to Ready in 5 Minutes
A complete install walkthrough for developers who want to move fast.
Your browser does not support the video tag.
Your browser does not support the video tag.
MIZ Installation
Your browser does not support the video tag.
MIZBAN WORK
Customization
Easy MIZ<br>Customization
MIZ comes with beautifully designed<br>defaults, but you can customize everything to match your style from colors and spacing to typography.<br>Just use the config and structure<br>file to create your own design system, and MIZ will turn it into your unique custom CSS framework.
Learn more
Color
Sizing
Typography
Borders
space
layout
responsive
Primary: #22223B
On-primary: #4a4e69
Primary-light: #c9ada7
Primary-dark: #9a8c98
On-primary-light: #f2e9e4
Secondary: #FFFFFF
Width 100%
Width 84%
Width 66%
Width 50%
Width 42%
font-size : high-title
Lorem<br>ipsum dolor sit amet consectetur
font-size : normal
Lorem ipsum dolor sit<br>amet, consectetur adipiscing elit. Ut augue gravida cras quis ac duis pretium<br>ullamcorper consequat. Integer pellentesque eu.
font-display : txt-ellipsis
Lorem<br>ipsum dolor sit amet consectetur adipisicin
Lorem ipsum
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam harum quo iste<br>rem facere ipsam similique natus illum at facilis quod consectetur repellendus
Follow
Lorem ipsum dolor sit amet consectetur,<br>adipisicing elit. Necessitatibus esse ut non et neque, laboriosam aspernatur aut
Lorem ipsum dolor sit amet consectetur,<br>adipisicing elit. Necessitatibus esse ut non et neque, laboriosam aspernatur aut
Lorem ipsum dolor sit amet<br>consectetur adipisicing elit. Ipsam mollitia numquam, beatae vel nesciunt ipsum, at<br>nihil maiores officia vitae tempore animi hic odit rerum quasi? Minima atque fugit<br>earum.
Lorem ipsum dolor sit amet<br>consectetur adipisicing elit. Ipsam mollitia numquam, beatae vel nesciunt ipsum, at<br>nihil maiores officia vitae tempore animi hic odit rerum quasi? Minima atque fugit<br>earum.
Here we cant use margin for responsive size
$color-palette:(<br>primary: #22223B,<br>on-primary: #4a4e69,<br>primary-light: #c9ada7,<br>primary-dark: #9a8c98,<br>on-primary-light: #f2e9e4,<br>secondary: #FFFFFF,
$conf-width:(<br>count:50,<br>responsive:true<br>);
Width 100%<br>Width 84%<br>Width 66%<br>Width 50%<br>Width 42%
$fonts: (<br>"primary": (<br>"defaults":"sans-serif, 'Courier New', Courier, monospace",<br>"folder": "vazir",<br>"font-types": (<br>"black": (<br>"Vazir-Black.woff2",<br>"Vazir-Black.woff",<br>"Vazir-Black.ttf",<br>"Vazir-Black.eot"<br>),<br>),
$font-size:(normal : 16px, title : 20px, high-title : 32px);<br>$text-align : (center,end,start,left,right);
font-size : high-title<br>Lorem ipsum dolor sit amet consectetur
font-size : normal<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut augue gravida cras quis ac duis pretium ullamcorper consequat. Integer pellentesque eu.
font-display : txt-ellipsis<br>Lorem ipsum dolor sit amet consectetur adipisicin>
Lorem ipsum
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam harum quo iste rem facere ipsam similique natus illum at facilis quod consectetur repellendus
Follow
$flex-wrap-value-list:(wrap,nowrap);<br>$conf-wrap:(<br>responsive:true<br>);<br>$conf-flex-direction:(<br>responsive:false<br>);<br>$conf-justify-content:(<br>responsive:false<br>);<br>$conf-justify-self:(<br>responsive:true<br>);<br>$conf-justify-items:(<br>responsive:true<br>);
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam mollitia numquam, beatae vel nesciunt ipsum, at nihil maiores officia vitae tempore animi hic odit rerum quasi? Minima atque fugit earum.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam mollitia numquam, beatae vel nesciunt ipsum, at nihil maiores officia vitae tempore animi hic odit rerum quasi? Minima atque fugit earum.
$break-points:(xxl:1920px , xl:1280px , lg:1024px , md:767px , sm:478px);
$conf-paddings:(<br>count:10,<br>unit:rem,<br>factor:0.5,<br>responsive:true<br>);<br>$conf-margins:(<br>count:10,<br>unit:rem,<br>factor:0.5,<br>responsive:false<br>);<br>Here we cant use margin for responsive size
$conf-gaps:(<br>count:20,<br>unit:rem,<br>factor:0.5,<br>responsive:true<br>);<br>$conf-paddings:(<br>count:10,<br>unit:rem,<br>factor:0.5,<br>responsive:true<br>);<br>$conf-margins:(<br>count:40,<br>unit:rem,<br>factor:0.5,<br>responsive:true<br>);
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Necessitatibus esse ut non et neque, laboriosam aspernatur aut<br>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Necessitatibus esse ut non et neque, laboriosam aspernatur aut
Comparison
Same Classes,<br>More Choices
With MIZ, you’ll find the same familiar class names as Bootstrap, but with expanded options and flexibility.<br>Whether you’re upgrading...