File Structure

📁 pages is the source for html pages and contains the example HTML templates supplied with Insight.

Contained in pages is a precompiled static site, equivalent to what you see in the online demo.

Pages are named according to their purpose, and you can open any of the files in your browser to see it in action, or modify the markup to suit your needs.

As this is the source for html pages, Gulp copies all .html files from pages to dist/pages during development.

This documentation is also housed in pages to share the theme's assets, but the documentation files are not required in your projects, and you may move or make another copy of them elsewhere. These docs are also available online.

📁 pages/assets contains all of the assets referenced in the html pages.

Precompiled versions of the required JS and CSS are supplied in their respective folders to support the self-contained 'static site'. During development, Gulp will compile bootstrap.js, theme.js and theme.css to dist/pages/assets when running the dev server.

Any images, css, fonts or videos used in the theme are contained in pages/assets.

• CSS which is not compiled into theme.css should be stored in pages/assets/css.
• Plugin javascript that is not compiled into bootstrap.js or theme.js should be stored in pages/assets/js.
• Images used in html pages should be stored in pages/assets/img.
• Fonts used in html pages should be stored in pages/assets/fonts.
• Videos used in html pages should be stored in pages/assets/video.

📁 scss contains the source for all bootstrap and theme css. You will see the following in scss:

• bootstrap - contains the full scss source for the version of bootstrap shipped with the theme. Insight version 1.0.1 ships with Bootstrap 4.1.3. This will be updated as further Bootstrap versions are released.
• custom - contains the theme overrides made by Medium Rare for Insight and some plugin CSS.
• theme.scss - compiles bootstrap SCSS with Insight overrides into one CSS file.
• user.scss - a place for you to add your own custom CSS rules to keep them separate from the core theme files, which aids updating.
• user-variables.scss - a place for you to add your own custom SCSS variables to override the Bootstrap and Insight values. This prevents the need to edit core theme files which aids updates.

📁 js contains the source for all bootstrap and theme javascript. You will see the following in js:

• bootstrap - contains the full javascript source for the version of bootstrap shipped with the theme. Insight version 1.0.1 ships with Bootstrap 4.1.3. This will be updated as further Bootstrap versions are released.
• mrare - contains custom plugins and additional scripts required by Insight.

Bootstrap javascript is compiled into bootstrap.js. Insight-specific scripts are compiled into theme.js.