Skip to content

Instantly share code, notes, and snippets.

😍
Writing CSS

Tommy Hodgins tomhodgins

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 / map-test.js
Last active May 3, 2019
run with -> $deno map-test.js | prettier --parser css > output.css
View map-test.js
const listMapper = (list, template) => list.map(template).join('\n')
const objectMapper = (object, template) => Object.entries(object).map(template).join('\n')
console.log(
listMapper(
[
'red',
'blue',
'green'
],
View custom-event.es5.js
// Create an empty 'modalbuilt' variable to use
var modalbuilt;
// Modern browsers can create a new Event()
try { modalbuilt = new Event('modalbuilt'); }
// IE11 needs to use createEvent() and initEvent()
catch(error) {
modalbuilt = document.createEvent('Event');
modalbuilt.initEvent('modalbuilt', false, false);
We couldn’t find that file to show.
@tomhodgins
tomhodgins / cssomtools-user-script.js
Created Apr 24, 2019
Run this script with TamperMonkey to use CSSOMTools in the browser console on every website
View cssomtools-user-script.js
// ==UserScript==
// @name CSSOMTools
// @namespace cssomtools
// @version 1.0
// @description Tools for working with CSS
// @homepage https://github.com/tomhodgins/cssomtools
// @author Tommy Hodgins
// @match *://*/*
// ==/UserScript==
View functions.js
// includes anywhere (does this now)
function selector(string, list) {
list = list || all();
if (list.cssRules) {
list = [list];
}
return list.map(function(stylesheet) {
return filter(
stylesheet,
function(rule) {
View css-debugging.js
function filterRules(string, filter) {
return [...document.styleSheets].map(stylesheet => {
try { stylesheet.cssRules }
catch(error) { return '' }
return [...stylesheet.cssRules]
.filter(filter)
.map(rule => rule.cssText).join('\n\n')
}).join('\n')
}
View css-functions.js
// Takes a string
// Returns a CSSStyleSheet object
function parse(string) {}
// Takes a CSSStyleSheet or CSSRule object, or an array containing them
// Returns the objects passed in after processing with callback function
function process(object, callback) {}
// Takes a CSSStyleSheet or CSSRule object, or an array containing them
// Returns the original object, minus all CSSRule objects
@tomhodgins
tomhodgins / css-building-blocks.js
Last active Apr 14, 2019
a library of functions for ripping around the CSSOM, finding, operating on, or working with the CSS stylesheets and rules you find
View css-building-blocks.js
var csstools = (function() {
function parse(string) {
var iframe = document.createElement('iframe')
document.head.appendChild(iframe)
var style = iframe.contentDocument.createElement('style')
style.textContent = string
iframe.contentDocument.head.appendChild(style)
var stylesheet = iframe.contentDocument.styleSheets[0]
document.head.removeChild(iframe)
View backpack-filter-shadows.js
// jsincss
function jsincss(a,b,e){function f(c,a,b,e){return c.addEventListener(a,function(a){var d=document.querySelector("#jsincss-"+b);d||(d=document.createElement("style"),d.id="jsincss-"+b,document.head.appendChild(d));var c=d.textContent;a=e(a);d=c&&a===c?void 0:d.textContent=a;return d})}a=a||function(){return""};b=b||window;e=e||["load","resize","input","click","reprocess"];var g=Date.now()+Math.floor(100*Math.random());return b===window?e.forEach(function(c){return f(window,c,g,a)}):Array.prototype.slice.call(document.querySelectorAll(b)).forEach(function(c){return e.forEach(function(b){return f(c,b,g,a)})})};
// overflow(selector, 'top'|'right'|'bottom'|'left'|[], '[--self] {}')
function overflow(c,b,f){var d=(c+b).replace(/\W/g,""),g={top:function(a){return 0<a.scrollTop},right:function(a){return a.scrollLeft+a.offsetWidth<a.scrollWidth},bottom:function(a){return a.scrollTop+a.offsetHeight<a.scrollHeight},left:function(a){return 0<a.scrollLeft}};return Array.prototype.slice.call(document.querySel
View caffeinated-css.css
/* Valid CSS, polyfillable */
.card-details {
transition: background-color .2s;
}
.list-card-details[--has='.member-avatar[title^="Tommy Hodgins"]'] {
background-color: rgb(200, 225, 255);
}
You can’t perform that action at this time.