Before downloading, be sure to have a code editor (we recommend Sublime Text 2 or Notepad++) and some working knowledge of HTML and CSS.

Download source

Download the World Vision Australia base template. This is a foundation to develop any World Vision website content. It includes header, footer, navigation and a sample content page.

Download WVA base template

File structure

Within the download you'll find the following directories and files.

Once downloaded, unzip the compressed folder to see the structure of the WVA base template. You'll see something like this:

wva-base-template/
 ├── css/
        ├── site-specific.css
 ├── js/
        ├── site-specific.js
 ├── footer.php
 ├── head.php
 ├── index.php
 └── navbar.php

This is the foundation for all WVA web content builds. There are a couple of things you may notice.

First, the only CSS and JS you will find is a blank site-specific. This is because all of the JS and CSS required for the styleguide is referenced directly off the WVA styleguide server. This keeps your work on brand and allows us to do global updates when necessary!

You will also notice the header, footer and navigation have been templated and called into the index as an include. This has been done for aesthetic purposes only and is the only reason these files are in PHP format. So if you need to build in ASP, HTML or any other language, feel free to change how this content is called in!

WVA's styleguide is based on Twitter Bootstrap and comes equipped with HTML, CSS, and JS for all sorts of things. They have been summarised and sorted into a handful of categories that can be accessed in the menu navigation.

Development guide

Base CSS

Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes Font Awesome, a great little icon set.

Components

Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.

JavaScript plugins

Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.

Content & brand guides

See the Online content guide and the Brand & design guide for information on how to develop your online content and branded visuals in line with World Vision's style.

Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older browsers might display differently styled, though fully functional, renderings of certain components.

Supported browsers

Specifically, we support the latest versions of the following browsers and platforms. On Windows, we support Internet Explorer 8-11. More specific support information is provided below.

Unofficially, WVA styleguide should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, though they are not officially supported.

Internet Explorer 8 and 9

Internet Explorer 8 and 9 are also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported by these browsers. In addition, Internet Explorer 8 does not include any responsive functionality.

Visit Can I use... for details on browser support of CSS3 and HTML5 features.

Windows Phone 8 and Internet Explorer 10

Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, you can optionally include the following CSS and JavaScript to work around this problem until Microsoft issues a fix.

@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement("style")
  msViewportStyle.appendChild(
    document.createTextNode(
      "@-ms-viewport{width:auto!important}"
    )
  )
  document.getElementsByTagName("head")[0].appendChild(msViewportStyle)
}

For more information and usage guidelines, read Windows Phone 8 and Device-Width.

Safari percent rounding

As of Safari v6.1 for OS X and Safari for iOS v7.0.1, Safari's rendering engine has some little trouble with the long decimal places of our .col-*-1 grid classes, meaning if you have 12 individual columns you'll notice they come up short compared to other rows of columns. There's not much we can do here (see #9282) but you do have some options:

• Add .pull-right to your last grid column to get the hard-right alignment
• Tweak your percentages manually to get the perfect rounding for Safari (more difficult than the first option)

We'll keep an eye on this though and update our code if we have an easy solution.

Modals, navbars and virtual keyboards

Overflow and scrolling

Support for overflow: hidden on the <body> element is quite limited in iOS and Android. To that end, when you scroll past the top or bottom of a modal in either of those devices' browsers, the <body> content will begin to scroll.

Virtual keyboards

Also, note that if you're using inputs in your modal or navbar, iOS has a rendering bug that doesn't update the position of fixed elements when the virtual keyboard is triggered. A few workarounds for this include transforming your elements to position: absolute or invoking a timer on focus to try to correct the positioning manually. This is not handled by Bootstrap, so it is up to you to decide which solution is best for your application.

Navbar Dropdowns

The .dropdown-backdrop element isn't used on iOS in the nav because of the complexity of z-indexing. Thus, to close dropdowns in navbars, you must directly click the dropdown element (or any other element which will fire a click event in iOS).

Android stock browser

Out of the box, Android 4.1 (and even some newer releases apparently) ship with the Browser app as the default web browser of choice (as opposed to Chrome). Unfortunately, the Browser app has lots of bugs and inconsistencies with CSS in general.

Also, on <select> elements, the Android stock browser will not display the side controls if there is a border-radius and/or border applied. Use the snippet of code below to remove the offending CSS and render the <select> as an unstyled element on the Android stock browser. The user agent sniffing avoids interference with Chrome, Safari, and Mozilla browsers.

<script>
var nua = navigator.userAgent
var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
if (isAndroid) {
  $('select.form-control').removeClass('form-control').css('width', '100%')
}
</script>

# href's in plugins

As part of the WVA styleguide we have implemented a feature that makes all anchors scroll smoothly to their destination instead of the default jumping. This function picks up any anchor with a # in its href attribute as well as anchors in the url.

Some javascript plugins use #Hashtag href's to fire certian functions within the plugin, these functions will not work in conjunction with our styleguide. Most plugins will have alternate ways of evoking these functions, usually through a data attribute. For example bootstraps carousel and collapse plugins have data-target as an alternative to using a href anchor, which we have used to overcome this issue.

You will not run into this issue using our default plugins, but this is something to be aware of if you decide to use a 3rd party plugin, or write your own for a project.

WVA styleguide follows common web standards, and with minimal extra effort, can be used to create sites that are accessibile to those using AT.

Skip navigation

If your navigation contains many links and comes before the main content in the DOM, add a Skip to content link immediately after your opening <body> tag. (read why)

<body>
  <a href="#content" class="sr-only">Skip to content</a>
  <div class="container" id="content">
    The main page content.
  </div>
</body>

Nested headers

Another "gotcha" has to do with how you nest your <header> elements. Section 508 states that your largest header must be an h1, and the next header must be an <h2>, etc. This is hard to achieve in practice, but if the largest header on your site is smaller than Bootstrap's default 38px, you should consider modifying your stylesheets before using a smaller header element.

Additional resources

• "HTML Codesniffer" bookmarklet for identifying accessibility issues
• The A11Y Project
• MDN accessibility documentation