Skip to content

Instantly share code, notes, and snippets.

View zenbug's full-sized avatar

zenbug

View GitHub Profile
@zenbug
zenbug / responsive-images-craft.txt
Last active July 14, 2020 14:32
Using LazySizes and the Picture element with responsive breakpoints for art-direction in Craft CMS
{#
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
_layouts/main-layout.html
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
All image transforms are defined here in the main layout template so they can be used site-wide. Templates using this layout can reference them thus:
{{ theBackgroundImage.url(transform.small) }}
#}
{% set transform = {
small: {
@zenbug
zenbug / include-with-variables
Created February 27, 2019 21:40
Craft CMS Include with embedded variables
{% include "oz/emerald-city with {
"character" : "tinman"
} %}
@zenbug
zenbug / Accessible Navigation Menu with Tailwind
Last active July 3, 2020 15:57
Accessible Navigation Menu with Tailwind
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
README
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
This is not fully Tailwind because it uses pseudo classes.
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
{#
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
_includes/library-search-form.html
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#}
<form action="{{ url('library/results') }}">
{#? Keywords #}
<div class="flex flex-wrap mb-6 -mx-3">
<div class="w-full px-3">
<label class="block mb-2 font-bold tracking-wide text-hbgray-900" for="keywords">Keywords (Optional)</label>