Installation

NPM

Install the latest package via NPM

npm i @natachah/vanilla-frontend

SCSS

You can import the global SCSS file:

@use '@natachah/vanilla-frontend/scss/vanilla-frontend.scss';

Or better, include only the files that you need, here the template with all files:

// Should be overide by your own files
@use '@natachah/vanilla-frontend/scss/themes/_root';

// If you need to use the mixin
@use '@natachah/vanilla-frontend/scss/abstracts/_mixins';

// Base files (reset, typography and media)
@use "@natachah/vanilla-frontend/scss/base";

// Components files (or: @use "@natachah/vanilla-frontend/scss/components";)
@use '@natachah/vanilla-frontend/scss/components/_badge';
@use '@natachah/vanilla-frontend/scss/components/_breadcrumb';
@use '@natachah/vanilla-frontend/scss/components/_button';
@use '@natachah/vanilla-frontend/scss/components/_card';
@use '@natachah/vanilla-frontend/scss/components/_dialog';
@use '@natachah/vanilla-frontend/scss/components/_disclosure';
@use '@natachah/vanilla-frontend/scss/components/_drawer';
@use '@natachah/vanilla-frontend/scss/components/_dropdown';
@use '@natachah/vanilla-frontend/scss/components/_form';
@use '@natachah/vanilla-frontend/scss/components/_grid';
@use '@natachah/vanilla-frontend/scss/components/_group';
@use '@natachah/vanilla-frontend/scss/components/_list';
@use '@natachah/vanilla-frontend/scss/components/_loading';
@use '@natachah/vanilla-frontend/scss/components/_progress';
@use '@natachah/vanilla-frontend/scss/components/_slider';
@use '@natachah/vanilla-frontend/scss/components/_table';

TIP

There is no required files, but it's recommanded to have at least the base/* and the themes/root

Javascript

Import the Javascript files that you need, here the template:

// If you need to create some component, you can use this
import BaseComponent from "@natachah/vanilla-frontend/js/utilities/_base-component"
import ErrorMessage from "@natachah/vanilla-frontend/js/utilities/_error"
import Cookie from "@natachah/vanilla-frontend/js/utilities/_cookie"

// Here the helpers
import FormHelper from "@natachah/vanilla-frontend/js/utilities/_form-helper"

// Here the components
import Autofill from "@natachah/vanilla-frontend/js/_autofill"
import CheckAll from "@natachah/vanilla-frontend/js/_check-all"
import Comfort from "@natachah/vanilla-frontend/js/_comfort"
import Consent from "@natachah/vanilla-frontend/js/_consent"
import Dialog from "@natachah/vanilla-frontend/js/_dialog"
import Dropdown from "@natachah/vanilla-frontend/js/_dropdown"
import Drawer from "@natachah/vanilla-frontend/js/_drawer"
import Scroll from "@natachah/vanilla-frontend/js/_scroll"
import Slider from "@natachah/vanilla-frontend/js/_slider"
import Sortable from "@natachah/vanilla-frontend/js/_sortable"
import Toggle from "@natachah/vanilla-frontend/js/_toggle"
import Tree from "@natachah/vanilla-frontend/js/_tree"