coltpini

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

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

coltpini

:root {

	/* ---- capitalize ------*/
	--capitalize: capitalize;

	/* ---- uppercase ------*/
	--uppercase: uppercase;

	/* ---- italic ------*/
	--italic: italic;

coltpini

:root {

	/* ---- color ------*/
	--color-pinterest: rgba(203,32,39,1);
	--color-google: rgba(205,32,31,1);
	--color-twitter: rgba(85,172,238,1);
	--color-facebook: rgba(59,89,152,1);
	--color-instagram: rgba(60,90,150,1);

	/* ---- breakpoint ------*/