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 / test_media_queries_in_js.css
Last active August 29, 2015 14:05
Test CSS media query breakpoints in JS. Inspired by what I found here: http://adactio.com/journal/5429/
/* This is what I use near the top of my CSS stylesheet */
/* Mobile first! (767px and below) */
body:after {
display: none;
content: 'phone';
}
/* Small Devices, Tablets (kicks in at 768px) */
@media only screen and (min-width : 768px) {
@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>
@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 / 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 / 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 / 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 / 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 / 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 / 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 / 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;`
///////////////////////////////////////////////////////////////*/