Framway

Framway is a bundle of tools used to build fast and consistent website guidelines. It features for its main part a large and customizable css classes toolbox, which can be used to build various web components.

It is mainly based on Bootstrap syntaxes, and act mostly as an overlay of it.

Table of contents

• Quick start
• What's included?
• Dependencies
• Copyright and license

Quick start

To start using Framway, clone the repo or download the package and unzip it. Then read the What's included section below.

Development & customisation

The project is powered by webpack so you'll need npm to install the dependencies and run the project. Your changes has to be made in the src and vendor folders, those will be compiled into the build one.

Get the project

git clone https://github.com/webexmachina/framway
cd framway

Install dependencies and run

npm install
npm run watch

The npm script watch will launch webpack in watch mode, which compile the files when changes has been made. You can use the index.html file in the build folder to watch and test out your changes.

What's included

Within the download archive you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

framway/
├── build/
│   ├── css/
│   │   ├── framway.css
│   │   └── vendor.css
│   ├── js/
│   │   ├── framway.js
│   │   └── vendor.js
│   ├── img/
│   └── index.html
├── src/
│   ├── components/
│   ├── img/
│   ├── js/
│   ├── scss/
│   ├── index.html
│   └── index.js
├── vendor/
│   └── index.js
├── package.json
└── webpack.config.js

The css and js files provided in the build folder are compiled and minified files that you can use in your project.

Note: vendor and framway files are splitted to allow faster building in development process and better cache management in production environement. This can be changed by modifying the webpack.config.js file, as well as the splitting between css and js type files

Dependencies

The following dependencies are by default installed and wrapped in the index.js file in the vendor folder, then compiled into the build one. If you won't use webpack to bundle your assets and prefer importing then manually, don't add the vendor files from the build folder to your project.

• Bootstrap. Framway acts as an overlay of Bootstrap and that's why it's considered as a dependency. Anyway, you can totally get rid of it and use the framway on its own, despite we don't recommend it.

• Font Awesome. Same as Bootstrap. Not mandatory, but recommended because it's awesome.

• Toastr. Used to display clean and simple notifications. (can be disabled in framway's configuration)

• jQuery. Framway uses javascript and jQuery to run some of its components, as well as core features.

Copyright and license

Code and documentation copyright 2018 Web ex Machina. Code released under the Apache 2.0 License.