Skip to content

Instantly share code, notes, and snippets.

Avatar

Mike Zarandona mike-zarandona

View GitHub Profile
@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 / 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>
@mike-zarandona
mike-zarandona / BlurMixin.less
Created Dec 5, 2014
A LESS mixin to apply CSS3 blurs to elements.
View BlurMixin.less
.blur(@blur) {
filter: blur(@blur);
-webkit-filter: blur(@blur);
}
@mike-zarandona
mike-zarandona / RetinaMixin3.less
Last active Aug 29, 2015
Retina LESS Mixin v3 - now makes it super easy to specify one background image to cover three image sizes (@1x|@2x|@3x).
View RetinaMixin3.less
.retina3(@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 / 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>
You can’t perform that action at this time.