File structure

HTML

HTML file structure is pretty straightforward. Easy HTML file represents sets of user interface elements. Don’t forget that many elements are combinable.

CSS

There are a few CSS files which serves specific purposes. All of them you will find in css folder. If you are new to Twitter Bootstrap, we strongly recommend to take a look at it first.

  • /css/font - All fonts for icons
  • /css/plugins - CSS styles for 3rd party and jQuery plugins
  • /../css/sangoma-color.css - Compiled LESS into CSS for each color set

LESS

Template and Bootstrap are written with LESS. Best thing about LESS is that it allows you easily and very fast modify template style. See the settings.less for settings and variables.

  • /less/bootstrap - Original Bootstrap LESS files
  • /less/custom - Template LESS files, mixins and settings
  • /less/demo-styles.less - Live preview styles, you can remove it
  • /less/settings.less - Settings and variables for Bootstrap and Sangoma
  • /less/sangoma.less - Template styles
  • /less/style.less - Main constructor file

Javascript

There are three different flavours of javascript files located under js folder.

If you are new to some of these plugins, you should visit their homepages for explanation how they work or for more configuration options. List of all used plugins can be found under the Plugin topic.

  • /js/libs/modernizr.js - Web browser feature detection Javascript library including HTML5 enabler for older web browsers.
  • /js/libs/selectivizr.js - JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in IE 6-8.
  • /js/libs/jquery.js - jQuery library fallback if CDN is not available
  • /js/libs/jquery-ui.js - Custom jQuery UI build
  • /js/boostrap - Original Twitter Bootstrap javascript plugins
  • /js/plugins - Custom 3rd party plugins for jQuery

PSD

There is a template PSD file available in PSD folder for prototyping and wireframing.