Skip to content

Instantly share code, notes, and snippets.

View tomhodgins's full-sized avatar
😍
Writing CSS

Tommy Hodgins tomhodgins

😍
Writing CSS
347 followers · 294 following
View GitHub Profile
@tomhodgins
tomhodgins / step-1.js
Created August 6, 2020 14:50
Going from a basic HTML function to a tagged template string, to a custom templating solution in three easy steps!
function html(string = '') {
return document.implementation
.createHTMLDocument()
.createRange()
.createContextualFragment(string)
}
/*
A JavaScript function that takes a string of HTML syntax, parses it as HTML and returns a Document Fragment containing all parsed nodes.
@tomhodgins
tomhodgins / html-slot-evaluator.js
Created August 6, 2020 01:17
function evaluateTemplate(template = '', html = '') {
const tag = Object.assign(
document.createElement('shadow-dom'),
{innerHTML: html}
)
tag.attachShadow({mode: 'open'})
tag.shadowRoot.innerHTML = template
// Replace <slot> with contents (flatten)
@tomhodgins
tomhodgins / custom-css.css
Created August 5, 2020 19:14
Custom Parts of CSS Syntax
@--custom-at-rule with prelude {
custom-type:--custom-pseudo-class(with args) /--custom-combinator/ ::--custom-pseudo-element {
--custom-property: --custom-ident --custom-function(1--custom-unit) !--custom-annotation;
}
}
@tomhodgins
tomhodgins / legal-css-custom-property-values.css
Created July 27, 2020 18:37
@tomhodgins
tomhodgins / custom-json-access-function.css
Last active July 24, 2020 18:01
What if you could pass JSON to CSS as the value of a custom property and access .propertyNames and [indexes]
:root {
--palette: {
"blue": "#06f",
"font": ["Comic Sans MS", "Papyrus"]
};
font-family: --json(var(--palette).font[1]);
color: --color(--json(var(--palette).blue));
}
@tomhodgins
tomhodgins / star-rating-element-test.html
Last active July 23, 2020 23:59
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Star Rating Element</title>
<script type=module>
import StarRating from './star-rating-element.js'
customElements.define('star-rating', StarRating)
</script>
@tomhodgins
tomhodgins / word-carousel.html
Last active July 16, 2020 01:49
@tomhodgins
tomhodgins / html-tagged-template-function.js
Created July 11, 2020 17:39
export default function html(taggedTemplateString = [''], ...expressions) {
const nodes = []
const functions = new Map
const strings = typeof taggedTemplateString === 'string'
? [taggedTemplateString]
: taggedTemplateString
function stringifyObject(object = '') {
// Null
if (object === null) {
@tomhodgins
tomhodgins / json-types-in-css-syntax.css
Last active July 15, 2020 22:50
json types in CSS syntax {
--string: "string";
--number: 1;
--object: {"key": "value"};
--array: [1, 2, 3];
--boolean: true false;
--null: null;
--example: {
"json": ["data", true]
@tomhodgins
tomhodgins / detect-light-dark-mode-change.js
Created July 10, 2020 16:41
window.matchMedia('(prefers-color-scheme: dark)').addListener(list => {
console.log(
event.matches === true
? 'Dark mode enabled'
: 'Light mode enabled'
)
})