Skip to content

Instantly share code, notes, and snippets.

Writing CSS

Tommy Hodgins tomhodgins

Writing CSS
Block or report user

Report or block tomhodgins

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View selector-builder.js
// Point & Click Selector Builder
// Simple CSS Selector
function simpleSelector(node) {
const buildTag = tag => {
let tagName = tag.tagName.toLowerCase()
let className = Array.from(tag.classList).filter(name => name.includes('=') === false).join('.')
let attributes = (
? `#${}`
tomhodgins / demo.html
Last active Sep 29, 2019
An example of a CSS stylesheet that can be processed with process-css-demo and turned into output.js with all of the CSS code and JavaScript runtime required to support the functions used in the input.css stylesheet. Online at:
View demo.html
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>process-css-demo demo page</title>
<h1>Process CSS Demo demo page</h1>
<div id=reset-at-rule>
<p>This does not have the reset applied</p>
tomhodgins / input-css.css
Created Sep 5, 2019
Convert vanilla CSS with a custom at-rule for element queries into either Caffeinated Style Sheets (using @supports) that can be read client-side in the browser to control JS plugins, or output JavaScript output that calls the plugins directly. Run with Deno: deno preprocess-element-queries.js input-css.css css
View input-css.css
@--element div and (min-width: 500) and (max-width: 1000) {
:--self {
background-color: lime;
tomhodgins / css-input.css
Last active Sep 5, 2019
Code from “How to Design & Support Your Own Custom CSS Features”, watch on YouTube →
View css-input.css
@--variation 1 {
body { background: lime; }
h1 { font-size: 10pt; }
@--variation 2 {
body { background: orange; }
h1 { font-size: 99pt; }
tomhodgins / log-all-unique-media-query-breakpoints-used.js
Created Sep 4, 2019
Paste this into your browser's console to list all unique media query breakpoints used in CSSOM
View log-all-unique-media-query-breakpoints-used.js
// Unique Media Queries
import('').then(({process, query})=> {
let found = new Set
rule => && found.add(
.replace(/(only\s+)*screen\s+(and\s+)*/, '')
View css-input.css
single size prop { --size: 10px; }
double size prop { --size: 20px 30px; }
View pattern-matcher.js
function patternMatcher(
list = [],
patterns = [item => false],
filter = () => true
) {
const trimmed = list.filter(filter)
const firstIndex = trimmed.findIndex(item =>
patterns.every((pattern, index) =>
trimmed[trimmed.indexOf(item) + index]
tomhodgins / list-html-tags-chrome-parses.js
Last active Sep 2, 2019
Run this snippet in the browser's JS console, or on the CLI via Deno to list HTML tags
View list-html-tags-chrome-parses.js
// Run this snippet in the browser's JS console, or via Deno to list HTML tags Chrome parses
const JSON5 = {
parse: string => new Function(`return ${string}`)()
.then(response => response.text())
.then(text => JSON5.parse(text)) /* lol */
.then(({data}) => console.log( => ? : item)
tomhodgins / instant-site-improver.js
Created Aug 30, 2019
Drop this into the console of any website. Generally the better the design, the less changes when you add this.
View instant-site-improver.js
// instant site improver
import('').then(({populate, tag}) =>
tag('meta', {name: 'viewport', content: 'width=device-width, initial-scale=1'}, [],
tag('style', {}, `
* {
box-sizing: border-box;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
View css-anatomy.css
/* CSS Anatomy */
/* At-rules, start with an @ and can take a number of forms */
@at-rule "";
@at-rule function();
@at-rule {};
@at-rule () {};
/* Selectors, the first part of a style rule before the declaration list */
You can’t perform that action at this time.