#Template for Tyson Steele

This template is designed to get you started building a single page promotional website for Tyson Steele and Associates. It includes several resources including external resources (Canvas HTML5 Template, Bootstrap, jQuery), a suite of development, build, and deployment tools using Gulp, useful scss mixins, and documentation.

• Dependencies
• Getting Started
  • Usage
• Resources
• Canvas
  • Live Canvas Version 4.3
  • Canvas Documentation
• Quality Assurance
• Scss
  • Scss Documentation
  • Scss Best Practices
• JS
  • Custom Scripts
  • JS Documentation
• Deployment
• DNS through Name Cheap
• Troubleshooting

• Node.js
• Yarn (or npm if you prefer)

All the tools you need to set up a working development environment including compiling and watches on files is handled by Node.js and Yarn (or if you prefer, npm).

yarn install
yarn start

Compile resources, open site and documentation, start watches:

yarn start

Compile all resources including scss:

yarn run compile

Build production version of site:

yarn run build

Here is a list of useful links to documentation pertaining to various components that are used through out these sites, as well as links to articles on best practices, documention for development tools, and links for hosting draft versions of the site.

• Bootstrap - Included with Canvas, great for laying out content and handling things such as modals, buttons, and the navbar
• Canvas Documentation - Canvas Documentation
• Canvas Template - A live version of the current Canvas Template
• Css/Scss Best Practices - A useful guide for best practices when working with style sheets
• documenationJS - Generates live documentation of javascript based on inline comments
• flexSlider - Used for most of the marquee sliders
• Font Awesome Icons - Included with Canvas and used for many icons
• Google Maps API - Documentation for working with the javascript API for Gooogle Maps
• Javascript Best Practices - Thoughts on best practices for writing javascript
• Name Cheap - DNS service for the delivering drafts to Tyson Steele
• Owl Carousel - Used for most carousels
• Sassdoc - Generates live documentation of stylesheets based on inline comments
• Webfaction - The hosting services for delivering drafts to Tyson Steele
• Html Validation - Validator for html errors

Canvas is an additional html frontend framework the client has asked us to use. It includes several javascript libraries (Flex Slider, Owl Carousel, etc). This is the base style that the designers at Tyson Steele will be using and we are expected to be able to implement any of the componenets that are featured in Canvas.

Click here for a live version of Canvas 4.3. On ocassion Tyson Steele will request that we reference a specific example page of Canvas. All example pages can be found at the above URL. For example, one-page.html can be reached at http://canvas.hwdevs.site/one-page.html.

Canvas's Documentation can be found here. ##Quality Assurance Delivering a professional quality product in a timely manner is of utmost importance. To that end, every site built for Tyson Steele by Hello World Devs goes through an internal Quality Assurance process before delivery of the site. This process must be done by a developer who was not the main developer for the site. The QA list can be found here. In addition to the above checklist...

1. Run the html through an HTML validator
2. Please test all of our sites on Safari as well as Chrome, Firefox and Edge
3. Also, please - even if you don’t have a large screen/high-res monitor available, create an inspector size for the ultra-wide low-res laptop (sizes to 1366 x 650px) and make another one at 1920 x 950px for those people that think that a 1080p monitor is to be used by expanding the browser window to fit. These sizes are important add-ons to discover issues with positioning of elements at all sizes. For instance, have a look at this screenshot showing the 1366 x 650px size with the new Sharon Strong website. We’ll have to move up the headline, tighten it up as needed, in order to show the whole reviews button and not cut things off.

Sass/Scss documentation is automatically generated during development by Sassdoc. See sassdoc docs at ./sassdoc (at http://localhost:3002/sassdoc after yarn start) Add more sassdoc annotations like /// @param by seeing docs here. A number of scss mixins have been created to handle common styling tasks. A full list of these mixins can be found in the Sassdoc documentation. Using these mixins will improve both development time and quality. Build Sassdocs:

yarn run compile:sassdoc

Here are some basic best practices to strive for when working with this template.

• Use as few selectors as possible
• Inception rule: no more than 3 'levels' nesting
• Avoid generic selectors (ex. div div)
• Avoid descendants, nth-child, siblings, etc
• Avoid ID’s, use classes as much as possible
• Stick to one naming convention
• Design responsively around Bootstrap's breakpoints
• Avoid setting exact heights, allow the content to dictate height

Commonly used custom scripts are contained in the HelloWorldDevsTysonSteele object and are included with this template. These scripts handle a wide range of tasks including the request appointment API, management of orphans in the text, and customization of carousels, sliders, videos, and other interactive elements. For example:

HelloWorldDevsTysonSteele.marqueeCarousel();

This script will initialize the marquee slider standard to all the sites we build with default configurations (speed, looping, etc) that match the clients preferences. The carousel can still be fully customized by passing in standard configuration options for each given javascript components. For example:

HelloWorldDevsTysonSteele.marqueeCarousel({ autoplay: false });

Javascript documentation is handled by DocumentationJS. See documenationJS docs at ./jsdoc (at http://localhost:3002/jsdoc after yarn start) Add more jsdoc annotations like /** @param */ by seeing docs here. Build JSdocs:

yarn run build:jsdoc

These sites are hosted through Webfaction. The deployment scripts are not currently complete, but will take care of configuring the webfaction server for you.

yarn run deploy

*Note:*Deployment requires ./siteConfig.py. See ./example.siteConfig.py for instructions on setting up this file. To finish deployment:

1. Ssh into the webfaction server as dan linn
2. cd webapps/projectName_app
3. Clone the project with this directory as the root (git clone url .)
4. npm install
5. npm run build

DNS for this project is handled through Name Cheap

1. Log into Name Cheap as Dan Linn
2. Domains > hwdevs.site > "Manage"
3. Advanced DNS > "Add new record"
   • Type: A Record
   • Host: site name (the last name of the doctor, lowercase)
   • Value: 198.58.114.22
   • TTL: automatic Note: It may take up to 24 hours for DNS to propogate and for the site to go live.

Delete node_modules and re-install:

rm -rf node_modules
yarn install