webbloqs: Building Blocks for your Website

webbloqs: Modular Building Blocks for Modern Websites

Websites are built from HTML markup and CSS styles, often with a frontend framework such as React, Lit, or Vue.js. webbloqs provide HTML custom elements that come together with global themed CSS styling and a well-thought-out API.

With webbloqs, you can use the frontend framework of your choice to create consistently styled web components - without any additional CSS. Reuse your components across different projects and change their styling simply by adjusting custom properties in the global theme. Use components from different frontend frameworks together and build larger products faster.

What is a webbloq?

A webbloq is a visual pattern with modular styling and isolated markup. webbloqs let developers focus on implementing business logic without worrying about browser quirks or side effects from surrounding styles.

webbloqs are built with Web Component technology. A compiler translates the standard HTML API into higher-level abstractions suited for native use in frontend frameworks such as React, Lit, or Vue.js.

A catalog of webbloqs offers visual patterns that can be used to index, illustrate, structure, and interact with content on the web. Each webbloq is designed for a specific purpose and takes three main characteristics into account:

Parameterizable

A webbloq is parameterizable through a set of properties that change its HTML markup or its behavior. You can configure components via their properties without affecting the styling.

Styleable

A webbloq is styleable with a set of CSS custom properties that modify visual aspects of its appearance. Change the look by adjusting custom properties in the global theme.

Composable

A webbloq is composable through the standard Web Component API. Create more complex components by combining webbloqs or other HTML markup.

Why webbloqs?

More Consistency

webbloqs help you achieve a consistent user interface and make maintenance easier. By using a global theme, the design stays uniform across different components and projects.

One Codebase

webbloqs use one codebase to work across different platforms. The same components can be used in React, Lit, Vue.js, or even plain HTML.

Better Teamwork

webbloqs support collaboration between designers, developers, and marketers. Designers can define the global theme, developers can focus on the business logic, and marketers can easily adapt content.

Focus on Business Logic

By isolating markup and styling, developers can focus entirely on implementing the business logic without worrying about browser quirks or side effects from surrounding styles.

Technology and Framework Support

webbloqs are based on Web Components, the standard for reusable HTML elements. A compiler translates the standard HTML API into higher-level abstractions suited for native use in frontend frameworks.

React Support

webbloqs can be used natively in React components. The @webbloqs/react package provides React wrappers for all webbloqs elements:

import { Button, Title, Box } from "@webbloqs/react";

function MyComponent() {
    return (
        <Box>
            <Title level={2}>Welcome</Title>
            <Button variant="primary" onClick={() => console.log("Clicked")}>
                Click here
            </Button>
        </Box>
    );
}

Custom Properties for Styling

Styling can be adjusted through CSS custom properties:

<Title
    level={3}
    style={{
        "--wb-title__bezel-top": 0,
        "--wb-title__bezel-bottom": "var(--wb-ds-space--m)",
    }}
>
    Heading
</Title>

Composition

webbloqs can be easily combined to create more complex components:

<Form>
    <FieldGroup>
        <FieldLabel>Name</FieldLabel>
        <TextField name="name" required />
    </FieldGroup>
    <Button type="submit">Submit</Button>
</Form>

How do you use webbloqs?

The webbloqs Catalog offers an interactive environment to discover, customize, and use components.

1. Browse the Catalog

Browse the webbloqs Catalog for content by purpose and find a webbloq to illustrate, index, or structure content. Interact with each webbloq to see it in action.

2. Select and Customize a Component

Choose a webbloq that is displayed in your application theme. Customize it before copying its code into your editor.

3. Explore the API

Explore a webbloq's API. Find element and styling properties for customization. See the effects directly in the catalog.

4. Copy and Paste the Code

Copy the generated code and paste it into your project. webbloqs work natively in frontend frameworks with standard JSX, code completion, and HMR.

Best Practices

Use the Design System «as is»

Start by avoiding any styling in your code. Use the elements and customize them only with their attributes. If the design system makes it hard to achieve the design you need, put a FIXME in your code and open a PR to suggest an alternative.

Challenge the Design System Instead of Fixing Locally

If you notice something that does not fit the design system or that you constantly have to adjust, propose a change in the theme. It is like politics: take part in the discussion instead of founding your own republic.

No Inline Styles Without Necessity

Do not use style="" or innerCss="" unless you are sure you cannot solve your problem with another solution. Inline styles should not be used to achieve colors, padding, or responsive design.

Composition Over Inheritance

Combine simple components into complex ones instead of relying on inheritance. Each component should have a clear responsibility (single responsibility).

Conclusion

webbloqs are the cornerstone of modern web development with modular components. They enable teams to work faster and more efficiently while increasing the quality and consistency of applications.

webbloqs is developed by Quatico Solutions, a software development company based in Zurich. Across numerous projects and for various customers, Quatico has built high-quality components for digital products. This experience and expertise flows into webbloqs.

Explore the webbloqs Catalog or take a look at the documentation to learn more.

At Quatico, we rely on webbloqs and these proven principles to build enterprise portals that are scalable, maintainable, and future-proof.