Spyre Spyre

File Structure

Take a look at what's included with Spyre, such as our precompiled and source code. Remember, Bootstrap's JavaScript plugins require jQuery.

Download

The downloaded Spyre package contains four main assets/, docs/, pages/ and src/ folders. Once downloaded, unzip the compressed folder and you'll see something like this:

HTML

pages/ the source for HTML pages and contains the HTML templates shown in the online demo. Each page is named for its use making it easy to find the one you need. The HTML files can be opened in any browser, imported to any project or modified to suit your needs.

Assets

assets/ contains all of the assets that will be used in the html pages, from CSS and JS to images and third party plugins.

Precompiled versions of JavaScript and CSS files are generated in their respective assets/js/ and assets/css folders to support the self-contained 'static website'.

Css

assets/css contains the generated, uncompressed theme.css file resulted from the SCSS files, including Bootstrap.

Js

assets/js contains the generated, uncompressed theme.js file resulted from the JS files.

Vendor

assets/vendor contains all the third party plugins used in the entire project. You can see what we used in the dedicated page for plugins.

Images

assets/img contains all images used in this theme, backgrounds, icons and more.

Source

src/ contains all of the raw source files that are used to create the final Css, Js and Vendor files that are included in the theme.

Js

src/js contains the theme.js file which includes all the custom plugins and additional scripts.

Sass

src/scss contains all of the raw source files that are used to create the final Css. The Sass is structured in four main folders:

bootstrap

Contains all the source files included in the official Bootstrap package (4.1.3). This way, you will use a single unified stylesheet that contains all styles. We will update it as long as Bootstrap releases new versions. Do not modify any of these files in order to benefit of future updates.

spyre

Contains all the theme's files. They are used to customize and extend Bootstrap's components. Do not modify any of these files in order to benefit of future updates. The theme's folder is structured as follows:

  • mixins/ contains overriden or new mixins used for grouping CSS declarations for reuse throughout our theme.
  • utilities/ contains all the source files responsible for spacing, fonts, colors and other quick modifier classes that can be used within our theme.
  • theme.scss unifies all the components, utilities and mixins - bootstrap, spyre, vendor and custom - that are compiled in a single file that will be used as a stylesheet within our theme.
vendor

Contains all the third party libraries that were customized for this specific theme only.

custom

Is the place where we included the files needed for custom and new files that will serve the user in order to add new classes or modify existing ones.

Dist

dist/ contains all the html files in pages folder, all assets files along with the minified versions of theme.css and theme.js files.

  • theme.css file inside the dist/assets/css/ folder is the minified version of theme.css, with the same name.
  • theme.js file inside the dist/assets/js/ folder is the minified version of theme.css, with the same name.