coltpini

const getRandom = (max: number, zero = true) => {
    const rn = Math.floor(Math.random() * max);
    return zero ? rn : rn + 1;
};

coltpini

const someReallyAwesomeFunction = () => {
  
  //some process that you want to know when it is finished in an async way.
  
  //After we are finished with the process, then we can push an event
  // with custom events we can attach what ever data we need to pass.
  let myEvent = new CustomEvent('customEventName', { 
    detail: {
      obj: 'that you can pass with the event!',
      pass: 'what ever you want'

coltpini

//Step 1: Pull in the function for the action.
import { getArticles } from '../store/articleList/actions.js';

//Step 2: This connects the action, getArticles, to dispatch the action.
const mapActionsToDispatch = (dispatch) => ({
    loadArticles: () => dispatch( getArticles() )
});

//Step 3: This takes the connected action and merges it to a prop for React.
const mergeProps = (state, actions) => ({

coltpini

export default class BaseTemplate {
    constructor(){
        this.head = {};
    }
    render(){
        const body = `
            ${this.header}
            <main>
                ${this.page}
            </main>

coltpini

<ul>
  {{for list}}
    <li>{{list.item}}</li>
  {{/for}}
</ul>
{{if condition}}
  <small>disclaimer for something that meets condition</small>
{{/if}}

coltpini

/* Color Example */
{
  "id": "black",
  "value": [
    { "id":"200", "value":"240,240,240,1" },
    { "id":"300", "value":"230,230,230,1" },
    { "id":"300-t", "value":"0,0,0,0.3" },
    { "id":"400", "value":"210,210,210,1" },
    { "id":"500", "value":"170,170,170,1" },
    { "id":"600", "value":"140,140,140,1" },

coltpini

:root {

	/* ---- spacing ------*/
	--spacing-100: 0.25rem;
	--spacing-150: 0.375rem;
	--spacing-200: 0.5rem;
	--spacing-250: 0.625rem;
	--spacing-300: 0.9375rem;
	--spacing-350: 1.25rem;
	--spacing-400: 1.625rem;

coltpini

:root {

	/* ---- font-size-root ------*/
	--font-size-root: 16px;

	/* ---- font-size ------*/
	--font-size-50: 0.625rem;
	--font-size-100: 0.6875rem;
	--font-size-200: 0.75rem;
	--font-size-300: 0.875rem;

coltpini

@font-face {
  font-family: "Example Font";
  font-weight: 400;
  font-style: Normal;
  src: url(//example.domain/cdn/example-font-cyr-ext.woff2) format("woff2");
  unicode-range: U+0472-0473, U+0492-0493, U+049A-049B, U+04A2-04A3, U+04AE-04AF, U+04B2-04B3, U+04B6-04B7, U+04BA-0FBB, U+04C1-04C2, U+04D8-04D9, U+04DC-04DD, U+04E2-04E3, U+04E8-04E9, U+04EE-04EF, U+20B4;
}
@font-face {
  font-family: "Example Font";
  font-weight: 400;

coltpini

:root {

	/* ---- white ------*/
	--white: rgba(255,255,255,1);
	--white-500: rgba(255,255,255,1);
	--white-500-t: rgba(255,255,255,0.5);

	/* ---- black ------*/
	--black-200: rgba(240,240,240,1);
	--black-300: rgba(230,230,230,1);