Posted on

Horizontal full width menu

CategoriesCSS, Development, Front End

Add a horizontal menu displaying on the full container width.

HTML and WordPress menu function:

CSS code:

ul#horizontal-menu-list {
	display: table;
	width: 100%;
	padding: 60px 0;
	margin-left: 0;
}
ul#horizontal-menu-list li {
	display: table-cell;
}
ul#horizontal-menu-list li:first-child a {
	text-align: left;
}
ul#horizontal-menu-list a {
	display: block;
	border: 0;
	text-align: center;
	margin: 0 5px;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: #777;
}
Posted on

Set the same boxes height on page

CategoriesCSS, Development, Front End

Set the same boxes height on a page on load and on resize. Check the maximum bucket height and set all buckets the same max height.

var $window = jQuery(window);
function bucket_boxed_height() {
        var bucket_boxed = $('.bucket-box');
        var Max_bucket_height = 0;
        var windowsize = $window.width();
        if (windowsize > 991) {
            bucket_boxed.each(function( index ) {
                $( this ).removeAttr('style');
                if (Max_bucket_height < $( this ).innerHeight()) {
                    Max_bucket_height = $( this ).innerHeight();
                }
                console.log('innerHeight = ' + innerHeight);
            });
            bucket_boxed.each(function( index ) {
                $( this ).innerHeight(Max_bucket_height);
            });
        }
        else {
            bucket_boxed.each(function( index ) {
                $( this ).removeAttr('style');
            });
        }
}

bucket_boxed_height();

// Bind event listener
jQuery(window).bind('resize', bucket_boxed_height);
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

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;
  	}
  }
}