Clay CSS · AMP
Styling Portals with Lexicon and Clay CSS Design System
Style accessible layouts by using Clay CSS. Import Clay variables, use standard Lexicon components, and verify typography contrasts, ensuring interfaces look professional and conform to WCAG 2.1 Level AA.
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.
Read the full article, with table of contents, comparison table, and author bio →