• Introduction
    • Why Liquid
    • Getting started
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • React bindings
    • Tailwind CSS integration
    • Design tokens
    • Sandbox applications
    • FAQ
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
    • Checkbox
    • Circular Progress
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outsid
    • Slider
    • Switch
      • Switch Item
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
Introduction Why Liquid

Why Liquid #

Here is why we think you should use Liquid:

  • Accessible: All Liquid components are built with accessibility in mind, following best practices in accordance to the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA requirements.
  • Interoperable: Liquid is built with Stencil. It ships both, standards-based Web Components and CSS Components, which you can include in almost any modern web-based tech stack.
  • Well documented: A well written and complete documentation is as essential to a project as its code base. It is a pre-condition for trial, usage, maintainance and adoption. Therefore, the team behind Liquid puts a lot of effort in maintaining an up-to-date and in-depth documentation and fosters a feedback and collaboration culture around it.
  • Built with Typescript: Liquid is written in Typescript. Hence, it comes with type definitions which allow for type checking and intellisense in your project (currently supported in JSX and plain HTML only). It also allows for easier maintainance and favors code contributions by giving you assurance of type safety when refactoring code or fixing bugs.
  • Small footprint: Import only what you need, leverage tree-shaking, use lightweight CSS Components – all of this is possible with Liquid.