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
@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 / 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 / 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()
)
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) =>
pattern(
trimmed[trimmed.indexOf(item) + index]
@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)
@tomhodgins
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('https://tomhodgins.github.io/domforever/index.vanilla.js').then(({populate, tag}) =>
populate(
document.head,
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 "";
@at-rule function();
@at-rule {};
@at-rule () {};
/* Selectors, the first part of a style rule before the declaration list */
@tomhodgins
tomhodgins / log-rules-for-option-tags.js
Created Aug 22, 2019
Paste this rule in your browser's JS console on a loaded web page to log all rules targeting <option> tags. Change the text 'option' in the regex on line 7 to something else to filter for a different tag
View log-rules-for-option-tags.js
import ('https://unpkg.com/cssomtools') .then(
({stringify, filter, all}) =>
console.log(
stringify(
filter(
all(),
rule => rule.selectorText && /\boption\b/.test(rule.selectorText)
)
)
)
View conditions.js
// If statements
var headline
if (variation === 1) {
headline = 'Variation B'
}
if (variation === 2) {
headline = 'Variation C'
}
You can’t perform that action at this time.