📚 DOCS: Add usage guide

README.md

@@ -1,9 +1,21 @@
 # sphinx-design (IN-DEVELOPMENT)
 
+[![Github-CI][github-ci]][github-link]
+[![Coverage Status][codecov-badge]][codecov-link]
+[![PyPI][pypi-badge]][pypi-link]
+
 A sphinx extension for designing beautiful, view size responsive web components.
 
 Created with inspiration from [Bootstrap](https://getbootstrap.com/) (v5), [Material Design](https://material.io) and [Material-UI](https://material-ui.com/) design frameworks.
 
+## Usage
+
+Simply pip install `sphinx-design` and add the extension to your `conf.py`:
+
+```python
+extensions = ["sphinx_design"]
+```
+
 ## Supported browsers
 
 - Chrome >= 60
@@ -78,4 +90,9 @@ paragraph and tab-set in grid-item
 
 rtd PRs not working
 
-document `article-info`
+[github-ci]: https://github.com/executablebooks/sphinx-design/workflows/continuous-integration/badge.svg?branch=main
+[github-link]: https://github.com/executablebooks/sphinx-design
+[codecov-badge]: https://codecov.io/gh/executablebooks/sphinx-design/branch/main/graph/badge.svg
+[codecov-link]: https://codecov.io/gh/executablebooks/sphinx-design
+[pypi-badge]: https://img.shields.io/pypi/v/sphinx-design.svg
+[pypi-link]: https://pypi.org/project/sphinx-design

docs/index.md

@@ -88,6 +88,21 @@ Roles and directives for {bdg-primary}`badges` and other components.
 
 Created with inspiration from [Bootstrap](https://getbootstrap.com/) (v5), [Material Design](https://material.io) and [Material-UI](https://material-ui.com/) design frameworks.
 
+## Usage
+
+Simply pip install `sphinx-design` and add the extension to your `conf.py`:
+
+```python
+extensions = ["sphinx_design"]
+```
+
+For using with [MyST Parser](https://github.com/executablebooks/myst-parser), for Markdown documentation, it is recommended to use the `colon_fence` syntax extension:
+
+```python
+extensions = ["myst_parser", "sphinx_design"]
+myst_enable_extensions = ["colon_fence"]
+```
+
 ## Supported browsers
 
 - Chrome >= 60