Multi-Device+ SASS Framework
Multi-Device+ SASS Framework is a delicious blend of tasks and build tools poured into Gulp to form a full-featured modern asset pipeline. It can be used as-is as a static site builder, or can be configured and integrated into your own development environment and site or app structure.
|CSS||Sass (Libsass via node-sass), Autoprefixer, CSSNano, Source Maps, Rucksack|
|HTML||Nunjucks, gulp-data, gulp-prettify|
|Images||Compression with imagemin|
|Icons||Auto-generated SVG Sprites and/or Icon Fonts|
|CSS Framework||Bootstarp 4|
|Code Linters||HTMLHint, StyleLint|
Make sure following tool are installed already in your system, or you can download the installers from the links provided and run a basic setup:
- Git, GitBash
- Python (v2.7 recommended, v3.x.x is not supported)
- Make sure to select, Add Paython.exe in the PATH during setup.
- Visual Studio 2015 - Community Edition
- Select Custom Install
- Select Visual C++ in programming languages
Mac OS X
- Git (already installed on Mac OS X)
- Python (v2.7 recommended, v3.x.x is not supported) (already installed on Mac OS X)
- You also need to install the Command Line Tools via Xcode. You can find this under the menu Xcode -> Preferences -> Downloads. This step will install gcc and the related toolchain containing make
Install global dependencies with following command through your terminal window once all above tools are installed.
npm install --global gulp-cli && npm install --global typings && npm install --global typescript
Open Terminal window to run following commands:
git clone email@example.com:root/sass-framework.git new-project cd new-project
If you plan on using this framework to start a new project, be sure and clear out the
git data to start a fresh history:
rm -rf .git && git init git add --all git commit -m "Initialized with Multi Device+ SASS Framework"
Install node dependencies
Run server in development mode:
npm run gulp
This is where the magic happens. The perfect front-end workflow. This runs the default gulp task, which starts compiling, watching, and live updating all our files as we change them. BrowserSync will start a server on port 3000, or do whatever you've configured it to do. You'll be able to see live changes in all connected browsers. Don't forget about the additional BrowserSync tools available on port 3001!
All files will compile in development mode (uncompressed with source maps). BrowserSync will serve up files to
localhost:3000 and will stream live changes to the code and assets to all connected browsers. Don't forget about the additional BrowserSync tools available on
Build files in development mode:
npm run build
This will just compile the files in development mode in source folder to specified distribution folder. This will not run a live server.
Why run this as an npm script? NPM scripts add ./node_modules/bin to the path when run, using the packages version installed with this project, rather than a globally installed ones. Never
npm install -g and get into mis-matched version issues again. These scripts are defined in the
scripts property of
All commands in the package.json
scripts work this way. The
gulp command runs the
default task, defined in
Directory and top level settings are conveniently exposed in
tools/config.ts. Use this file to update paths to match the directory structure of your project, and to adjust task options.
Not all configuration is exposed here. For advanced task configuration, you can always edit the tasks themselves in
Asset Task Details
README.md with details about each asset task are available in their respective folders in the