documentation

Introduction

markup

Indented, double-spaced markup

Basic Space is a HTML template build on the Skeleton grid system. It naturally responds to screen resolutions making it ideal for designing for tablet and mobile devices. It uses HTML5/CSS3 techniques for animation and fade effects, these fallback gracefully if using an older browser.

Customization

Homepage vertical scroll slideshow

This slideshow by default only displays on the homepage but you can add it to any page you want (see markup and copy). The slideshow itself uses jQuery Cycle to display the images, and you have complete control over the desired effect. These include fade, horizontal sliding and zooming. The smaller component slideshow on the homepage also uses jQuery Cycle

Lightbox

Basic Space uses jQuery Lightbox plugin which is an easy to use, and easy to customize, tool. See the website or simply view the markup on the homepage for information.

Accordion

The accordion uses jQuery UI and is very simple to use. You define which element is the container for the accordion and then seperate the items by divs. View the components page for markup.

Google Maps

Basic Space uses two Google maps; one in the footer and one on the contact page. The images are generated using the Google Maps API. This is achieved by passing some values to a URI which will generate the map image for you - in our example we simply pass the central location, the latitude and longitude, and where the marker is to be placed. For more information see the API website.

Browser Support

Basic Space has been tried and tested in the following browsers:

  • Internet Explorer 7+
  • Mozilla Firefox
  • Google Chrome
  • Opera
  • Major mobile/table browsers (Android, iPhone, iPad)

404 Page

There is a very basic 404 error page included. This is to ensure it doesn't get forgotten, like it so often does, in the build procress.

Responsive Design

As the theme is built on Skeleton, the responsive layout comes into play almost automatically as long as you follow the markup requirements when modifying the template (which is easy to follow). The only thing to bear in mind is that you need to maintain two menus - the list of menu items (.main-menu) and the mobile menu (.mobile-menu). When changing the mobile menu the page link is defined by the option value. For example value="index.html" links to the homepage and so on.

Help & Support

Free support is available by visiting www.webbymatt.co.uk (if support is unavailable here, email matt [at] webbymatt [dot] co [dot] uk).