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
/ 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
/ 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> |
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
/ "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
/ 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
/ 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
/ 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
/ 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
/ 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> |
OlderNewer