This post is part of the series ‘Making ubuntu.com responsive‘.
core.js which contains a number of functions called on when required.
Below I will discuss some of the functions and workarounds we have provided in the web style guide.
When considering our transition from PNGs to SVGs across the site, we provided a fallback for background images with Modernizr and reset the background image with the
.no-svg class on the
The snippet above checks if Modernizr exists in the namespace. It then interrogates the Modernizr object for SVG support. If the browser does not support SVGs we loop through each image with
.svg contained in the
src and replace the
src with the same path and filename but a
.png version. This means all SVGs need to have a PNG version at the same location.
Navigation and fallback
:target as a pure CSS solution, but this selector isn’t supported in Internet Explorer 7, which represented a fair chunk of our visitors.
The navigation on ubuntu.com, in small screens.
As part of the guidelines project we needed a way of setting a number of elements to the same height. We would love to use the
This function finds all elements with an
.equal-height class. We then look for child
lis and measure the tallest one. Then set all these children to the highest value.
Using combined YUI
One of the obstacles discovered when working on this project was that YUI will load modules from an
http (non secure) domain as the library requires. This of course causes issues on any site that is hosted on a secure domain. We definitely didn’t want to restrict the use of the web style guide to non secure sites, therefore we need combine all required modules into a combined YUI file.
To combine your own YUI visit YUI configurator. Add the modules you require and copy the code from the Output Console panel into your own hosted file.
Read the next post in this series: “Making ubuntu.com responsive: testing on multiple devices”