docs: update overview and installation documentation

parasutcom · Oct 18, 2024 · d263dca · d263dca
1 parent 1dc4ed7
commit d263dca
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 37 deletions.
diff --git a/docs/00-Overview.mdx b/docs/00-Overview.mdx
@@ -0,0 +1,70 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Documentation/Overview" />
+
+<img src="/images/homepage-banner.png" width="100%" height="auto" alt="Chrome" />
+
+![NPM Version](https://img.shields.io/npm/v/frame-design-system?color=blue&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fframe-design-system)
+![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/frame-design-system?color=orange&link=https%3A%2F%2Fwww.jsdelivr.com%2Fpackage%2Fnpm%2Fframe-design-system)
+![GitHub License](https://img.shields.io/github/license/parasutcom/frame-design-system?color=green&link=https%3A%2F%2Fgithub.com%2Fparasutcom%2Fframe-design-system%2Fblob%2Fmain%2FLICENSE)
+
+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: 
+
+````html
+<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/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: 
+
+````html
+<!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/[email protected]/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](/docs/documentation-installation--docs).
+
+## Browser support
+
+
+Frame is tested and is supported in the latest two versions of the following browsers:
+
+<img src="/images/chrome.png" width="64" height="64" alt="Chrome" />
+<img src="/images/firefox.png" width="64" height="64" alt="Firefox" />
+<img src="/images/safari.png" width="64" height="64" alt="Safari" />
+<img src="/images/edge.png" width="64" height="64" alt="Edge" />
+<img src="/images/opera.png" width="64" height="64" alt="Opera" />
+
+We recommend using the latest versions of these browsers when working with Frame for optimal performance and full feature support. Please note that IE11 and pre-Chromium versions are not supported.
+
+## License
+
+Frame Design System is open source software released under the [MIT License](https://github.com/parasutcom/frame-design-system/blob/main/LICENSE).
+
+
+
+[def]: https://img.shields.io/badge/GitHub-Code-black?logo=github&link=https%3A%2F%2Fgithub.com%2Fparasutcom%2Fframe-design-system
diff --git a/docs/00-welcome.mdx b/docs/00-welcome.mdx
diff --git a/docs/01-installation.mdx b/docs/01-installation.mdx
@@ -4,11 +4,11 @@ import { Meta } from '@storybook/blocks';
 
 # Installation
 
-This guide provides detailed instructions on how to install and integrate our web components into your project.
+Frame Design System offers multiple installation options to meet different project needs—This guide provides detailed instructions on how to install and integrate our web components into your project.
 
-The Frame Design System offers multiple installation options to meet different project needs. The easiest and quickest way to start is by using our CDN, which allows you to add components directly in your HTML with a single `<script>` tag. This method is perfect for rapid prototyping, static HTML pages, or projects without a build process.
+The easiest and quickest way to start is using our CDN, which allows you to add components directly in your HTML with a single `<script>` tag. This method is perfect for rapid prototyping, static HTML pages, or projects without a build process.
 
-By using the CDN, you can instantly start using Frame Design System components without any local setup or build steps.
+Using the CDN, you can instantly start using Frame Design System components without local setup or build steps.
 
 For more advanced use cases, such as projects with a build pipeline, we recommend installing via NPM.
 
@@ -29,7 +29,7 @@ Add the following in the `<head>` of your project:
 
 ### Prerequisites
 
-Before installing the Frame Design System via NPM, you need to set up authentication for Font Awesome Pro, which we use for icons.
+Before installing the Frame Design System via NPM, you need to set up authentication for Font Awesome Pro we use for icons: 
 
 1. Create a `.npmrc` file in the root of your project (if it doesn't already exist). This file will store your Font Awesome authentication token.
 2. Contact the Frame Design System team to get your Font Awesome Pro token.
@@ -50,7 +50,7 @@ After setting up the `.npmrc` file, you can install the Frame Design System pack
 npm install @parasutcom/frame-design-system --save
 ````
 
-Once installed, import the Frame Design System in your project:
+Once installed, import the Frame Design System into your project:
 
 ````javascript
 import '@parasutcom/frame-design-system/dist/bundle.js';