Frame Design System offers developers a powerful and flexible framework for creating applications that align with UX standards. Built on web component technology, it can be easily used with any web framework. This approach positions Frame as a versatile solution for building consistent and user-friendly interfaces across different technologies.
- Compatible with all frameworks
- 35+ components in HTML & CSS
- 15+ components as Web Components
- SCSS variables for easy customization
- Style Dictionary compatibility design tokens
- Accessibility-focused development
- Extensive Font Awesome icon library
- CDN support for quick integration
Quick start
The fastest way to get started with the Frame Design System is by adding the following script tag to your page:
<script type="module" src="https://cdn.jsdelivr.net/npm/frame-design-system@0.16.0/dist/bundle.min.js"></script>
By adding this script, you'll have access to all of the Frame Design System components! You can start using them immediately. For example, here is how to add a button to your project:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frame Design System</title>
<script type="module" src="https://cdn.jsdelivr.net/npm/frame-design-system@0.16.0/dist/bundle.min.js"></script>
</head>
<body>
<fds-button variant="primary">Welcome Frame!</fds-button>
</body>
</html>
This is the quickest way to start using Frame Design System components.
For more advanced installation options, see the Installation guide.
Browser support
Frame is tested and is supported in the latest two versions of the following browsers:
We recommend using the latest versions of these browsers when working with Frame for optimal performance and full feature support.
License
Frame Design System is open source software released under the MIT License.