Skip to content

Instantly share code, notes, and snippets.

View ben-rogerson's full-sized avatar

Ben Rogerson ben-rogerson

489 followers · 54 following
View GitHub Profile
@ben-rogerson
ben-rogerson / twin.code-snippets
Last active June 16, 2023 02:22
Twin Code Snippits for use in vscode - Shortcuts that make working with Twin a little easier
{
// Snippits that make working with Twin a little easier
// https://github.com/ben-rogerson/twin.macro
"Add react import": {
"scope": "javascript,typescript,typescriptreact",
"prefix": "react",
"body": "import React from 'react'",
"description": "Add react import"
},
"Add twin imports": {
@ben-rogerson
ben-rogerson / App.js
Last active August 20, 2024 09:19
A breakpoint provider that syncs up with your screens in tailwind.config.js. Common use is to fully remove elements from the dom rather than hide them with css.
import React from 'react';
import { useMinScreen } from './minScreen';
const App = () => {
const { min } = useMinScreen();
return (
<>
{min`md` && <div>I'll show at md and up</div>}
{!min`lg` && <div>I'll show at up to lg</div>}
@ben-rogerson
ben-rogerson / babel-plugin-macros.config.js
Last active April 18, 2020 06:50
Gatsby recipe > Twin + Emotion
module.exports = {
twin: {
styled: 'styled-components'
}
}
@ben-rogerson
ben-rogerson / readme.md
Last active April 29, 2021 12:53
Using Emotion Styled Components with Tailwind
We couldn’t find that file to show.
@ben-rogerson
ben-rogerson / image.html
Created October 7, 2019 19:39
Picture loading: Fallback sources
<picture>
<source
srcset="/some/_1170x658_crop_center-center/man-with-a-dog.webp 1170w,
/some/_970x545_crop_center-center/man-with-a-dog.webp 970w,
/some/_750x562_crop_center-center/man-with-a-dog.webp 750w,
/some/_320x240_crop_center-center/man-with-a-dog.webp 320w"
sizes="100vw"
type="image/webp"
/>
<source
@ben-rogerson
ben-rogerson / base.twig
Last active February 23, 2020 02:31
Config for agency-webpack-mix-config and Craft Twigpack
{# This is the base twig layout file #}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ben-rogerson
ben-rogerson / mapping.scss
Last active November 12, 2018 23:01
SASS Mapping Example
// Helper: Get a map item from an object that is a few levels deep
@function map-deep-get($map, $keys...) {
@each $key in $keys {
$map: map-get($map, $key);
}
@return $map;
}
// Define the theme within your project palette
@ben-rogerson
ben-rogerson / search.js
Last active October 18, 2018 19:07
Vue Craft GraphQL Search Component
import Vue from 'vue/dist/vue.esm';
import axios from 'axios';
Vue.config.productionTip = false
// Information needed for connecting to our CraftQL endpoint
const apiToken = '[ADD KEY HERE]';
const apiUrl = '/api';
@ben-rogerson
ben-rogerson / search.twig
Created October 11, 2018 23:34
How to include search queries into your Craft searches
{% set activeQuery = craft.app.request.getParam('q')|default('') %}
{% set searchResults = activeQuery ?
craft.products({
search: {
query: activeQuery,
subRight: true,
},
order: 'score',
})|merge(
@ben-rogerson
ben-rogerson / base.twig
Last active October 6, 2018 14:14
Craft 3 Templates: Experimenting with Twig Objects as HTML building blocks
{#
# Craft 3 Templates: Experimenting with Twig Objects as HTML building blocks
Ben Rogerson <[email protected]> 2018
This Gist explores a way to create HTML from a formatted TWIG object.
I found it encourages a different way of thinking when writing HTML.
Here's an example that uses the emmet shorthand to create a `<button>` with a `<main>` parent.