• Introduction
    • Why Liquid Oxygen
    • Getting started
      • React
      • Vue
  • Guides
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • Tailwind CSS integration
    • Design tokens
    • Sandbox applications
    • Troubleshooting
      • Popped-out element is rendered in wrong container
    • 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
      • Card Stack
    • Checkbox
    • Circular Progress
    • Context Menu
      • Menu
      • Menuitem
      • Menuitem Group
    • Cookie Consent
    • 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 Outside
    • Slider
    • Stepper
      • Step
    • Switch
      • Switch Item
    • Table
      • Table Body
      • Table Caption
      • Table Cell
      • Table Colgroup
      • Table Column
      • Table Footer
      • Table Head
      • Table Header
      • Table Row
      • Table Toolbar
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. 1. Design Compliance
  2. 2. Accessability
  3. 3. Choose your own tech stack
  4. 4. Documentation
  5. 5. Typescript
  6. 6. Small footprint
Introduction Why Liquid Oxygen
(external link)

Why Liquid Oxygen #

We are working hard to make Liquid Oxygen a reliable and easy to use component library. These are the values we provide:

1. Design Compliance #

All Liquid Oxygen components follow the Liquid Design Guidelines and are build in close coorperation with the Liquid Design Team. Therefore, Liquid Oxygen is the easiest way to make sure your project is compliant with the Liquid Design System.

2. Accessability #

Making sure everyone can use our applications is a core value of Liquid Oxygen. Therefore all components are built with accessibility in mind, following best practices by the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA requirements.

3. Choose your own tech stack #

We use Stencil to build Liquid Oxygen. It ships standards-based Web Components and CSS Components, which you can include in almost any modern web-based tech stack. Liquid Oxygen also provides bindings for relevant libraries like React to improve the developer experience.

4. Documentation #

A well-written and complete documentation is essential to a project. It is a pre-condition for trial, usage, maintenance and adoption. Therefore, we put a lot of effort into maintaining an up-to-date and in-depth documentation and fostering a feedback and collaboration culture around it.

5. Typescript #

Liquid Oxygen uses Typescript. Therefore it comes with type definitions that allow type checking and intellisense in your project (currently supported in TSX and plain HTML only). It also facilitates maintenance and favors code contributions by ensuring type safety when refactoring code or fixing bugs.

6. Small footprint #

Import only what you need, leverage tree-shaking or use lightweight CSS Components – all of this is possible with Liquid Oxygen. This helps you to keep your bundle size small and your application fast.