Instantly share code, notes, and snippets.

View base.mjs
export default class BaseTemplate {
constructor(){
this.head = {};
}
render(){
const body = `
${this.header}
<main>
${this.page}
</main>
View Some Template.something
<ul>
{{for list}}
<li>{{list.item}}</li>
{{/for}}
</ul>
{{if condition}}
<small>disclaimer for something that meets condition</small>
{{/if}}
View json-examples.json
/* 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" },
View misc.css
: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;
View text.css
: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;
View font-face.css
@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;
View color.css
: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);
View international.css
:root {
/* ---- capitalize ------*/
--capitalize: capitalize;
/* ---- uppercase ------*/
--uppercase: uppercase;
/* ---- italic ------*/
--italic: italic;
View common.css
: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 ------*/
View theme.css
:root {
/* Colors */
--color-100: --g-blue-100;
--color-200: --g-green-200;
/* text */
--text-color-500: --g-grey-800;
--text-color-300: --g-grey-400;
--body-font-500: --g-sans;