Skip to content

Instantly share code, notes, and snippets.

Avatar

Danny Englander danny-englander

View GitHub Profile
@thejimbirch
thejimbirch / metatag_example.php
Created Aug 19, 2019 — forked from mortenson/metatag_example.php
OR statements in metatags...
View metatag_example.php
<?php
/**
* Implements hook_metatags_attachments_alter().
*
* This function allows you to define fallback tokens in case a field is empty.
*
* If all fallback values are empty, the tag will be empty.
*
* Example: [node:field_image:medium]||[node:field_legacy_image:medium]||/fallback.png
@leymannx
leymannx / gulpfile.js
Last active Mar 13, 2021
Gulp 4 Sass BrowserSync Kickstart Example
View gulpfile.js
// Requires Gulp v4.
// $ npm uninstall --global gulp gulp-cli
// $ rm /usr/local/share/man/man1/gulp.1
// $ npm install --global gulp-cli
// $ npm install
const { src, dest, watch, series, parallel } = require('gulp');
const browsersync = require('browser-sync').create();
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const sourcemaps = require('gulp-sourcemaps');
@thamas
thamas / field--field-unit-plural.html.twig
Last active Dec 11, 2018
Drupal 8 Twig: hide a (paragraph) field based on the value of a sibling field
View field--field-unit-plural.html.twig
{#
This snippet is from a component based (Emulsify / Pattern Lab) custom Drupal theme.
The "span_…" variables are the properties of the BEM Twig function.
See: https://www.fourkitchens.com/blog/development/bem-twig-function/
The goal is to set the default display correctly (when the page loads).
After that the field visibility is manipulated by JS based on user interaction.
#}
{% set amount = element['#object'].field_amount.value %}
@iamrobert
iamrobert / tiny-slider-app.js
Created Oct 3, 2018
Tiny Slider - with plyr.io video stop
View tiny-slider-app.js
app.pageSliders = {
slider: null,
container: ".tiny-slider",
init: function() {
// no reason to continue init if no slider on page
if (!document.querySelector("#mainslider")) {
return;
}
app.pageSliders.slider = tns({
@arshad
arshad / Value.md
Created Jul 2, 2018
Value module: |pick and |rename_keys example
View Value.md

Value module: |pick and |rename_keys example

Given the following component:

<div class="card">
  <div class="card-header">
    <h4>{{ title }}</h4>
  </div>
  <div class="card-body">
@illepic
illepic / particle-deps.sh
Last active Mar 13, 2021
Particle from scratch with all dependencies
View particle-deps.sh
#!/usr/bin/env bash
# 1. Skip steps if you already have the tools listed
# 2. Run source ~/.bashrc or source ~/.zshrc after each step to ensure command is registered
# Install Homebrew, if not installed
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
# Update Homebrew installed packages
brew update && brew upgrade
@jeromecoupe
jeromecoupe / webstoemp-gulpfile.js
Last active May 4, 2021
Gulp 4 sample gulpfile.js. For a full explanation, have a look at https://www.webstoemp.com/blog/switching-to-gulp4/
View webstoemp-gulpfile.js
"use strict";
// Load plugins
const autoprefixer = require("autoprefixer");
const browsersync = require("browser-sync").create();
const cp = require("child_process");
const cssnano = require("cssnano");
const del = require("del");
const eslint = require("gulp-eslint");
const gulp = require("gulp");
View sg-throwdown.md

Styleguide Throwdown - Part 1

Ticket

Notes

Large goals of style guide:

"Platform agnostic enough” (to be useful to other teams) To make our development process easier Developers report that the current SG2 approach is not furthering those goals. In particular, there are complaints about having to do double work, and the fragility of our build and deploy process.

@sakalauskas
sakalauskas / FontAwesome-v5.0.9-Free.json
Last active Apr 24, 2021
List of all Font Awesome 5 icons in JSON Cheetsheet
View FontAwesome-v5.0.9-Free.json
{
"fas fa-address-book","fas fa-address-card","fas fa-adjust","fas fa-align-center","fas fa-align-justify","fas fa-align-left","fas fa-align-right","fas fa-allergies","fas fa-ambulance","fas fa-american-sign-language-interpreting","fas fa-anchor","fas fa-angle-double-down","fas fa-angle-double-left","fas fa-angle-double-right","fas fa-angle-double-up","fas fa-angle-down","fas fa-angle-left","fas fa-angle-right","fas fa-angle-up","fas fa-archive","fas fa-arrow-alt-circle-down","fas fa-arrow-alt-circle-left","fas fa-arrow-alt-circle-right","fas fa-arrow-alt-circle-up","fas fa-arrow-circle-down","fas fa-arrow-circle-left","fas fa-arrow-circle-right","fas fa-arrow-circle-up","fas fa-arrow-down","fas fa-arrow-left","fas fa-arrow-right","fas fa-arrow-up","fas fa-arrows-alt","fas fa-arrows-alt-h","fas fa-arrows-alt-v","fas fa-assistive-listening-systems","fas fa-asterisk","fas fa-at","fas fa-audio-description","fas fa-backward","fas fa-balance-scale","fas fa-ban","fas fa-band-aid","fas fa-barcode","fas fa-bars",
@startinggravity
startinggravity / lando-emulsify.md
Last active Oct 29, 2019
Using Lando with Emulsify
View lando-emulsify.md

I have had a few requests for more information about using Lando with Drupal 8, the Emulsify theme and Gulp. In order to put what I've learned in one place, I'm adding my notes here.

My initial problem was reported here, but since then I have discovered a few additional things worth noting.

Once you have a working site on Lando and are ready to install Emulsify use the following directions instead of what has provided by the Emulsify developers. These instructions assume you have used Composer to install Drupal and that the root Drupal files are in the /web directory.


NOTE: To follow these instructions, you will need to run NPM commands from your host machine, which means you must have Node and NPM installed. Fortunately, they are installed together in one installation. If you wish to confirm you have them installed, run node -v and npm -v. To install, visit nodejs.org and follow the i