Stitch Wireframe Prototype

This is based off my basic HTML starter project with Sass and Gulp.js

Notes & Highlights

1. Built with a BEM philosophy to scale with helper classes used as seen fit for sizing, spacing, layout and overall appearance
2. SVG's used to display data as a level that can scale
3. Semantic markup that is accessible with tabbed navigation and follows guidelines created by Schema.org
4. Progessively enhanceed elements utilizing HTML5 data attribute such a the select field with visually comparable and usable fallback and responsive table layouts
5. Filterable table rows (still in progress)

Project Languages

1. HTML5
2. Sass
3. jQuery

Project Utilities (Optional)

1. Bootstrap Framework (Grid Only): A free and open-source front-end web framework for building responsive, mobile-first websites and web applications. (Utilized container setup but no grid used to date)
2. Eric Meyers reset and Normalize.css: Makes browsers render all elements more consistently and in line with modern standards.
3. Modernizer: A collection of superfast tests – or “detects” as we like to call them – which run as your web page loads, then you can use the results to tailor the experience to the user. (Fallback to be done in debugging)
4. TweenMax by Greensock: Built for convenience, TweenMax provides a single JavaScript file that contains everything you will commonly need for animating DOM elements. (Omitted)
5. SVG for Everybody: SVG for Everybody adds external spritemaps support to otherwise SVG-capable browsers.

Working with Gulp.js

1. Dependencies Node.js and npm

npm is distributed with Node.js- which means that when you download Node.js, you automatically get npm installed on your computer.

2. Check that you have node and npm installed by running node -v and npm -v in your terminal
3. If the commant is not found install them using the links above and if it doesn't work in your project's folder, try installing them globally using your sudo commant

Gulp Core Files

1. gulp.js
2. package.js
3. Node_modules (not created until gulp is installed by following below)

Gulp Usage

1. To install you position yourself in the project folder by traversing via terminal using the cd command and install using npm by running the command below:
   $ npm install

2. To initially process javascript, sass and any gulp tasks found in the gulp.js file by running the command below:
   $ gulp

3. To watch javascript, sass and any gulp tasks found in the gulp.js file by running the command below:
   $ gulp watch

4. To add SVG’s to spritemap, drop any svg into the /src/svg folder. The name of the svg will become the id of the svg.
   

Make any changes such as fill="currentColor" to the svg inside of the /src/svg folder and Gulp will process.

Gulp Task File Structure:

1. JavaScript
   /src/lib/*.js -> /js/lib -- Any standalone JavaScript file. Usually for polyfills or large libraries independent of the projects unique scripts.
   /src/plugins/*.js -> /js/plugins.js -- All files get concat, and minified into one plugins.js
   /src/partials/*.js -> /js/scripts.js` -- All files get concat, and minified into one scripts.js
   

2. CSS
   /src/css/* -> /css/style.css -- All files get concat into one style.css
   /src/css/base
/src/css/components
/src/css/utilitiesstyle.scss
   

3. SVG
   /src/svg/*.svg -> /img/spritemap.svg
   

Include SVG’s using via the code below:

<svg>
      <use xlink:href="PATH/img/spritemap.svg#FILE-NAME"></use>
<svg>

The FILE-NAME above should not include .svg at the end of it just as it is above.

Ignored from this repository are the following

• *~
• *.keep
• .DS_Store
• .sass-cache
• _assets
• node_modules
• bkp
• bkp/
• bkp/*
• css/config.rb
• scss/.sass-cache
• scss/.sass-cache/*