@odx/foundation

@odx/foundation

The @odx/foundation package is a core part of the ODX Design System, providing essential building blocks for creating consistent and cohesive user interfaces. This package includes foundational components, styles, and utilities to ensure a unified design across all ODX projects.

Features

• CSS Framework: A comprehensive CSS framework that includes layout, typography, and utility classes to streamline styling and ensure consistency
• Components: Reusable web components, including buttons, tables, headers, and more.
• i18n: Internationalization utilities for building multilingual applications, with support for locale changes and translations.
• Global Styles: Comprehensive global styles, including colors, spacing, and themes.

Prerequisites

Install

To install @odx/foundation and it's peer dependencies in your project, run the following command:

npm install @odx/foundation @odx/icons@next --save 

We depend on the Lit package for building web elements because it offers a lightweight, efficient framework with a simple syntax for creating fast, reusable elements. Its powerful templating system ensures high performance and seamless user experience. Lit is also highly interoperable, making it easy to integrate with other frameworks and libraries.

Setup

Ensure that you have followed the installation and setup instructions for our design tokens library.

Once installed, you can import the foundational components and styles into your project:

// Load core icons
import '@odx/icons';
import '@odx/icons/core';

// Load components
import '@odx/foundation/loader';

// Load styles (in JS)
import '@odx/foundation/styles';

/* Load styles (in CSS) */
@import '@odx/foundation/dist/styles.css';

Native Styles

The @odx/foundation package provides native styles that can be used to apply the ODX Design System's visual language to native HTML elements. These styles ensure that your application maintains a consistent look and feel across all components, whether they are custom web components or standard HTML elements.

In order to use the native styles, you need to import the styles.css file from the @odx/foundation package. This file contains all the necessary CSS rules to style native HTML elements according to the ODX Design System.

// Load styles (in JS)
import '@odx/foundation/styles-native'; // JS

/* Load styles (in CSS) */
@import '@odx/foundation/dist/styles-native.css';

Framework integration

We currently do not provide any framework specific integration for the @odx/foundation package. However, you can easily integrate the web components into your framework of choice by following the standard practices for using web components in that framework.

Angular Example

import { Directive, input } from '@angular/core';

@Directive({
  selector: 'odx-title',
  host: { '[attr.size]': 'size() || null' },
})
export class Title {
  size = input<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'>();
}

React Example

See Lit documentation for more information on how to use web components in React.

Documentation

For detailed documentation on how to use the @odx/foundation package, including examples and best practices, please visit our documentation.

Contact

For questions, feedback, or support, please reach out to us through our contact page.