c-kick

//26-5-2020 update: possibly shorter, and better, since 'click' now fires on a tap, and is not prevented by the previous script. 
//Also: more concatenation.
$(document).on('touchstart, click', 'a.taphover', function (e) {
    if (!$(this).hasClass('hover')) { e.preventDefault(); }
    $('.taphover').not($(this).toggleClass('hover')).removeClass('hover');
});

//the previous version:

//taphover - a solution to the lack of hover on touch devices.

addyosmani

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

csswizardry

// When we give an element some ‘attention’.
@mixin attention() {

    &:hover,
    &:active,
    &:focus {
        @content;
    }

}

benfrain

function custom_mtypes( $m ){
    $m['svg'] = 'image/svg+xml';
    $m['svgz'] = 'image/svg+xml';
    return $m;
}
add_filter( 'upload_mimes', 'custom_mtypes' );

gisu

// ----
// libsass (v0.7.0)
// ----

$media-direction: max;

// Mixin: flex-breakpoint 
// Flexible Breakpoint Mixin
// 'Mixin with Content Insert'
//

gisu

@mixin size($size) {
  @if length($size) == 2 {
    $width  : nth($size,1);
    $height : nth($size,2);
    
    @if unitless($width) {
      $width: $width + 0px;
    }
    
    @if unitless($height) {

brandonkelly

Templating in EE vs. Craft CMS.

Here are a few common tasks you might do in your templates, as they would be written in ExpressionEngine vs. Craft CMS.

Table of Contents

1. Comments
2. Conditionals
3. Loops
4. Looping Through Entries

kevin-smets

Default

Powerlevel10k

adamcbrewer

//============================================================
// Typography
//============================================================

// An rem font-size mixin providing fallback to px
@mixin font-size($sizeValue: 1.4) {
    $remValue: $sizeValue;
    $pxValue: ($sizeValue * 10);
    font-size: #{$pxValue}px;
    font-size: #{$remValue}rem;

mjackson

/**
 * Converts an RGB color value to HSL. Conversion formula
 * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
 * Assumes r, g, and b are contained in the set [0, 255] and
 * returns h, s, and l in the set [0, 1].
 *
 * @param   Number  r       The red color value
 * @param   Number  g       The green color value
 * @param   Number  b       The blue color value
 * @return  Array           The HSL representation