Posted on

Retina Display Media Query

CategoriesCSS, Development, Front End

Using cross browser retina/high resolution media queries for icons (on hover, focus, before/after pseudo elements):

// Retina
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {

   .spritesheet,
    #faqs-accordion button.accordion h3::after {
        content: '' !important;
	background-image: url(../images/yorkregion_spritesheet@2x.png) !important;
	background-size: 800px !important;
    }
    #faqs-accordion button.button-bg:after {
        content: '' !important;
        background: url(../images/menu-items-bg@2x.png) no-repeat !important;
        background-size: 50px 52px !important;
        width: 50px !important;
        height: 52px !important;        
    }
    #faqs-accordion button.accordion:hover:after,
    #faqs-accordion button.accordion:focus:after {
        content: '' !important;
        background: url(../images/menu-items-bg-dark@2x.png) no-repeat !important;
        background-size: 50px 52px !important;
        width: 50px !important;
        height: 52px !important;
    }    
}
Posted on

Custom Scrollbar (Always Showing)

CategoriesCSS, Development, Front End

Note: can be applied to general page
Note 2: If applied to specific element/container a position absolute may be necessary
CSS

p.customClass {
  overflow-y: scroll;
}

p.customClass::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
}

p.customClass::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: rgba(98, 93, 78, 0.75);
  border: 2px solid #eee;
}

p.customClass::-webkit-scrollbar-corner {
  background-color: transparent;
}
Posted on

Add responsive full width video on background

CategoriesCSS, Development, Front End

HTML

CSS

#homepage-video {
	&.embed-responsive {
		position: relative;
		display: block;
		height: 0;
		padding: 0;
		overflow: hidden;
	}
	&.embed-responsive .embed-responsive-item,
	&.embed-responsive iframe,
	&.embed-responsive embed,
	&.embed-responsive object,
	&.embed-responsive video {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}
	&.embed-responsive-16by9 {
		padding-bottom: 35%;
	}
	&.embed-responsive-4by3 {
		padding-bottom: 55%;
	}
}
Posted on

Auto Tel Link (a tag In The Current Version of Framework)

CategoriesDevelopment, Front End, jQuery / JavaScript

EXAMPLE

HTML

19054567890

JS

jQuery(function($) {
  $(document).ready(function() {
    $(".tel").each(function () {
	var href = "";
	href = $(this).attr("href");
	if (href == "" || href == null) {
		href = $(this).text();
		href = href.replace(/\s+/g, '');
		href = href.replace(/[{()}]/g, '');
		href = href.replace(/-/g, '');
		href = href.replace(/\./g, '');
	}
	if (href.indexOf("tel") < 0) {
		$(this).attr("href", ("tel:" + href));
	}
	});

  });
});

CSS

a, .a {
  text-decoration: none;
  border-bottom: 1px solid #f28f2d;
  //replace #f28f2d with colour of choice
  -moz-transition: 0.5s opacity ease, 0.25s color ease, 0.5s background-image ease, 0.25s background-color ease, 0.5s border-color ease;
  -webkit-transition: 0.5s opacity ease, 0.25s color ease, 0.5s background-image ease, 0.25s background-color ease, 0.5s border-color ease;
  transition: 0.5s opacity ease, 0.25s color ease, 0.5s background-image ease, 0.25s background-color ease, 0.5s border-color ease;
}

a:hover, a:focus, .a:hover, .a:focus {
  color: #f28f2d;
}
Posted on

Link Style (a tag) Default Setup

CategoriesCSS, Development, Front End

EXAMPLE

HTML

Link item style

CSS

a, .a {
  text-decoration: none;
  border-bottom: 1px solid #f28f2d;
  //replace #f28f2d with colour of choice
  -moz-transition: 0.5s opacity ease, 0.25s color ease, 0.5s background-image ease, 0.25s background-color ease, 0.5s border-color ease;
  -webkit-transition: 0.5s opacity ease, 0.25s color ease, 0.5s background-image ease, 0.25s background-color ease, 0.5s border-color ease;
  transition: 0.5s opacity ease, 0.25s color ease, 0.5s background-image ease, 0.25s background-color ease, 0.5s border-color ease;
}
a:hover, a:focus, .a:hover, .a:focus {
  color: #f28f2d;
}
Posted on

Custom Fancybox CSS Style

CategoriesCSS, Development, Front End

EXAMPLE
Here is an example implementation of fancy box on the Albany Pump website.

CSS File

body {  
  // fancybox skin style
  .fancybox-skin {
  	// -webkit-box-shadow:none;
  	// -moz-box-shadow: none;
  	// box-shadow:none;
  	// background:none;
  }

  // close button
  .fancybox-close {
  	// background: url(../images/IMAGE-NAME.png) no-repeat;
  	// background-size: 20px 20px;
  	// top: -40px;
  }
  .fancybox-close:hover, .fancybox-close:focus {
  }

  // fancybox caption text area
  .fancybox-text {
  }

  // fancybox next control button
  .fancybox-next span {
  }
  .fancybox-next span:hover, .fancybox-next span:focus {
  }

  // fancybox previous control button
  .fancybox-prev span {
  }
  .fancybox-prev span:hover, .fancybox-prev span:focus {
  }

  .fancybox-title.fancybox-title-float-wrap {
  	span {
  	}
  	> .child {
  	// border-radius: 0px;
  	// background-color: rgba(0,112,60,0.85);
  	// white-space: normal;
  	// text-shadow: none;
  	}
  }
}
Posted on

jQuery Window Resize

CategoriesDevelopment, Front End, jQuery / JavaScript
    var $window = jQuery(window);

    function checkWidth() {
        var windowsize = $window.width();
        if (windowsize > 1400) {            
            jQuery("#first-tab").click(function() {
           	//do something
            });
        } else {
            jQuery("#first-tab").click(function() {
		//do something
            });
        }
    }

    // Execute on load
    checkWidth();

    // Bind event listener
    jQuery(window).bind('resize', checkWidth);