ENgrid Installation Instructions

Prerequisites

1. Install NPM: https://blog.teamtreehouse.com/install-node-js-npm-mac
   • Install with XCode: https://itunes.apple.com/us/app/xcode/id497799835?mt=12
   • Install with Homebrew via Terminal: ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
   • Install with Terminal: brew install node

Create a new theme and set up local development

1. Clone the ENGrid repository to your computer after optionally creating a branch or fork of it.
2. Open Terminal and navigate to the cloned repository.
   • In your terminal type npm install to install the third-party dependencies for the project.
3. Duplicate the Starter Theme folder "src > theme > starter"
4. Rename the duplicated folder. e.g YOURPROJECTNAME
5. Update package.json "client": "WHATEVERISHERE" with YOURPROJECTNAME
6. Run npm run start to begin live compiling and watch tasks.
   • You can now open http://localhost:8080/ to see the local instance of the project running.
   • If you are using Visual Studio Code you will see an "NPM Scripts" panel in the explorer. From there you can click "Start" which runs the npm run start processes.
7. Change anything you want. The assets will get recompiled every time you save.
8. When you finish, type CTRL+C on the terminal to exit the watch task.
9. When you are finished run npm run build to begin build process. This will generate minified assets; a single dist/main.css and dist/main.js file you can add to your Engaging Networks page template.
   • If you are using Visual Studio Code you will see an "NPM Scripts" panel in the explorer. From there you can click "Build" which runs the npm run build processes.
10. Commit & Push your changes to your repository.
11. Update your live Engaging Networks page templates with the minified main.css and main.js assets.

Customize your theme's branding

1. Adjust the colors on src/themes/YOURPROJECT/sass/variables.scss
2. Adjust the fonts on src/themes/YOURPROJECT/sass/font.scss
3. Adjust the branding on src/themes/YOURPROJECT/sass/branding.scss

Add new page layouts to your theme

1. Create your new file in src/themes/YOURPROJECT/sass/layouts/YOURLAYOUT.scss
2. Import your layout SASS file in src/themes/YOURPROJECT/sass/main.scss after the very last line