HGF

Frontend on Umbraco website for HGF, global intellectual property rights specialists.

The majority of templates for HGF consist of being able to drop component ‘widgets’ into the main body content via the CMS. As the design showed these widgets as being full width, I had to use JavaScript to set the width of each widget to the size of the viewport, then offset the position to the left.

For the full width ‘people carousel’ widget, I also had to determine whether to adjust it’s width based on if the right sidebar was present.

When developing the responsive elements to the site, I didn’t use set ‘breakpoints’, but rather checked each template individually, creating media queries when the design stopped working.

On the homepage, the latest news section uses the jQuery Isotope plugin to layout each news item. When the viewport size is reduced down to 825px wide I disable the isotope, and stack the items up vertically. Rather than hardcoding this number into the JS, upon browser resize I’m checking for a CSS property set by a media query. So in this case I’m seeing if the ‘section-carousel’ element has a display: none; set. To prevent it constantly destroying/initialising isotope, I'm also checking to see if the first 'tile' element has the 'isotope-item' class that get's applied by the plugin

if($('body').hasClass('homepage')) {
    $(window).resize(function() {
        if ($('.section-carousel').css('display') == "none" && $('.tile').first().hasClass('isotope-item') ){
            $container.isotope('destroy');
        } else if($('.section-carousel').css('display') == "block" && !$('.tile').first().hasClass('isotope-item')) {
            $container.isotope(opt);
        }
    });
}