Main Answer: Clay CSS is the web implementation of Liferay's Lexicon Design System, providing developers with pre-styled Bootstrap components, patterns, and styling variables.
Audience: Frontend developers, UI/UX designers, and Liferay theme developers.
Applicable Use Cases: Building custom portlet visual templates, styling web components, and customizing corporate portal themes.
| Clay Component | Bootstrap Base Class | Use Case |
|---|---|---|
| Clay Card | .card | Displaying catalog items or blog previews |
| Clay Alert | .alert | Displaying system notifications or error texts |
| Clay Navbar | .navbar | Custom main or sub-navigation layouts |
Understanding Lexicon and Clay
Lexicon is Liferay's UI design philosophy. Clay CSS is the web implementation of Lexicon, built on Bootstrap. Clay provides markup templates for buttons, forms, alerts, and navigation menus, helping developers build cohesive widgets.
How Do You Customise Clay CSS Theme Variables in Liferay?
Direct Answer: Override SASS variables inside your theme's _custom.scss file. Re-assign colors, sizes, borders, and margins using Clay's HSL token naming map.
To style portals, override default parameters. Create custom theme styles, modifying variables like
$primary and $font-family-base. Compile themes to apply branding across portal
widgets.
Clay maps its variables to Bootstrap classes. By updating the primary brand variables, you instantly style all core portal widgets to match brand guides.
Styling Accessible Components
Verify accessibility. Use Clay's high-contrast color combinations, ensure correct focus ring variables (like
$enable-focus-rings), and add appropriate ARIA markers, conforming to WCAG 2.1 Level AA.
Frequently Asked Questions
Is Clay CSS built on Bootstrap?
Yes. Clay CSS extends Bootstrap 4, adding custom variables, semantic HTML helpers, and accessible interface designs.
Can we use Tailwind CSS alongside Clay?
Yes, but configure prefix prefixes or scoping rules in Tailwind to prevent style overrides and layout collisions.
Written by Ankita Varani
Ankita Varani is a certified Liferay Solutions Architect with 12+ years of experience in enterprise portal migrations and decoupled system designs.