RED SCSS SCROLLS - the README

This is a NodeJS HTML5 app compiled and built upon Brunch.io's action packed package.

A horizontal-scrolling UI with stylesheets compiled with Sass/SCSS and syntax influenced by sass-lint. And of course, a GUI that borrows some of the R from RGB. ♦️♦️

What the project does

This project is intended as an example of my coding styles, best practices and graphic design sense, as well as general UX- 'what am I even looking at?'

---

Areas of Discipline

Technical:

1. HTML5
2. CSS3 - compiled from Sass/SCSS
3. Javascript - ECMAScript 2015 (ES6)
4. jQuery 3.3
5. NodeJS => NPM with Brunch.io - Code compiling, linting, watching, minifing, and optimizing.

Creative:

1. Graphic Design - elegant and simplistic GUI
2. Interactive Design - scrolling transitions and animations
3. User Experience - works beautifully, feels good
4. Web-fonts - community sourced typography
   • Shkoder 1986 - Edgy triangular 1980s style typeface authored by Julian and Ana 💕
   • Heebo Thin - nice light-weight font with 🔡bonus: Paleo Hebrew alphabet characters and symbols. Font provided by edenberger 👍 with inspiration provided by the Dead Sea Squirrels... -err i mean - Scrolls :squirrel:

Live Demo (coming soon to a URL near you)

Using the built code in the 'public' dir, I will host a static demo site. Coming Soon! - (:date:013018)

How you can get started with the project's code

First things first, the public directory is the stand-alone and static portion of the project and you can jump into that without dealing with any installations, compilations, or complications such as project/package dependencies. 🔰

Installing Requirements & Dependencies

• System Requirements:
  • Node.js + NPM Node's Package Manager: brew install node on OSX if you have homebrew -or you can use Yum on Linux. Among other ways.
  • Brunch.io for epic out-of-the-box features and plugins including a Sass compiler: npm install -g brunch
• Project Dependencies: from within the project directory, install plugins and app dependencies listed in package.json: npm install

Building, Compiling, and 🏃 the code

• Run:
  • npm start — watches the code with automatic rebuild. This will also launch the NodeJS HTTP localhost server with HTML5's History pushState.
  • brunch watch --server — same as command 'npm start'
  • npm run build — builds minified project in ./public dir for free-spirit static site.

---

Brunch.io Features

• jQuery3
• Compilation of ECMAScript 2015 (ECMAScript 6) files with Babel
• Uglification and concatenation of Javascript files with UglifyJS
• Extending CSS with Sass and sass-lint
• Autoprefixing, concatenation, minification (and more) of CSS files with Pleeease (PostCSS)
• Auto reload of development server port:3333
• ESLint with Standard Javascript Style Guide
• Ready to format your code with Prettier
• index.html with essential meta tags for SEO and Social Media

Syntax References

• Syntax and formatting for an .MD file from Github Documentation: GitHub basic-writing-and-formatting-syntax or Bitbucket's Markdown guide
• Sass-lint config & rules: Sample sass-lint.yml & Rules Documentation
• Emojii codes from: Complete list of github markdown emoji markup
• Art with character ASCII Art generator