Improved .visually-hidden
Theorically bulletproof CSS class for visually hide anything and keep it accessible to ATs.
/* | |
* For use with the nunjucks templating system | |
* http://mozilla.github.io/nunjucks | |
* | |
* I created a bunch of macros for quickly creating date/time fields. | |
* Import into your nunjucks template: | |
* "{% import "path/to/datefields.nunjucks" as datefields %}" | |
* And use... | |
* {{ datefields.month_select("yo_month", "M", "", "form-control") }} | |
* |
The MIT License (MIT) | |
Copyright (c) 2015 Justin Perry | |
Permission is hereby granted, free of charge, to any person obtaining a copy of | |
this software and associated documentation files (the "Software"), to deal in | |
the Software without restriction, including without limitation the rights to | |
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of | |
the Software, and to permit persons to whom the Software is furnished to do so, | |
subject to the following conditions: |
/** | |
* This code is licensed under the terms of the MIT license | |
* | |
* Deep diff between two object, using lodash | |
* @param {Object} object Object compared | |
* @param {Object} base Object to compare with | |
* @return {Object} Return a new object who represent the diff | |
*/ | |
function difference(object, base) { | |
function changes(object, base) { |
{ | |
"name": "Example", | |
"version": "0.0.1", | |
"description": "Example workflow", | |
"author": "You <[email protected]>", | |
"license": "MIT", | |
"postcss": { | |
"plugins": { | |
"postcss-easy-import": {}, | |
"postcss-preset-env": { |
/** | |
* @param {number} yPos Pixels from the top of the screen to scroll to | |
* @param {number} duration Time of animation in milliseconds | |
*/ | |
const scrollTo = (yPos, duration = 600) => { | |
const startY = window.scrollY; | |
const difference = yPos - startY; | |
const startTime = performance.now(); | |
const step = () => { |
This is a simple Tailwind plugin to expose all of Tailwind's colors, including any custom ones, as custom css properties on the :root
element.
There are a couple of main reasons this is helpful:
See the Tailwind Plugins for more info on plugins.
/** | |
* @plug | |
* DOMRegex.js | |
* https://mattoestreich.com | |
* | |
* @description | |
* Modified from: https://stackoverflow.com/a/62144522 | |
* TLDR; querySelectorAll with regex support | |
* | |
* @important |