File Structure

First of all, let’s analyze the file and folder structure of imagine, 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 imagine
    • bootstrap Imagine 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
    • imagine Imagine stylesheets, required in your website.
      • imagine.css Imagine main stylesheet
    • templates Stylesheets for each available template
      • daydream.css
      • imagine.css
      • misty-woods.css
      • portfolio.css
  • fonts Font files in various formats
  • icon Favicons generated with favicon-generator.org
  • img Image files related to Imagine
    • documentation Images used in the documentation
    • templates Images used inside the templates which you should replace
      • daydream
      • imagine
      • misty-woods
      • portfolio
    • background-1.jpg
    • background-2.jpg
    • background-3.jpg
    • layer-1.jpg
    • layer-2.jpg
  • js Scripts related to imagine
    • 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
      • plugins GSAP plugins pack
        • css.js Animate CSS properties with GSAP
      • tweenlite.js High performance 3D animations script
    • jquery jQuery script
      • jquery.js Easy DOM element interactions
    • nanoscroller Custom scroll script for documentation
      • nanoscroller.js Enable custom scroll for table of contents sidebar
    • prism Syntax highlighting script for documentation
      • prism.js
    • imagine Imagine required scripts
      • imagine.js Imagine main script
    • templates Initialization script for each available template
      • daydream.js
      • imagine.js
      • misty-woods.js
      • portfolio.js
    • vimeo Vimeo API scripts
    • youtube YouTube API scripts
• src Source code for developers
• changelog.md Changelog for every version of imagine
• documentation.html Offline documentation homepage
• daydream.html A beautiful parallax template
• imagine.html Parallax template from imagine's homepage
• misty-woods.html A superb layered parallax vector background
• portfolio.html An impressive portfolio parallax showcase