Framework css/js
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.
To start using Framway, clone the repo or download the package and unzip it. Then read the What’s included section below.
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.
git clone https://github.com/webexmachina/framway
cd framway
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.
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
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.
Code and documentation copyright 2018 Web ex Machina. Code released under the Apache 2.0 License.