n4v - An accessible, responsive navbar library

Hosting

• www.n4v.bar
• NPM - @sunderapps/n4v/
• GitHub - Sunder-Apps/n4v/

Development

Getting Started

1. Install 7NodeJS and 8NPM here.
2. Install 15git here or 18GitHub Desktop here.
3. Clone the 16GitHub repository.

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

4. Change directory into the n4v project

PS C:\proj> cd n4v

5. Install development dependencies.

PS C:\proj\n4v> npm install

6. Run the development server.

PS C:\proj\n4v> npm run serve

7. Visit http://localhost:42069/ in a browser.

Operations

Branching

• 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.

Publishing

• Publish from origin/prod.
• Ensure the version number has been updated in package.json.
• Set isDev to false in webpack.config.ts and save.
• Build prod:

PS C:\proj\n4v> npm run build

• Set isDev to true in webpack.config.ts and save.
• Build dev:

PS C:\proj\n4v> npm run build

• Publish to 8NPM.

PS C:\proj\n4v> npm publish

• Commit the new dist files and package.json.

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

Guidelines

General

• File names should be lowercase (besides README, LICENSE, etc.)

SCSS

• 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

TypeScript

• 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.

Usage

Getting Started

Vanilla HTML / CSS / JavaScript

HTML / SCSS / JavaScript with WebPack

HTML / SCSS / TypeScript

Angular / SCSS / TypeScript

References

The Basics:

• 1HTML
• 2CSS
• 3JavaScript

Advanced:

• 4SCSS
• 5TypeScript
• 6PowerShell
• 7NodeJS

Build Tools:

• 8NPM
• 9WebPack
• 10Babel

Testing:

• 11Jasmine
• 12Karma

Organization:

• 13TSDoc
• 14ESLint

Version Control:

• 15git
• 16GitHub

Software:

• 17VS Code
• 18GitHub Desktop
• 19Discord