JAST is a boilerplate template for HTML5, it uses CSS3 for styling and jQuery for interactions and complex rendering.
The mark-up is as much as possible semantic, it means that:
JAST uses semantic HTML5 tags & makes a semantic use of classes for CSS3/JS
The aim is to write a light&easy mark-up to obtain some proptotyped objects like:
nav
#jast-main-menu, defines the main menu shown in MOBILE view.
nav
#jast-main-menu, defines the main menu shown in MOBILE view.
Organize your contents in tabs is easy!
Just add the 'jast-tabs' class to the 'article' tag to have TABS.
TABs are section tags nested in an article element, the h2 title renders the tab label, the .jast-tabs class triggers the trasformations.
TabLorem
Tab1
Tabn °1
Tab2
Tab n°2
Tab3
Tab n°3
Organize your contents in slides is easy too!
Just add the 'jast-content-slider' class to the 'article' tag to have sliding contents.
Slides are section tags nested in an article element, the h2 title renders the slide label, the .jast-content-slider class triggers the trasformations.
Slides
Slide1
Slide n°1
Slide2
Slide n°2
Slide3
Slide n°3
The class .jast-gallery triggers the trasformations to a gallery. The mark up is similar to a common content page but with figure instead of section
My gallery
Landscape 1 
Landscape 2 
Landscape 3 
Landscape 4
The class .jast-gallery triggers the trasformations to a gallery. The mark up is similar to a common content page but with figure instead of section
My gallery
Landscape 1 Landscape 2 Landscape 3 Landscape 4
Modal dialogs, uses the 'dialog' tag and tha native HTML5 API, for compatibility uses the Chrome polyfill.
Just set identity between the button ID and the dialog NAME.
Add the class modal to open it in modal way