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 = (
tag.id.length
? `#${tag.id}`
@tomhodgins
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: https://tomhodgins.com/demo/process-css-demo-demo/
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>
<h2>@--reset</h2>
<div id=reset-at-rule>
<p>This does not have the reset applied</p>
@tomhodgins
tomhodgins / same-element.html
Created Apr 27, 2017
Each of the ten selectors in the css below set the `color` property for the same element: the second <li>. This shows the versatility in CSS selectors and why it's hard sometimes for machines to predict which elements a style may apply to without knowing the current state of HTML
View same-element.html
<input type=range min=0 max=100 value=100>
<input type=checkbox>
<input autofocus>
<ul>
<li>item
<li id=demo>item
<li>item
</ul>
@tomhodgins
tomhodgins / css-input.css
Last active Sep 5, 2019
Code from “How to Design & Support Your Own Custom CSS Features”, watch on YouTube → https://youtu.be/Q3yruVWYHWk
View css-input.css
@--variation 1 {
body { background: lime; }
h1 { font-size: 10pt; }
}
@--variation 2 {
body { background: orange; }
h1 { font-size: 99pt; }
}
@tomhodgins
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
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('https://unpkg.com/cssomtools').then(({process, query})=> {
let found = new Set
process(
query(),
rule => rule.media && found.add(
rule.media.mediaText
.replace(/(only\s+)*screen\s+(and\s+)*/, '')
.trim()
)
@tomhodgins
tomhodgins / preset.js
Last active Sep 3, 2019
Generate a simple reset/preset for an element and it's children. Run with node, supply your selector as the command line argument.
View preset.js
let selector
// Deno CLI support
if (typeof Deno !== 'undefined') {
[selector] = Deno.args.slice(1)
}
// Node CLI support
if (typeof process !== 'undefined') {
[selector] = process.argv.slice(2)
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) =>
pattern(
trimmed[trimmed.indexOf(item) + index]
View css-input.css
single size prop { --size: 10px; }
double size prop { --size: 20px 30px; }
@tomhodgins
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}`)()
}
fetch('https://raw.githubusercontent.com/chromium/chromium/master/third_party/blink/renderer/core/html/html_tag_names.json5')
.then(response => response.text())
.then(text => JSON5.parse(text)) /* lol */
.then(({data}) => console.log(
data.map(item => item.name ? item.name : item)
You can’t perform that action at this time.