Overview of the project, its contents, and how to get started with a simple template.
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 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.
Within the download you'll find the following file structure and contents.
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
├── fonts/
├── FontAwesome.otf
├── fontawesome-webfont.eot
├── fontawesome-webfont.ttf
├── fontawesome-webfont.woff
├── gill_stitch-webfont.eot
├── gill_stitch-webfont.svg
├── gill_stitch-webfont.ttf
└── gill_stitch-webfont.woff
├── footer.php
├── head.php
├── index.php
└── navbar.php
This is the foundation for all WVA web content builds. There are a few 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!
Second, you will notice that our web fonts have been included, and are referenced in your site-specific.css. This is due to firefox not allowing cross browser referencing with font-face.
Lastly, you will 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.
Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.
Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes Font Awesome, a great little icon set.
Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.
Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.
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.
With a brief intro of the content out of the way, it's time to put the WVA styleguide to use!
Head to the docs for information, examples, and code snippets
Visit the Bootstrap docs