Component Integration

This is where you'll find how to integrate components into your stylesheet

Markup Integration (HTML)

• The component's HTML markup is provided in their respective documentation page.

• We utilize the BEM naming scheme for easy class finding. We like to take as much advantage as possible with our current set of IDE features like Intellisense, among others.

Stylesheet Integration (Sass/SCSS)

• We use the render() mixin to call the styles in your stylesheet. Like so:

SCSS

@use '~@growstocks/stack/Components/ComponentName';

...

@include ComponentName.render();

Sass

@use '~@growstocks/css/ComponentName'

...

+ComponentName.render()

• You can even pass in style data inside the render component. (Please refer to the per component documentation for this one)

• This way you'll only import the components you need, and not have a bloated CSS file!

Script Integration (JS/TS)

• THIS FEATURE IS CURRENTLY UNDER MAINTENANCE MODE!

• To integrate the component scripts into your script file (index.ts or index.js). We use the call() function. Like so:

TypeScript

import { ComponentName } from "@growstocks/stack/Components/ComponentName";

...

const myVariable = ComponentName;
myVariable.call()

JavaScript

const { ComponentName } = require("@growstocks/stack/Components/ComponentName");

...

new ComponentName.call()

(or)

const myVariable = ComponentName;
myVariable.call()