HomeGeneralHelpersElementsContainerFormComponents

GeneralGetting StartedThemeBreakpointsCustomization SCSSVariablesBuild a ThemeBuild Variants

HelpersGeneralColorText

ElementsAvatarButtonChipDividerIconNote BlockProgressSpinnerTableTooltip

ContainerBasicColumnElement GroupSnap Container

FormBasicsCheckboxInputRadioRangeSelectSwitchTextarea

ComponentsBadgeBreadcrumbCardDropdownModalNavNavbarPaginationPlaceholderRaw ProgressTabs

Build Variants

There are three build variants of Zusty CSS.

Variants are -

• Normal
• Prefixless
• CSS Variable - Parted

Normal

Normal variant is the base version of Zusty CSS. If you're following getting started guide then you're probably using normal version.

Usage

You can simply use it using jsDelivr CDN.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/zusty@1.2.0">

or if you're using npm then

<link rel="stylesheet" href="path/to/node_modules/zusty/dist/zusty.min.css">

Prefixless

Prefixless is same as normal, different is that it has no prefix. So, you can use it without prefix like, zust-hidden can be used using hidden. Use it if you want to develop your page rapidly.

Usage

If you want to use CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/zusty@1.2.0/dist/zusty.prefixless.css">

or if you're using npm

<link rel="stylesheet" href="path/to/node_modules/zusty/dist/zusty.prefixless.css">

Parted - CSS variables

If you're feeling adventurous you can use this variant.

All files are parted like below -

• theme.css - CSS File containing only theme.
• variables.css - CSS File containing only variables. All variables are CSS Variable in this file.
• zusty.css or zusty.min.css - The main CSS file. All variables are transferred to CSS Variables.

Usage

You are going to change the file if you use it. For this reason, download it manually and link them all in HTML file. Files can be found Here.