Getting started
Installation
It's easy to get started!
Get the package
Install the @eightshift/ui-components package with your package manager of choice.
Import the styles
At the minimum you have to import the main styles, which come in 3 flavors:
- For generic usage
@import '@eightshift/ui-components/dist/assets/style.css';
Uses cascade layers to separate styles, includes the default CSS reset.
- For the WP Gutenberg editor in legacy projects
@import '@eightshift/ui-components/dist/assets/style-editor.css';
Cascade layers are not used, CSS reset is included.
- For the WP admin area
@import '@eightshift/ui-components/dist/assets/style-admin.css';
Cascade layers are not used, CSS reset is opt-in using the es:css-reset class.
Extras
To expand the font coverage to the Block editor (even the Gutenberg components), import:
@import '@eightshift/ui-components/dist/assets/wp-overrides/replace-fonts.css';
Optionally, import (some or all of) the WordPress UI enhancements, which correct some of the inconsistencies in the default components.
@import '@eightshift/ui-components/dist/assets/wp-overrides/fix-label-text-case.css';
@import '@eightshift/ui-components/dist/assets/wp-overrides/increase-sidebar-width.css';
@import '@eightshift/ui-components/dist/assets/wp-overrides/make-block-messages-nicer.css';
@import '@eightshift/ui-components/dist/assets/wp-overrides/restyle-tooltips.css';
@import '@eightshift/ui-components/dist/assets/wp-overrides/round-corners.css';
@import '@eightshift/ui-components/dist/assets/wp-overrides/unify-button-sizes.css';
@import '@eightshift/ui-components/dist/assets/wp-overrides/allow-full-width-blocks.css';
If using Frontend libs version 12 or older, skip the WordPress UI enhancements, as they will conflict with the styles included there.
Recommended WordPress setup
application-blocks-editor.css
@import '@eightshift/ui-components/dist/assets/wp-overrides/replace-fonts.css';
@import '@eightshift/ui-components/dist/assets/wp-overrides/fix-label-text-case.css';
@import '@eightshift/ui-components/dist/assets/wp-overrides/increase-sidebar-width.css';
@import '@eightshift/ui-components/dist/assets/wp-overrides/make-block-messages-nicer.css';
@import '@eightshift/ui-components/dist/assets/wp-overrides/restyle-tooltips.css';
@import '@eightshift/ui-components/dist/assets/wp-overrides/round-corners.css';
@import '@eightshift/ui-components/dist/assets/wp-overrides/unify-button-sizes.css';
@import '@eightshift/ui-components/dist/assets/wp-overrides/allow-full-width-blocks.css';
@import '@eightshift/ui-components/dist/assets/style.css'; // or style-editor.css for non-Tailwind projects
application-admin.css
@import '@eightshift/ui-components/dist/assets/style-admin.css';
Enjoy!
That's all! You are ready to use Eightshift UI components in your project.