Sphinx Laravel Package

+++ weight = 230 description = "Mixins save countless hours and bring results faster" date = "2017-04-10T16:43:36+01:00" title = "Mixins" draft = false bref="Mixins are a great way to produce things and effects way faster with Sass then with pure CSS. Kube has a lot to offer in this respect; feel free to use any of these mixins with any Kube components." toc = true +++

{{< rawhtml >}}

// use mixins #my-layout { @include flex; }

// use variables #my-layout { padding: $base-line; }

// 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");

// 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; }

// min-width 768px and max-width 1024px; @include breakpoint(768px, 1024px) {}

// max-width 1024px; @include breakpoint(0, 1024px) {}

<span class="hljs-attribute">-ms-flex-direction</span>: row;
<span class="hljs-attribute">-webkit-flex-direction</span>: row;
<span class="hljs-attribute">flex-direction</span>: row;

<span class="hljs-attribute">-ms-flex-wrap</span>: wrap;
<span class="hljs-attribute">-webkit-flex-wrap</span>: wrap;
<span class="hljs-attribute">flex-wrap</span>: wrap;

}

<span class="hljs-comment">// column gap is specified</span>
<span class="hljs-comment">// in the grid settings (variables.scss) as $grid-gutter</span>
-webkit-<span class="hljs-attribute">column-gap</span>: <span class="hljs-number">2%</span>;
-moz-<span class="hljs-attribute">column-gap</span>: <span class="hljs-number">2%</span>;
<span class="hljs-attribute">column-gap</span>: <span class="hljs-number">2%</span>;

}

.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; } }

// 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);

// custom transitions @include transition(all .2s ease-in-out); @include transition(opacity 1s ease-in, width .2s ease-in);

// $image-type - jpg, png, gif // $image-height - optional