Ben Rogerson 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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Show hidden characters
| { | |
| // 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
/ 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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
/ babel-plugin-macros.config.js
Last active
April 18, 2020 06:50
Gatsby recipe > Twin + Emotion
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module.exports = { | |
| twin: { | |
| styled: 'styled-components' | |
| } | |
| } |
ben-rogerson
/ readme.md
Last active
April 29, 2021 12:53
Using Emotion Styled Components with Tailwind
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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
/ base.twig
Last active
February 23, 2020 02:31
Config for agency-webpack-mix-config and Craft Twigpack
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {# 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"> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
/ search.twig
Created
October 11, 2018 23:34
How to include search queries into your Craft searches
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {% set activeQuery = craft.app.request.getParam('q')|default('') %} | |
| {% set searchResults = activeQuery ? | |
| craft.products({ | |
| search: { | |
| query: activeQuery, | |
| subRight: true, | |
| }, | |
| order: 'score', | |
| })|merge( |
ben-rogerson
/ base.twig
Last active
October 6, 2018 14:14
Craft 3 Templates: Experimenting with Twig Objects as HTML building blocks
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {# | |
| # 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. |
NewerOlder