S

sass-framework

Name Last Update
src/client Loading commit data...
tools Loading commit data...
.editorconfig Loading commit data...
.gitignore Loading commit data...
.htmlhintrc Loading commit data...
.stylelintrc Loading commit data...
LICENSE Loading commit data...
README.md Loading commit data...
bower.json Loading commit data...
gulpfile.ts Loading commit data...
package.json Loading commit data...
tsconfig.json Loading commit data...
tslint.json Loading commit data...
typings.json Loading commit data...
yarn.lock Loading commit data...

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.

Features Tools Used
CSS Sass (Libsass via node-sass), Autoprefixer, CSSNano, Source Maps, Rucksack
JavaScript Folder to keep all your custom Javscript. As well as Gulp tasks to export JS from node modules and/or Bower.
HTML Nunjucks, gulp-data, gulp-prettify
Images Compression with imagemin
Icons Auto-generated SVG Sprites and/or Icon Fonts
Fonts Folder and .sass mixin for including WebFonts
Live Updating BrowserSync
Asset Management Manage and inject css and javascript assets on the html page, through a simple JSON configuration file.
CSS Framework Bootstarp 4
Code Linters HTMLHint, StyleLint

Requirements

Windows 10

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:

  1. Git, GitBash
  2. NodeJS
  3. Python (v2.7 recommended, v3.x.x is not supported)
  4. Visual Studio 2015 - Community Edition
    • Select Custom Install
    • Select Visual C++ in programming languages

Mac OS X

  1. Git (already installed on Mac OS X)
  2. Python (v2.7 recommended, v3.x.x is not supported) (already installed on Mac OS X)
  3. NodeJS
  4. Xcode
    • 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

All Platforms

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

Getting started

Open Terminal window to run following commands:

Clone repository

git clone git@gitlab.netlingshq.com:root/sass-framework.git new-project
cd new-project

Clear out git data

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

npm install

Usage

Run server in development mode:

npm start

Aliases: 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 localhost:3001!

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.

Configuration

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 package.json.

All commands in the package.json scripts work this way. The gulp command runs the default task, defined in tools/tasks/start.ts.

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 tools/tasks.

Asset Task Details

A README.md with details about each asset task are available in their respective folders in the src directory: