File structure

Discover what’s included in Purpose Design System, including our precompiled and source code flavors. Remember, Purpose’s Javascript plugins require jQuery.

Precompiled Purpose

purpose-website-ui-kit/
├── assets/
  ├── css/
  │   ├── purpose.css
  │   ├── purpose.css.map
  │   ├── purpose.min.css
  │   ├── purpose.min.css.map
  └── img/
  │   ├── backgrounds/
  │   ├── brand/
  │   ├── clients/
  │   ├── icons/
  │   ├── svg/
  │   ├── theme/
  └── js/
  │   ├── purpose-core.js
  │   └── purpose-core.min.js
  │   ├── purpose.js
  │   └── purpose.min.js
  └── libs/
      ├── bootstrap/
      ├── jquery/
      ├── ...
├── resources/
  ├── js/
  │   ├── components/
  │   ├──├── charts/
  │   ├──├── custom/
  │   ├──├── init/
  │   ├──├── maps/
  │   ├──├── libs/
  └── scss/
  │   ├── purpose/
  │   ├──├── animations/
  │   ├──├── components/
  │   ├──├── mixins/
  │   ├──├── utilities/
  │   ├──├── libs/
  │   ├──├── _variables.scss
  │   ├── skins/
  │   ├── custom/
  │   ├──├── _variables.scss
  │   ├──├── _fonts.scss
  │   ├──├── styles.scss
  │   ├── purpose.scss
├── pages/
  ├── account/
  │   ├── account-billing.html
  │   ├── account-connections.html
  │   ├── ...
  ├── authentication/
  │   ├── basic-login.html
  │   ├── basic-register.html
  │   ├── ...
  ├── landing/
  │   ├── agency.html
  │   ├── app.html
  │   ├── ...
  ├── secondary/
  │   ├── about-classic.html
  │   ├── about.html
  │   ├── ...
  ├── shop/
  │   ├── shop-landing.html
  │   ├── shop-products.html
  │   ├── ...
  ├── utility/
  │   ├── coming-soon.html
  │   ├── error-404.html
  │   ├── ...
├── sections/
  ├── headers/
  ├── footers/
  ├── features/
├── docs/

This is the most basic form of Purpose: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (purpose.*), as well as compiled and minified CSS and JS (purpose.min.*). source maps (purpose.*.map) are available for use with certain browsers’ developer tools.

CSS files

Purpose comes with both minified and expanded versions of CSS. It already includes the latest version of Bootstrap - v4.3.1.

JS files

Purpose comes with both minified and expanded versions of JS. It includes the bundled version purpose-core.js that contains jQuery, Bootstrap and a few other important files that are required in the entire theme. These are compiled automatically when running the Laravel Mix or Gulp commands.

The bundled scripts are:

purpose-website-ui-kit/
├── assets/
  ├── libs/
  │   ├── bootstrap/dist/js/bootstrap.bundle.min.js
  │   ├── in-view/dist/in-view.min.js
  │   ├── sticky-kit/dist/sticky-kit.min.js
  │   ├── svg-injector/dist/svg-injector.min.js
  └── ├── imagesloaded/imagesloaded.pkgd.min.js

Optionally, you can add them separately in the scripts section before any other scripts, especially purpose.js or purpose.min.js.

<script src="/assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/assets/libs/in-view/dist/in-view.min.js"></script>
<script src="/assets/libs/sticky-kit/dist/sticky-kit.min.js"></script>
<script src="/assets/libs/svg-injector/dist/svg-injector.min.js"></script>
<script src="/assets/libs/imagesloaded/imagesloaded.pkgd.min.js"></script>

Source files

The Purpose’s source code download includes the precompiled JavaScript assets, along with Sass source. More specifically, it includes the following and more:

purpose-website-ui-kit/
├── resources/
│   ├── scss/
│   └── js/
│   └── ├── components/

If you want to make use of Purpose uncompiled resources make sure you install and use our Build Tools to compile and minify CSS and JavaScript for production. Click here to learn more about how to use NPM, Gulp or Laravel Mix and other useful tools in order to compile CSS and JavaScript.