Purpose Website UI Kit

Contents

What’s great about is that you have everything you need in one place. It is very simple and easy to understand. All styles, images, javascript and other third-party plugins are stored within the assets folder, while the page templates are stored within the pages folder.

Page templates

pages is where all HTML pages are stored. Use any of these to start building your website. Everything is exactly as see in the live preview.

Each page is named after its purpose so it can be easy for you to find the one you need. You can open it directly in your browser or your favorite editor to modify its contents.

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. Below we will explain more in detail what each one does.

Sass

assets/scss contains all of raw source files that are used to create the final CSS that is included in the theme. The Sass is structured in three 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.

purpose

Contains all the theme’s files. They are used to customized 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 responsable for spacing, fonts, colors and other quick modifier classes that can be used within our theme.
• vendor contains all the third party libraries that were customized for this specific theme only.
• theme.scss unifies all the components, utilities and mixins - bootstrap, purpose and user - that are compiled in a single file that will be used as a stylesheet within our theme.

user

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.

Css

assets/css contains the minified and uncompressed CSS resulted from the SCSS files, including Bootstrap.

• theme.css
• theme.min.css

Js

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

• bootstrap contains all the javascript files included in the official Bootstrap package (4.1.3). We will update it as long as Bootstrap releases new versions.
• theme.js contains all the custom plugins and additional scripts included in .
• theme.min.js is the minified version of theme.js that should be included in your website.

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.