Skip to content

Instantly share code, notes, and snippets.

Avatar

Mike Zarandona mike-zarandona

36 followers · 4 following · 58
View GitHub Profile
@mike-zarandona
mike-zarandona / TicketPunch.less
Last active Dec 20, 2015
The .ticket-punch() mix-in allows for very easy creation of "punchouts" on the left and right side of an element using :before and :after pseudo-elements.
View TicketPunch.less
.ticket(@size: 11px, @bgColor: #fff, @borderStyle: solid, @borderWidth: 1px, @borderColor: #333) {
position: relative;
border: @borderStyle @borderWidth @borderColor;
text-align: center;
padding: 10px 20px;
display: inline-block;
&:before {
position: absolute;
content: '';
width: @size;
@mike-zarandona
mike-zarandona / RetinaMixin.less
Created Oct 23, 2013
Retina LESS Mixin. Makes it super easy to specify one background image to cover both standard and retina views.
View RetinaMixin.less
.retina(@bg-image, @size: cover, @file-type: 'png'){
background-image: url('@{path}@{bg-image}.@{file-type}');
background-size: @size;
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){
background-image: url('@{path}@{bg-image}@2x.@{file-type}');
background-size: @size;
@mike-zarandona
mike-zarandona / PHP Cache Buster
Created Jan 13, 2014
Adding this bit of PHP to the end of a stylesheet or script incorporation will dynamically append the UTC time to the URL - making it "unique" on every load. EXTREMELY helpful for clients who might not know how to clear their browser cache.
View PHP Cache Buster
<link rel="stylesheet" type="text/css" href="path/to/stylesheet.css?r=<?php echo time(); ?>" />
<script type="text/javascript" href="path/to/javascript.js?r=<?php echo time(); ?>"></script>
@mike-zarandona
mike-zarandona / Inline-Block Columns
Created Aug 28, 2014
Pretty un-floated columns.
View Inline-Block Columns
// columns
[class*="col-"] {
display: inline-block;
margin: 0 4% 0 -4px;
.box-sizing;
vertical-align: top;
&[class*="-left"] {
width: 68%;
text-align: center;
@mike-zarandona
mike-zarandona / "Responsive" Google Ads
Last active Aug 29, 2015
Fake-out responsive Google Ads. Works by showing one and hiding another at a particular breakpoint without using `display: none` which breaks the ads.
View "Responsive" Google Ads
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Large Banner -->
<ins class="adsbygoogle adblock_1 large"
style="display:block;width:728px;height:90px"
data-ad-client="ca-pub-0000000000000000"
data-ad-slot="0000000000"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
@mike-zarandona
mike-zarandona / Weather Data + Icons from Yahoo.html
Last active Jan 8, 2016
Weather icon output parameter functions. `weatherData()` will fetch data from Yahoo's servers for a particular geography, and `weatherOutput()` handles parsing the data and writing the results to the DOM. Relies on the Yahoo Weather API and Weather Icons by Erik Flowers https://developer.yahoo.com/weather/ http://erikflowers.github.io/weather-ic…
View Weather Data + Icons from Yahoo.html
<head>
<!-- Yahoo Weather Data -->
<script>
var yqlCallback = function(data) {
var extractedData = data.query.results.channel.item;
weatherData = extractedData;
},
weatherData;
</script>
@mike-zarandona
mike-zarandona / Statamic-Admin-iOS-Install-as-WebApp
Created Oct 12, 2014
Two `<meta/>` tags and a `<script/>` tag to allow iOS users to use the "Add to Home Screen" function in Mobile Safari. This is convenient in maximizing screen real estate when composing in `/admin`. This is a modification to `/admin/themes/ascent/layouts/default.php`
View Statamic-Admin-iOS-Install-as-WebApp
<?php
$current_user = Auth::getCurrentMember();
$name = $current_user->get('name');
?><!doctype html>
<html lang="<?php echo Config::getCurrentLanguage(); ?>">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<title>Statamic Control Panel</title>
<link rel="stylesheet" href="<?php echo Path::tidy(Config::getSiteRoot().'/'.$app->config['theme_path']) ?>css/ascent.min.css">
@mike-zarandona
mike-zarandona / getURLParameter.js
Last active Aug 29, 2015
Function to check for and return the values of URL parameters.
View getURLParameter.js
// Get URL parameters
function getURLParameter(name) {
name = name.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)",
regex = new RegExp( regexS ),
results = regex.exec( window.location.href )
;
if( results === null ) {
@mike-zarandona
mike-zarandona / Strip Off Any Protocol from a URL.js
Created Oct 15, 2014
A tiny bit of logic to strip off any protocol from a URL.
View Strip Off Any Protocol from a URL.js
// strip off the protocol
url = 'http://twitter.com/mikezarandona';
if ( url.indexOf('://') != -1 ) {
url = url.substr( url.indexOf('://') + 3 );
}
@mike-zarandona
mike-zarandona / BX-Slider Logo Ticker.html
Created Oct 16, 2014
Responsive ticker-style display drop-in using BX-Slider (http://bxslider.com/).
View BX-Slider Logo Ticker.html
<section class="logos-bar">
<div class="width-container">
<ul class="logos">
<li>
<div><a href="javascript:void(0)"><img src="path/to/logo.png" alt="thumbnail logo" /></div></a>
</li>
<li>
<div><a href="javascript:void(0)"><img src="path/to/logo.png" alt="thumbnail logo" /></div></a>
</li>
<li>