File Structure

First of all, let’s analyze the file and folder structure of slidea, what each file does and why we need it. We love being extremely organized, that’s why we’re following the standards for file and folder organization in web applications.

• assets All the assets you should add to your website.
  • css Stylesheets related to slidea
    • bootstrap Slidea works perfectly with any CSS Framework, bootstrap is one of them
      • bootstrap.css Bootstrap main stylesheet
    • documentation Documentation related stylesheets
      • documentation.css Documentation main stylesheet
    • icons Icon stylesheets
      • font-awesome-icons.css FontAwesome icons stylesheet
      • pixeden-stroke-icons.css Pixeden Stroke icons stylesheet
      • material-design-icons.css Material Design icons stylesheet
    • slidea Slidea stylesheets, required in your website.
      • themes Themes for styling slidea's components
        • default.css Slidea default theme
      • ui Slidea custom element classes
        • default.css Slidea default ui styles
      • slidea.css Slidea main stylesheet
    • templates Stylesheets for each available template
      • content.css
      • creative.css
      • dynamic-content.css
      • fitness.css
      • office.css
      • photography.css
      • real-estate.css
      • restaurant.css
  • fonts Font files in various formats
  • icon Favicons generated with favicon-generator.org
  • img Image files related to slidea
    • documentation Images used in the documentation
    • templates Images used inside the templates which you should replace
      • base
      • creative
      • fitness
      • office
      • photography
      • real-estate
      • restaurant
    • slide-1.jpg
    • slide-2.jpg
    • slide-3.jpg
    • layer-1.jpg
    • layer-2.jpg
  • js Scripts related to slidea
    • animus Animus animation parser scripts
      • presets Animus animation presets
        • default.js Default animation presets pack
      • animus.js Script used for the simple animation syntax
    • bootstrap Bootstrap scripts
    • documentation Documentation script
      • documentation.js Documentation initialization script
    • gsap GSAP animation script
      • easing Smoothen animations with different easings
        • easepack.js Predefined easings to use with slidea
      • plugins GSAP plugins pack
        • css.js Animate CSS properties with GSAP
      • tweenlite.js High performance 3D animations script
    • hammer Hammer touch interactions script
      • hammer.js Enable touch interactions for slidea
    • jquery jQuery script
      • jquery.js Easy DOM element interactions
    • mousewheel Mousewheel interaction script
      • mousewheel.js Access mousewheel data
    • nanoscroller Custom scroll script for documentation
      • nanoscroller.js Enable custom scroll for table of contents sidebar
    • prism Syntax highlighting script for documentation
      • prism.js
    • slidea Slidea required scripts
      • slidea.js Slidea main script
    • templates Initialization script for each available template
      • content.js
      • creative.js
      • dynamic-content.js
      • fitness.js
      • office.js
      • photography.js
      • real-estate.js
      • restaurant.js
    • vimeo Vimeo API scripts
    • youtube YouTube API scripts
• src Source code for developers
• changelog.md Changelog for every version of slidea
• documentation.html Offline documentation homepage
• base.html A simple slider template
• creative.html Creative slider template from slidea's homepage
• dynamic-content.html A slider exemplifying slidea's dynamic content methods
• fitness.html A fitness slider template for fitness websites
• office.html A content height driven slider template
• photography.html A beautiful photography slider template
• real-estate.html A classy real estate slider template
• restaurant.html An elegant restaurant slider template