# File Structure

A guide to understanding how Jumpstart is structured.

###

Page Templates

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

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](http://jumpstart.mediumra.re/documentation/).

###

Assets

📁 `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 / CSS

📁 `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. Jumpstart version 2.0.0 ships with Bootstrap 4.3.1. This will be updated as further Bootstrap versions are released.
- `custom` - contains the theme overrides made by Medium Rare for Jumpstart and some plugin CSS.
- `theme.scss` - compiles bootstrap SCSS with Jumpstart 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 Jumpstart values. This prevents the need to edit core theme files which aids updates.

###

JS

📁 `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. Jumpstart version 2.0.0 ships with Bootstrap 4.3.1. This will be updated as further Bootstrap versions are released.
- `mrare` - contains custom plugins and additional scripts required by Jumpstart.

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