> ## Documentation Index
> Fetch the complete documentation index at: https://tonic.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Cheat Sheet

**Background**

<Expandable title="Background">
  * Our philosophy is built around the principles written about at [HTML First](https://html-first.com/).
  * You have access to use CSS classes from both **Base Styles** & **Tailwind Lite**.
    * Base Styles: [Full List of All Classes](https://raw.githubusercontent.com/reallygoodsoftware/base-styles/refs/heads/main/base-styles.css) | [Examples](https://raw.githubusercontent.com/reallygoodsoftware/h1rails/refs/heads/master/app/views/h1rails/demos/base_styles/all.md)
    * Tailwind Lite: [Full List of All Classes](https://raw.githubusercontent.com/reallygoodsoftware/tailwind-lite/refs/heads/main/src/classes.txt)
</Expandable>

# **Meta Patterns**

* **Always** follow the "Principle of least power". Use the pattern that requires that least code and the least complexity to get the job done. Some examples:
  * Don't use javascript for interactions that can be achieved with CSS.
  * Don't use custom-written CSS for styles that can be achieved with Base Styles or Tailwind.

**Pattern Priorities**

1. If you can achieve it by adding an existing class (or classes) from the base-styles library to a new or existing html element.
2. Add an existing class (or classes) from Tailwind Lite to a new or existing html element.
3. Add minor interactivity by toggling classes on click or change, using Mini JS.