mikit-framework

<!DOCTYPE html> <html> <head> <title>Mikit</title>  <link rel="stylesheet" type="text/css" href="../dist/css/mikit.min.css"/> <script type="text/javascript" src="../dist/js/jquery.min.js"></script> <script type="text/javascript" src="../dist/js/mikit.js"></script> <style> .component-index-box { counter-reset: count; max-width: 400px; margin: 30px auto 60px auto; padding: 32px; background: #fbfbfb; border: 1px solid rgba(0, 0, 0, 0.08); } .component-index-box li { line-height: 40px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); margin-right: 24px; counter-increment: count; } .component-index-box li a { display: block; text-decoration: none; position: relative; padding-left: 10px; } .component-show { width: 1180px; margin: 0 auto; } @media (max-width: 768px) { .component-show { width: 100%; } } .example { border: 1px solid rgba(0, 0, 0, 0.07); padding: 32px; margin-bottom: 16px; } .demo-gradient { height: 40px; margin-bottom: 24px; } .demo-gradient-vertical { background-color: #5faac8; background-image: linear-gradient(to bottom, #5faac8 0%, #65ccb8 100%); } .demo-gradient-vertical-to-opacity { background: linear-gradient(to bottom, #5faac8 0%, rgba(95, 170, 200, 0) 100%); } .demo-gradient-horizontal { background-color: #5faac8; background: linear-gradient(to right, #5faac8 0%, #65ccb8 100%); } .demo-gradient-horizontal-to-opacity { background: linear-gradient(to right, #5faac8 0%, rgba(95, 170, 200, 0) 100%); } .demo-gradient-radial { background-image: radial-gradient(circle, #5faac8, #65ccb8); } </style> </head> <body> <div class="component-index-box"> <ol> <li><a href="#h-get-started">Get Started</a></li> <li><a href="#h-fonts">Fonts</a></li> <li><a href="#h-breakpoints">Breakpoints</a></li> <li><a href="#h-grid">Grid</a></li> <li><a href="#h-flex">Flex</a></li> <li><a href="#h-gradients">Gradients</a></li> <li><a href="#h-utils">Utils</a></li> </ol> </div> <div class="component-show">  <h3 class="section-head" id="h-get-started">Get Started</h3> Mikit has been designed to help you with web development, that's why it's so easy to use Mikit when building websites. To move forward quickly and efficiently, just link <code>mikit.scss</code> from Mikit package: this file contains variables, mixins and everything you need to simplify daily routine tasks. For example, import <code>mikit.scss</code> into your <code>master.scss</code> styles file, which you will later compile into <code>master.css</code> <pre class="code skip">// master.scss @import "dist/scss/mikit.scss"; </pre> Now all Mikit's variables and mixins are readily available in <code>master.scss</code>, and you can use them whenever needed. <pre class="code skip">// master.scss @import "dist/scss/mikit.scss"; // use mixins #my-layout { @include flex; } // use variables #my-layout { padding: $base-line; } </pre>  <h3 class="section-head" id="h-fonts">Fonts</h3> Generates a font-family declarations for text, headings, buttons or inputs. <pre class="code skip">// import Mikit @import "dist/scss/mikit.scss"; // use mixins @include text-font("Lato, 'Helvetica Neue', sans-serif"); @include headings-font("Lato, 'Helvetica Neue', sans-serif"); @include buttons-font("Lato, 'Helvetica Neue', sans-serif"); @include inputs-font("Lato, 'Helvetica Neue', sans-serif"); </pre> CSS Output <pre class="code skip">// Text body { font-family: Lato, 'Helvetica Neue', sans-serif; } // Headings h1.title, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: Lato, 'Helvetica Neue', sans-serif; } // Buttons button, .button { font-family: Lato, 'Helvetica Neue', sans-serif; } // Inputs input, textarea, select { font-family: Lato, 'Helvetica Neue', sans-serif; } </pre>  <h3 class="section-head" id="h-breakpoints">Breakpoints</h3> Breakpoint for small screens (max-width 768px by default). <pre class="code skip">@include breakpoint(sm) { .span { display: none; } } </pre> Breakpoint for medium screens (min-width 1024px by default). <pre class="code skip">@include breakpoint(md) { .span { display: none; } } </pre> Breakpoint for large screens (min-width 1200px by default). <pre class="code skip">@include breakpoint(lg) { .span { display: none; } } </pre> Custom breakpoints: <pre class="code skip">// min-width 768px; @include breakpoint(768px) {} // min-width 768px and max-width 1024px; @include breakpoint(768px, 1024px) {} // max-width 1024px; @include breakpoint(0, 1024px) {} </pre>  <h3 class="section-head" id="h-grid">Grid</h3> <h5 id="h-grid-row">Row</h5> Generates a grid row. <pre class="code skip">.my-row { @include grid-row; } </pre> CSS Output <pre class="code skip">.my-row { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; } </pre> <h5 id="h-grid-media">Media Grid</h5> Generates a media grid. See <a href="#h-media-grid">live example</a>. <pre class="code skip">.my-media-grid { @include grid-media-columns(3); } </pre> CSS Output <pre class="code skip">.my-media-grid { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; // column gap is specified // in the grid settings (variables.scss) as $grid-gutter -webkit-column-gap: 2%; -moz-column-gap: 2%; column-gap: 2%; } .my-media-grid > div { display: inline-block; width: 100%; } @media (max-width: 768px) { .my-media-grid { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; } } </pre>  <h3 class="section-head" id="h-flex">Flex</h3> <pre class="code skip">@include flex; @include flex-basis($basis); // items @include flex-items-wrap; @include flex-items-nowrap; @include flex-items-row @include flex-items-column; @include flex-items-left; @include flex-items-right; @include flex-items-center; @include flex-items-space-between; @include flex-items-space-around; @include flex-items-top; @include flex-items-middle; @include flex-items-bottom; // item @include flex-item-grow($grow); @include flex-item-auto; @include flex-item-one; @include flex-item-shrink($shrink); @include flex-item-width($width); </pre>  <h3 class="section-head" id="h-gradients">Gradients</h3> <h5 id="h-gradients-vertical">Vertical</h5> <pre class="code skip">@include gradient-vertical($startColor, $endColor);</pre> <div class="demo-gradient demo-gradient-vertical"></div> <pre class="code skip">@include gradient-vertical-to-opacity($startColor, $opacity);</pre> <div class="demo-gradient demo-gradient-vertical-to-opacity"></div> <h5 id="h-gradients-horizontal">Horizontal</h5> <pre class="code skip">@include gradient-horizontal($startColor, $endColor);</pre> <div class="demo-gradient demo-gradient-horizontal"></div> <pre class="code skip">@include gradient-horizontal-to-opacity($startColor, $opacity);</pre> <div class="demo-gradient demo-gradient-horizontal-to-opacity"></div> <h5 id="h-gradients-radial">Radial</h5> <pre class="code skip">@include gradient-radial($innerColor, $outerColor);</pre> <div class="demo-gradient demo-gradient-radial"></div>  <h3 class="section-head" id="h-utils">Utils</h3> <h5 id="h-utils-clearfix">Clearfix</h5> Provides an easy way to include a clearfix for containing floats. <pre class="code skip">.layout { @include clearfix; } </pre> CSS Output <pre class="code skip">.layout:after { content: ''; display: table; clear: both; } </pre> <h5 id="h-utils-transition">Transition</h5> This mixin provides a shorthand syntax for transitions. <pre class="code skip">// by default 'all linear .2s' @include transition; // custom transitions @include transition(all .2s ease-in-out); @include transition(opacity 1s ease-in, width .2s ease-in); </pre> <h5 id="h-utils-transform">Transform</h5> Provides a shorthand syntax for transforms. <pre class="code skip">.span { @include transform(rotate(90deg)); } </pre> CSS Output <pre class="code skip">.span { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } </pre> <h5 id="h-utils-blur">Blur</h5> Provides a shorthand syntax for blur filter. <pre class="code skip">.span { @include blur(5px); } </pre> CSS Output <pre class="code skip">.span { -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); } </pre> <h5 id="h-utils-retina-image">Retina Image</h5> Retina image must have a suffix <code>-2x</code>, for example: <code>image-2x.jpg</code> <pre class="code skip">@include retina-background-image($image-url, $image-type, $image-width, $image-height); // $image-type - jpg, png, gif // $image-height - optional </pre> Example: <pre class="code skip">.brand { @include retina-background-image('../logo', 'png', 100px); } </pre> CSS Output <pre class="code skip">.brand { background-repeat: no-repeat; background-image: url("../logo.png"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .brand { background-image: url("../logo-2x.png"); background-size: 100px auto; } } </pre> </div> </body> </html>