HTML & SCSS COMPONENTS LIBRARY

Installation

1. npm i wp-ig-components-test-2/wp-ig-components

2. Make sure that you have scss base, colors, mixins folders in your project with the required files

Components

1. Sliding From Two Sides

Overlay is initially hidden and is shown when the modifier --open is added with JS

Starter Function to animate the overlay: Coppy the starter function and adjust to your needs

'/node_modules/wp-ig-components-test-2/wp-ig-components/js/components/overlays/overlay__sliding_from_two_sides-AND-_sliding_from_top_to_bottom';

Import scss:

@import './path/to/file/../node_modules/wp-ig-components-test-2/wp-ig-components/scss/components/overlays/overlay__sliding-from-two-sides/overlay__sliding-from-two-sides';

This overlay is only displayed when the specified breakpoint is reached

@import './path/to/file/../node_modules/wp-ig-components-test-2/wp-ig-components/scss/components/overlays/overlay__sliding-from-two-sides/overlay__sliding-from-two-sides--on-breakpoint';

2. Sliding From Top to bottom

Overlay is initially hidden and is shown when the modifier --open is added with JS

Starter Function to animate the overlay: Coppy the starter function and adjust to your needs

'/node_modules/wp-ig-components-test-2/wp-ig-components/js/components/overlays/overlay__sliding_from_two_sides-AND-_sliding_from_top_to_bottom';

@import './path/to/file/../node_modules/wp-ig-components-test-2/wp-ig-components/scss/components/overlays/overlay__sliding-from-top-to-bottom/overlay__sliding-from-top-to-bottom';

This overlay is only displayed when the specified breakpoint is reached

@import './path/to/file/../node_modules/wp-ig-components-test-2/wp-ig-components/scss/components/overlays/overlay__sliding-from-top-to-bottom/overlay__sliding-from-top-to-bottom--on-breakpoint';

1. General Hamburger Button

@import './path/to/file/../node_modules/wp-ig-components-test-2/wp-ig-components/scss/components/buttons/btn-hamburger/btn-hamburger__general';

Starter Function to animate the button:

'/node_modules/wp-ig-components-test-2/wp-ig-components/js/global/buttons/btn-hamburger__general';

Coppy the starter function and adjust to your needs

2. Hamburger Button Turns into an Arrow with a Ring Around

@import './path/to/file/../node_modules/wp-ig-components-test-2/wp-ig-components/scss/components/buttons/btn-hamburger/btn-hamburger__arrow-and-ring';

Arrow can point both left and right. Deffault behaviour is pointing left. To reverse arrow, add class 'btn-hamburger__arrow-and-ring--reverse' to 'a' tag

Starter Function to animate the button:

'/node_modules/wp-ig-components-test-2/wp-ig-components/js/global/buttons/btn-hamburger__arrow-and-ring.js';

By default, function only animates the button, hovever you can pass the class name that is responsible for opening the navigation, if that is what this button is used for.

Templates

Navbars

Current navbars awailable:

$navbar_name = 'snttbc';
$navbar_name = 'snttb';

Impport appropriate SCSS file:

@import './path/to/file/../node_modules/wp-ig-components-test-2/wp-ig-components/scss/components/navbars/nav-v1-snttb/snttb'
@import './path/to/file/../node_modules/wp-ig-components-test-2/wp-ig-components/scss/components/navbars/nav-v1-snttb/snttbc'

Copy and paste your customization file:

 './custom/snttb-custom';
 './custom/snttbc-custom';

Change the customization file any way you please to style your navbar.

Copy php template file to your template-parts:

'./path/to/file/../node_modules/wp-ig-components-test-2/wp-ig-components/php/navbars/templates/nav-v1-snttb/snttb-all.php'

Set the $navbar_name to the desired navbar, corresponding with the scss file name.

Copy walker class to your inc:

'./path/to/file/../node_modules/wp-ig-components-test-2/wp-ig-components/php/navbars/walkers/nav-v1-snttb/snttb-walker-all.php'

Set the $navbar_name to the desired navbar, corresponding with the scss file name.

Require walker in your functions.php:

require_once get_template_directory() . '/inc/walkers/nav-v1-snttb/snttb-walker-all.php';

Import JS files:

import { registerSNTTBNavbarFunctions } from './path/to/file/../node_modules/wp-ig-components-test-2/wp-ig-components/js/navbars/nav-v1-snttb/snttb-all'

registerSNTTBNavbarFunctions arguments:

navName - your chosen navbar name

dropdownOnClickOnly - true or false, if chosen true, dropdown opens only on click, not hover

breakpoint - specify the main breakpoint of the navbar (corresponding to $navbar-breakpoint-main variable in base.scss)

Current navbars awailable:

$navbar_name = 'ofts';
$navbar_name = 'oftsc';

Impport appropriate SCSS file:

@import './path/to/file/../node_modules/wp-ig-components-test-2/wp-ig-components/scss/components/navbars/nav-v2-ofts/ofts'
@import './path/to/file/../node_modules/wp-ig-components-test-2/wp-ig-components/scss/components/navbars/nav-v2-ofts/oftsc'

Copy and paste your customization file:

 './custom/ofts-custom';
 './custom/oftsc-custom';

Change the customization file any way you please to style your navbar.

Copy php template file to your template-parts:

'./path/to/file/../node_modules/wp-ig-components-test-2/wp-ig-components/php/navbars/templates/nav-v1-ofts/ofts-all.php'

Set the $navbar_name to the desired navbar, corresponding with the scss file name.

1. $navbar_name = 'ofts';
2. $navbar_name = 'oftsc'; Set the $overlay_option to your desired overlay:
3. 'sliding-from-top-to-bottom'
4. 'sliding-from-two-sides'

Copy walker class to your inc:

require_once get_template_directory() . './path/to/file/../node_modules/wp-ig-components-test-2/wp-ig-components/php/navbars/walkers/navbar-dropdown-walker.php'

Set the $navbar_name to the desired navbar, corresponding with the scss file name.

Require walker in your functions.php:

require_once get_template_directory() . '/inc/walkers/nav-v1-ofts/navbar-dropdown-walker.php';

Import JS files:

import { registerSNTTBNavbarFunctions } from './path/to/file/../node_modules/wp-ig-components-test-2/wp-ig-components/js/navbars/nav-v1-ofts/ofts-all'

registerSNTTBNavbarFunctions arguments:

navName - your chosen navbar name breakpoint - specify the main breakpoint of the navbar (corresponding to $navbar-breakpoint-main variable in base.scss) overlayName - Chose the overlay you desire. Options:

1. 'sliding-from-top-to-bottom'
2. 'sliding-from-two-sides'

Current navbars awailable:

1. $navbar_name = 'fspn';
2. $navbar_name = 'fspnc';

Impport appropriate SCSS file:

@import './path/to/file/../node_modules/wp-ig-components-test-2/wp-ig-components/scss/components/navbars/nav-v3-fspn/fspn'
@import './path/to/file/../node_modules/wp-ig-components-test-2/wp-ig-components/scss/components/navbars/nav-v3-fspnc/fspnc'

Copy and paste your customization file:

 './custom/fspn-custom';
 './custom/fspnc-custom';

Change the customization file any way you please to style your navbar.

Copy php template file to your template-parts:

'./path/to/file/../node_modules/wp-ig-components-test-2/wp-ig-components/php/navbars/templates/nav-v3-fspn/fspn-all.php'

Set the $navbar_name to the desired navbar, corresponding with the scss file name.

1. $navbar_name = 'fspn';

Set the $reverse to your desired value:

1. false - navbar slides from the left
2. true - navbar slides from the right

Copy walker class to your inc:

require_once get_template_directory() . './path/to/file/../node_modules/wp-ig-components-test-2/wp-ig-components/php/navbars/walkers/navbar-dropdown-walker.php'

Set the $navbar_name to the desired navbar, corresponding with the scss file name.

Require walker in your functions.php:

require_once get_template_directory() . '/inc/walkers/nav-v1-ofts/navbar-dropdown-walker.php';

Import JS files:

import { animateHamburgerBtnArrowAndRing } from './path/to/file/../node_modules/wp-ig-components-test-2/wp-ig-components/js/global/buttons/btn-hamburger__arrow-and-ring.js'

animateHamburgerBtnArrowAndRing arguments:

openNav - default is false, you can set to the class name which is responsible for openning you nav (in this nav 'ig-fspn-nav-is-open', 'ig-fspnc-nav-is-open')