@sunderapps/n4v NPM

n4v - An accessible, responsive navbar library

PS C:\proj> git clone https://github.com/Sunder-Apps/n4v.git ./n4v

PS C:\proj> cd n4v

PS C:\proj\n4v> npm install

PS C:\proj\n4v> npm run serve

Branch from origin/prod.
Name your branch either:
- feature/descriptive-feature-name
- bugfix/descriptive-bugfix-name
Create pull requests with origin/dev when it's ready for testing.
Create pull requests with origin/prod when it's stable.

PS C:\proj\n4v> npm run build

PS C:\proj\n4v> npm run build

PS C:\proj\n4v> npm publish

PS C:\proj\n4v> git add -A
PS C:\proj\n4v> git commit -m "Descriptive commit message"
PS C:\proj\n4v> git push

CSS variables go in /src/scss/css-var.scss and should be included with @use.
Global styles go in /src/scss/global.scss and should be included with @use.
Base styles go in /src/scss/n4v.scss and should be included with @use.
Theme styles go in /src/scss/theme.scss and should be included with @use.
SCSS variables go in /src/scss/var.scss and should be included with @import.
Use the variables, functions, and mixins in /src/scss/var.scss to generate selectors and css variable references with a prefix.
- To use these SCSS helpers, import the file: @import 'var';
- Mixins:
  - @include css-var(height, 50px) → --n4v-height: 50px;
  - @include css-var-ref(width, height) → --n4v-width: var(--n4v-height);
- Functions: - css-var(height) → var(--n4v-height) // NOTE: No string interpolation - #{neg(something)} → not(something) // NOTE: Doesn't add the prefix - #{class(open)} → .n4v-open - #{id(logo)} → #n4v-logo - #{controls(wrapper)} → [controls=n4v-wrapper] - #{expanded(true)} → [aria-expanded=true] - ms(100) → 100ms - px(100) → 100px - strip-unit(100px) → 100

Main functionality goes in /src/ts/n4vbar.ts.
CSS selector tools go in /src/ts/selectors.ts. Should be similar to /src/scss/var.scss.
Variable setting tools go in /src/ts/settings.ts.
Utility functions go in /src/ts/util.ts.
New classes should be:
- Prefixed with 'n4v' and PascalCase after that. E.g. n4vClassName.
- Exported as default in the file that defines them. I.e. export default n4vClassName;.
- Imported and exported in /src/main.ts.
Event functions should be:
- Prefixed with a lowercase 'e'. E.g. eHandleEvent().
- Attached using Function.bind(this).
- Attached using the n4vUtil.throttle() function.
  - The default timeout is n4vSettings.delay.default.
  - The default options are { leading: true, trailing: true }.
- Casted as EventListenerOrEventListenerObject.