# OmniUpdate Framework

Omni Framework is starting point for all iFactory OU projects.

## Node/Gulp Setup

[Node.js](https://nodejs.org) is required for development of this theme.

OU Framework uses [Gulp.js](https://gulpjs.com/) to automate the build
workflow.

### Configuration

1. Install Gulp and all required modules:
We have gulp-cli installed globally, so it's not included in this project

`npm install -g gulp-cli`
`npm install`

2. Copy `default.gulpconf.js` to `gulpconf.js` and update for your local
environment and preferred settings. All custom Gulp configuration should
live inside of this file.

3. Run `gulp`. The gulp watch task should run. Verify that the CSS and JS tasks complete by editing a js and scss file, and verifying in the commandline window that the tasks start and finish.

### Setting up Local Development Site with Lando 

There is a lando file in the site root. Update the name value to be relevent to project. 


### Default tasks

By default Gulp comes configured with the following tasks:

#### images

- Minimize and optimize theme images
- You must have libpng installed for `imagemin-mozjpeg` to work

#### css

- Pre-process CSS for development

#### js

- Pre-process JS for development

#### watch

- Run build tasks for development including BrowserSync

#### default

- Runs watch task


## Structure of this framework

### php

This site uses php, full pages can be found in the /keyscreens/ folder, and individual components can be found in /_inc/. These components are imported into the keyscreen files as reusable components

### CSS/SCSS

Source SCSS/ files are divided into folders, see the README in each folder for what files belong where. 
All SCSS files are imported into the main.scss file, which is compiled into the main.css file.

### JS

/data is used for storing demo json files for any components requiring ajax./object is where all custom JS goes, broken down by component. All objects are then imported into the main.js file, with their init functions called there. See existing files for examples.

Third-party js is imported into the appropiate component js file(s) from their npm module.

There are also 3 utilities in the util folder:
- scroll-trigger - For scroll triggered animations, add a class to an element when that element is scrolled to. Selector should be added to the selectors variable in that file to apply this to elements
- last-word - Wraps the last word of an element's text content in a span. A use case is using span:after to add an arrow, and using whiite-space: nowrap on the span to prevent it from wrapping.
- focus-triggers-scroll - to be used with scroll-trigger, see the desc in the file.