SAS>> Red-Scss-Scrolls>> 返回
项目作者： erikhatfield

项目描述 ：
A red web page that scrolls with Javascript and CSS transitions compiled from SCSS.
高级语言： JavaScript
项目地址: git://github.com/erikhatfield/Red-Scss-Scrolls.git
创建时间： 2018-01-31T00:48:06Z
项目社区：https://github.com/erikhatfield/Red-Scss-Scrolls
开源协议：MIT License
下载


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. :diamonds::diamonds:

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 :two_hearts:
    • Heebo Thin - nice light-weight font with :abcd:bonus: Paleo Hebrew alphabet characters and symbols. Font provided by edenberger :thumbsup: 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. :beginner:

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 :running: 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