tomhodgins
/ css-overlay.js
Last active
December 1, 2019 21:33
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==UserScript== | |
| // @name CSS Overlay 2 | Ace Edition | |
| // @namespace overlay | |
| // @version 1.0 | |
| // @description For writing CSS stylesheets | |
| // @author Tommy Hodgins | |
| // @match *://*/* | |
| // ==/UserScript== | |
| document.documentElement.appendChild(document.createElement('style')).textContent = ` |
tomhodgins
/ toggle-visbug.js
Created
October 27, 2019 21:05
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Toggle VisBug | |
| (() => { | |
| if (document.querySelector('vis-bug')) { | |
| document.querySelector('vis-bug').remove() | |
| } else { | |
| const script = document.createElement('script') | |
| const tag = document.createElement('vis-bug') | |
| script.src = 'https://visbug.web.app/bundle.js' | |
| document.head.appendChild(script) | |
| document.body.appendChild(tag) |
tomhodgins
/ critical-css-generator.js
Created
October 26, 2019 22:16
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Run this on a loaded web page in the browser to log a CSS stylesheet to the console that contains all of the CSS rules that presently apply to the elements visible on the screen. This can be used for 'Critical CSS' generation | |
| // You can use an import statement like this if it's in a <script type=module> | |
| //import {process} from 'https://unpkg.com/cssomtools' | |
| // Or a dynamic import() for copy/pasting into the JS console | |
| import('https://unpkg.com/cssomtools').then(({process, all}) => { | |
| // Log the final output to the console | |
| console.log( |
tomhodgins
/ selector-builder.js
Last active
October 8, 2019 17:56
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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
/ demo.html
Last active
September 29, 2019 20:48
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/
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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
/ input-css.css
Created
September 5, 2019 16:25
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @--element div and (min-width: 500) and (max-width: 1000) { | |
| :--self { | |
| background-color: lime; | |
| } | |
| } |
tomhodgins
/ css-input.css
Last active
September 5, 2019 16:51
Code from “How to Design & Support Your Own Custom CSS Features”, watch on YouTube → https://youtu.be/Q3yruVWYHWk
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @--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
September 4, 2019 19:32
Paste this into your browser's console to list all unique media query breakpoints used in CSSOM
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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
/ css-input.css
Last active
September 3, 2019 14:51
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| single size prop { --size: 10px; } | |
| double size prop { --size: 20px 30px; } |
tomhodgins
/ pattern-matcher.js
Last active
September 3, 2019 14:51
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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] |