2-mixins-and-functions edit

cheatsheet-functions-and-mixins  edit

Cheatsheet for most used functions and mixins

Documentation for each mixin/function is in their respective SCSS files.

Mixins and functions cheatsheet
Name Examples
color-theme() mixin
 Outputs CSS variables from the color theme maps for rows, and cards and buttons in rows. Used in the _theme-colors.scss file to output CSS variables for each theme class. syntax: color-theme(rowThemeName, cardThemeName, buttonThemeName) Usage example 
.h-theme-green {
    @include color-theme(dkgreen, wmgreen, wmgreen);
}

    outputs:
.h-theme-green {
    --theme-base-color: #183028;
    --theme-base-rgb-color: 24, 48, 40;
    --theme-title-color: #fff;
    ... etc.
}
font() function Returns a font string from the $fonts variable map.
syntax: font(fontName, subValue:null)
Usage example: 
p {
    font-family: font(heading-serif);
    font-weight: font(serif-weight, light);
}
    outputs:
p {
    font-family: "Avenir Next W01", "Nunito Sans", sans-serif;
    font-weight: 300;
}
kspaces() (Karl's spaces) function Returns number in pixels from $kspaces variable map.
syntax: kspaces(spacingValue) 
p {
    padding: kspaces(sm);
}
    outputs:
p {
    padding: 22px;
}
breakpoint() mixin Returns breakpoint media query using values from the $breakpoints variable map or a custom value.
syntax: @include breakpoint(breakpointName or custom value, minWidthOrMax:min)
Usage examples: 
@include breakpoint($mobile-to-desktop-breakpoint) { styles };
outputs:
@media (min-width: 930px) { styles }

@include breakpoint(520px, max) { styles };
outputs:
@media (max-width: 520px) { styles }
Utility functions and mixins cheatsheet
Utility function and mixin cheatsheet
Name Examples
pixels to rem function
rem() 		Returns numerical rem value.
font-size: toRem(10);
outputs:
font-size: 0.625rem;
fluid anything mixin
fluid()		 Returns a calculation using viewport width. Can be used for any style that uses a number (e.g., font-size, width, etc). Somewhat hit-or-miss but can be tweaked to work as intended. 
p {
    @include fluid("padding-right", 10, 150);
}
outputs:
p {
    padding-right: calc(16.9697vw + -53.63636px);
}
rightarrow() mixin Outputs a stylized right arrow as seen in the Events row. syntax: @include rightarrow(color, padding, pointWidth, pointHeight, lineWidth, lineBorderSize) 

p {
    @include rightarrow(var(--color-webgold-75), 13px, 6px, 6px, 15px, 1px);
}
outputs:
p:before {
    position: absolute;
    top: calc(50% - calc(6px/ 2));
    right: 0;
    display: inline-block;
    width: 6px;
    height: 6px;
    content: "";
    transition: all 0.2s ease-in-out;
    transform: rotate(45deg);
    border-top: 1px solid #866f45;
    border-right: 1px solid #866f45;
}
:hover p:before {
    transform: translate3d(10px, 0, 0) rotate(45deg);
}
p:after {
    position: absolute;
    top: 50%;
    right: 0;
    width: 15px;
    height: 1px;
    content: "";
    transition: all 0.2s ease-in;
    background: #866f45;
}
:hover p:after {
    transform: translate3d(10px, 0, 0);
}
Copy
Edit
<!-- components/2-mixins-and-functions/cheatsheet-functions-and-mixins.php --> <button onclick="window.print();" class="noPrint cheatsheet-print-button">Print this cheatsheet</button> <div class="wm-ad-docs"> <div class=" cheatsheet"> <h5>Cheatsheet for most used functions and mixins</h5> <p>Documentation for each mixin/function is in their respective SCSS files.</p> <table class="cheatsheet_item"> <caption>Mixins and functions cheatsheet</caption> <tbody> <tr> <th>Name</th> <th>Examples</th> </tr> <!-- color mixins --> <tr> <td><a href="../wm/atomic-core/?cat=2-mixins-and-functions#mixin-color-theme">color-theme()</a> mixin<BR> </td> <td> Outputs CSS variables from the <a href="../wm/atomic-core/?cat=3-variables#wm-colors">color theme maps</a> for rows, and cards and buttons in rows. Used in the <a href=" ../wm/atomic-core/?cat=3-helper-classes#theme-colors">_theme-colors.scss file</a> to output CSS variables for each theme class. <code>syntax: color-theme(rowThemeName, cardThemeName, buttonThemeName)</code> Usage example <pre> <code class=" language-css">.h-theme-green { @include color-theme(dkgreen, wmgreen, wmgreen); }<BR> outputs: .h-theme-green { --theme-base-color: #183028; --theme-base-rgb-color: 24, 48, 40; --theme-title-color: #fff; ... etc. }</code></pre> </td> </tr> <!-- font functions --> <tr> <td><a href="../wm/atomic-core/?cat=2-mixins-and-functions#function-font">font()</a> function </td> <td>Returns a font string from the <a href="../wm/atomic-core/?cat=3-variables#wm-font-families">$fonts</a> variable map. <BR><code>syntax: font(fontName, subValue:null)</code> <BR>Usage example: <pre> <code class=" language-css">p { font-family: font(heading-serif); font-weight: font(serif-weight, light); } outputs: p { font-family: "Avenir Next W01", "Nunito Sans", sans-serif; font-weight: 300; }</code></pre> </td> </tr> <!-- spacing functions --> <tr> <td><a href=../wm/atomic-core/?cat=2-mixins-and-functions#function-spacing">kspaces()</a> (Karl's spaces) function </td> <td>Returns number in pixels from <a href="../wm/atomic-core/?cat=3-variables#wm-spacing">$kspaces</a> variable map. <BR><code>syntax: kspaces(spacingValue)</code> <pre> <code class=" language-css">p { padding: kspaces(sm); } outputs: p { padding: 22px; } </code></pre> </td> </tr> <!-- breakpoint mixin--> <tr> <td><a href="/atomic-docs/wm/atomic-core/?cat=2-mixins-and-functions#mixin-breakpoints">breakpoint()</a> mixin </td> <td>Returns breakpoint media query using values from the <a href="../wm/atomic-core/?cat=3-variables#wm-breakpoints">$breakpoints</a> variable map or a custom value. <BR><code>syntax: @include breakpoint(breakpointName or custom value, minWidthOrMax:min)</code> <BR>Usage examples: <pre> <code class=" language-css">@include breakpoint($mobile-to-desktop-breakpoint) { styles }; outputs: @media (min-width: 930px) { styles } @include breakpoint(520px, max) { styles }; outputs: @media (max-width: 520px) { styles } </code></pre> </td> </tr> </tbody> </table> <h5>Utility functions and mixins cheatsheet</h5> <table class="cheatsheet_item"> <caption>Utility function and mixin cheatsheet</caption> <tbody> <tr> <th>Name</th> <th>Examples</th> </tr> <!-- px to rem function --> <tr> <td>pixels to rem function<BR> <a href="/atomic-docs/wm/atomic-core/?cat=2-mixins-and-functions#function-px-to-rem">rem()</a> </td> <td>Returns numerical rem value.<BR> <pre> <code class=" language-css">font-size: toRem(10); outputs: font-size: 0.625rem;</code></pre> </td> </tr> <tr> <td>fluid anything mixin<BR><a href="/atomic-docs/wm/atomic-core/?cat=2-mixins-and-functions#mixin-fluid-anything">fluid()</a></td> <td>Returns a calculation using viewport width. Can be used for any style that uses a number (e.g., font-size, width, etc). Somewhat hit-or-miss but can be tweaked to work as intended. <pre> <code class=" language-css">p { @include fluid("padding-right", 10, 150); } outputs: p { padding-right: calc(16.9697vw + -53.63636px); } </code></pre> </td> </tr> </tr> <tr> <td><a href="/atomic-docs/wm/atomic-core/?cat=2-mixins-and-functions#mixin-right-arrow">rightarrow()</a> mixin </td> <td>Outputs a stylized right arrow as seen in the <a href="../wm/atomic-core/?cat=7-rows#events">Events row</a>. <code>syntax: @include rightarrow(color, padding, pointWidth, pointHeight, lineWidth, lineBorderSize)</code> <pre> <code class=" language-css"> p { @include rightarrow(var(--color-webgold-75), 13px, 6px, 6px, 15px, 1px); } outputs: p:before { position: absolute; top: calc(50% - calc(6px/ 2)); right: 0; display: inline-block; width: 6px; height: 6px; content: ""; transition: all 0.2s ease-in-out; transform: rotate(45deg); border-top: 1px solid #866f45; border-right: 1px solid #866f45; } :hover p:before { transform: translate3d(10px, 0, 0) rotate(45deg); } p:after { position: absolute; top: 50%; right: 0; width: 15px; height: 1px; content: ""; transition: all 0.2s ease-in; background: #866f45; } :hover p:after { transform: translate3d(10px, 0, 0); }</code></pre> </td> </tr> </tbody> </table> </div> </div>
Cancel
Copy
Copy
Edit
/* scss/2-mixins-and-functions/_cheatsheet-functions-and-mixins.scss */
Cancel