Skip to content

Instantly share code, notes, and snippets.

Florens Verschelde fvsch

View GitHub Profile
@fvsch
fvsch / icon.css
Created Jun 20, 2018
Twig macro and default style for SVG icons
View icon.css
/**
* Default style for SVG icons
*/
.icon {
/* Allows sizing by changing the icon’s font-size.
(It should override the element's width/height attributes, if they exist.) */
width: 1em;
height: 1em;
/* This prevents having extra space below icons, and can be overriden easily
to vertical-align:middle or vertical-align:-0.3em if needed. */
@fvsch
fvsch / userstyle.css
Last active Jan 13, 2018
Twitter Lite desktop fix
View userstyle.css
/* Some wrapper with a background, looks jumpy when scrolling */
.A9Q6LIcr {
background-color: transparent !important;
}
/* Main content (class may change) */
._3wLZCidQ {
max-width: 600px !important;
}
@fvsch
fvsch / unfix.js
Created Oct 10, 2017
Force fixed elements into absolute position
View unfix.js
const elSelector = 'body *';
const activeClass = '_UF_ACTIVE_';
const styleId = '_UF_STYLES_';
const rootId = '_UF_ROOT_';
start();
function unfix(el) {
el.classList.add(activeClass);
}
@fvsch
fvsch / email-em-rem.md
Last active Jun 3, 2017
On ditching em and rem
View email-em-rem.md

I was looking into the a11y tooling that relied on the default font size to augment text, and, based on what I've found, it looks like, since modern browser zoom became a standard feature, default font size is more or less a defunct consideration for adaptive tech.

https://mindtheshift.wordpress.com/2015/04/02/r-i-p-rem-viva-css-reference-pixel/
https://hackernoon.com/rems-and-ems-and-why-you-probably-dont-need-them-664b9ce1e09f

Hi,

If one wants to ignore the base font size exposed by the browser[1] in their styles, and only use px, I don’t have much of an opinion on that. Most developers do that; I tend not to but may still do it sometimes; I don’t think there’s a clear-cut solution, and sadly too many articles I’ve read on this topic tend to approach it as a debate to be won.

Out of the two articles I liked the Mind The Shift post better, and the main comment I would have on it is already beautifully written here:

View forElement.js
/**
* Iterate on NodeList (e.g. result of document.querySelectorAll(foo))
* - Accept NodeList, arrays of elements, or a single element
* - Skip items that are not elements (checking nodeType)
* @param {NodeList|Element} nodes
* @param {function} callback
*/
function forElement(nodes, callback) {
if (nodes !== null && typeof nodes === 'object' && typeof callback === 'function') {
if (nodes.length) {
@fvsch
fvsch / .minttyrc
Created Oct 31, 2016
Example ~\.minttyrc for Git Bash on Windows
View .minttyrc
Columns = 140
Rows = 40
Font = Consolas
FontHeight = 11
Locale = fr_FR
Charset = UTF-8
Transparency = off
BoldAsFont = no
BoldAsColour = yes
FontSmoothing = default
@fvsch
fvsch / composer.json
Last active Jan 17, 2017
Install Kirby CMS core with Composer
View composer.json
{
"name": "my-website",
"license": "proprietary",
"description": "Example Kirby CMS 2.4 installation with Composer. The panel installation will need some tweaks!",
"type": "project",
"minimum-stability": "dev",
"require": {
"php": "^5.4 || ^7.0",
"mnsami/composer-custom-directory-installer": "1.1.*",
"getkirby/kirby": "2.4.*",
@fvsch
fvsch / composer.json
Last active Oct 16, 2016
Example Composer config for installing Kirby core and a few plugins
View composer.json
{
"name": "fooo/baaaar",
"license": "proprietary",
"type": "project",
"minimum-stability": "dev",
"require": {
"php": "^5.4 || ^7.0",
"mnsami/composer-custom-directory-installer": "1.1.*",
"getkirby/kirby": "^2.3.1",
"getkirby/toolkit": "^2.3.1",
@fvsch
fvsch / composer.json
Created May 29, 2016
Installing Github repos to custom locations with Composer
View composer.json
{
"name": "something/something",
"license": "proprietary",
"type": "project",
"minimum-stability": "dev",
"require": {
"php": "^5.4 || ^7.0",
"mnsami/composer-custom-directory-installer": "1.1.*",
"getkirby/kirby": "2.3.0",
"getkirby/toolkit": "2.3.0",
@fvsch
fvsch / kirby-site-asset.php
Last active Jun 27, 2018
Method for Kirby CMS to add a cache-busting query string to a path
View kirby-site-asset.php
/**
* Complete an asset's URL with base directory and timestamp
* Example: $site->asset('assets/css/test.css')
*
* @param Site $site
* @param string $path
* @return string
*/
$kirby->set('site::method', 'asset', function(Site $site, $path='') {
if (!is_string($path) or $path == '') {
You can’t perform that action at this time.