Skip to content

Instantly share code, notes, and snippets.

View bootsified's full-sized avatar
🤓

Boots Highland bootsified

🤓
3 followers · 4 following
View GitHub Profile
@bootsified
bootsified / easings.css
Created August 31, 2020 17:42 — forked from argyleink/easings.css
Handy CSS properties for easing functions
:root {
--ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
--ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
--ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
--ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
--ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
@bootsified
bootsified / easings.scss
Created June 12, 2019 21:40
Basic CSS animation easings, inspired by the legendary Robert Penner (http://robertpenner.com/easing/).
/*///////////////////////////////////////////////////////////////
EASINGS
SCSS variables to set custom easings for CSS animations.
Usage:
`transition: transform 500ms $easeInOutCubic;`
///////////////////////////////////////////////////////////////*/
@bootsified
bootsified / isIEorEDGE.js
Last active August 7, 2018 20:27
Dirty browser sniffing for IE and Edge that you should never use... unless you're nasty.
function isIEorEDGE() {
return navigator.appName == 'Microsoft Internet Explorer' || (navigator.appName == "Netscape" && (navigator.appVersion.indexOf('Edge') > -1 || navigator.appVersion.indexOf('Trident') > -1));
// return true;
}
@bootsified
bootsified / rainbow-gradient.css
Last active July 24, 2018 16:21
CSS rainbow gradient
background-image: linear-gradient(319deg, red 20%, yellow 40%, blue 60%, violet 80%);
@bootsified
bootsified / current-week-dates.twig
Last active January 4, 2022 20:06
Get current week's range of dates (Craft/Twig)
{# CALCULATE THIS WEEK'S DATES #}
{% set todayNum = 'now' | date('w') %}
{% set startDate = 'now' | date_modify('-' ~ todayNum ~ ' day') %}
{% set endDate = startDate | date_modify('+6 day') %}
{% set endDateFormatted = '-' ~ endDate | date('j') %}
{% if startDate | date('M') != endDate | date('M') %}
{% set endDateFormatted = ' - ' ~ endDate | date('M j') %}
{% endif %}
<p>The Week of {{ startDate | date('M j') }}{{ endDateFormatted }}</p>
@bootsified
bootsified / widont.liquid
Last active April 1, 2019 13:52
A 'widont' filter Shopify (liquid)
{{ page.content | strip_html | split:'' | reverse | join:'' | replace_first: ' ', ';psbn&' | split:'' | reverse | join:'' }}
@bootsified
bootsified / scrollToAnchor.js
Last active June 12, 2019 21:25
Assign links to scroll to content within page.
/*///////////////////////////////////////////////////////////////
SCROLL TO ANCHOR
Using your site's onLoad function, initialize the script:
`ScrollToAnchor.init();`
Any link with a hash href (e.g. '#myElement') will scroll the page
to the link position. To disable the scrolling for a link, give it
the 'no-scroll' class:
`<a href="#myElement" class="no-scroll">Click me</a>`
@bootsified
bootsified / selectordie.scss
Last active February 12, 2016 18:09
The Select or Die (http://vst.mn/selectordie/) CSS converted to Sass.
/* ===========================================================
*
* Name: selectordie.css
* Updated: 2014-10-10
* Created by: Per V @ Vst.mn
* What?: Base CSS for Select or Die
*
* Copyright (c) 2014 Per Vestman
* Dual licensed under the MIT and GPL licenses.
*
@bootsified
bootsified / google-get-directions-link.html
Created December 2, 2014 17:14
Text link to Google Maps "Get Directions" page, with focus initially set for empty starting address field.
@bootsified
bootsified / google_map_multiple_markers_geocoding.html
Last active April 5, 2021 12:57
Google Map with multiple markers - Geocoded addresses, unique InfoWindows, and automatic zoom and centering to show all markers. Working demo here: https://codepen.io/bootsified/details/XWbgwNr
<!--
* GOOGLE MAP W/ MULTIPLE MARKERS AND OPTIONAL GEOCODING
* by Boots (www.boots.media)
* Working demo here: https://codepen.io/bootsified/details/XWbgwNr
*
* To use geocoding for locations, set `useGeocoding = true;` (limit 10 locations).
* To manually place markers by lat/lng, set `useGeocoding = false;` (no limit). Locations array must contain lat/lng data.
-->
<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR_APP_KEY_GOES_HERE]"></script>