RAPTORFrame

Rapid Adaptive Practical Tricked-Out Rocket Framework, or RAPTORFrame, is a light and modular framework which assists in rapidly developing modern frontend projects. The Sass (SCSS) boilerplate, also known as RAPTORSMACSS, is loosely based on the SMACSS architecture pattern.

Contents

• Usage
• Riding the Raptor
• ToDos
• Team
• License
• Connect

Usage

Requirements

• Node 5.0.0+
• NPM 3.0.0+
• Gulp 3.9.0+
• Gulp-CLI 1.1.0+

Installation

1. Create a new project directory
2. Move the source/ directory, along with the gulpfile.js and package.json files from the RAPTORFrame/ directory, into the root directory of your project (DO NOT transfer the hidden .git/ directory)
3. Optionally, repeat the last step with the .eslintignore hidden file (the custom scripts should make this unnecessary though)
4. Within the project root directory, run npm install to setup the development environment

Commands

Command	Task
npm run raptor	build the entire frame and root, watch all of the source files
npm run raptor -- build	build the entire frame and root
npm run raptor -- watch	watch all of the source files
npm run raptor -- floor	build the root files to the project root
npm run raptor -- smash	build the stylesheets and javascripts
npm run raptor -- glyph	build additional glyphs (eot, svg, ttf, woff, and woff2 files)
npm run raptor -- image	build and optimize the images (gif, ico, jpeg, jpg, png, svg, tif, and tiff files)
npm run raptor -- other	build the assets files
npm run launch	Starts a local server and opens the base file in a browser
npm run lint-js	Lints the sourcejavascripts with eslint

ToDos

• Write thorough documentation, including the following...
  • source/root/ directory
    • Transfer made to frame/
    • Edit the hidden files
    • Subfolders will not transfer
    • Instructional README.md file
  • source/glyphs/ directory
    • Transfer made to frame/glyphs/
    • Only eot, svg, ttf, woff, and woff2 files will transfer
    • Subfolders will not transfer
  • source/images/ directory
    • Transfer made to frame/images/
    • Only gif, ico, jpeg, jpg, png, svg, tif, and tiff files will transfer
    • Subfolders will transfer, for modularity
  • source/javascripts/ directory
    • All concatenated and uglified to frame/javascripts/raptor.js
    • How and where to add JavaScript files
    • What each file and subfolder does
    • Subfolders will not transfer
  • source/media/ directory
    • Transfer made to frame/media/
    • Only aac, avi, m4a, mid, mov, mp3, mp4, ogg, ogv, swf, vtt, wav, webm, wma, and wmv files will transfer
    • Subfolders will transfer, for modularity
  • source/stylesheets/ directory
    • All compiled and minified to frame/stylesheets/raptor.css
    • How and where to add SCSS files
    • What each file and subfolder does
    • Subfolders will not transfer
  • source/views/ directory
    • Transfer made to frame/
    • Subfolders will transfer, for modularity
• Add the following...
  • Linters
    • scss-lint
    • csslint (maybe...)
    • Some for views
    • Some for markup languages (maybe...)
• Create the following...
  • View files
    • 404.html (maybe...)
    • 422.html (maybe...)
    • 500.html (maybe...)
  • SCSS files
    • A @font-face mixin for glyphs (maybe...)
  • Images
    • RAPTORFrame logo – .png and/or svg
    • RAPTORFrame og:image – .jpg or .png
    • New rapticon-16x16.ico and new rapticon-16x16.png
    • apple-touch-icon.jpg or apple-touch-icon.png
  • Lib directories
    • CSS libraries, non-compiled (maybe...)
    • JavaScript libraries, non-compiled (maybe...)

---

Team

The humans responsible and technology colophon.

• Ali Esmaili(Developer & Designer): AESM
• Molly Allison-Baker(Consultant): hermitina
• Allan Enemark(Consultant): exactlyAllan

License

This project is copyright © 2015-2016 Ali Esmaili | SuitAndCape. It is free software that may be redistributed under the terms specified in the LICENSE.

This is based on The MIT License (MIT). For more information, visit the Open Source Initiative website.

Connect

🎩	🚀
SuitAndCape GitHub	https://github.com/SuitAndCape
Personal GitHub	https://github.com/AESM
Website	http://SuitAndCape.github.io/
LinkedIn	https://www.linkedin.com/in/SuitAndCape
Twitter	https://twitter.com/SuitAndCape