From 034941c9ec14981c84d08d3343b3a0fdbd27623d Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Tue, 3 Sep 2024 08:30:05 -0700
Subject: [PATCH] Docs for the new .core CSS class, refs #2415

---
 docs/custom_templates.rst | 9 +++++++++
 docs/writing_plugins.rst  | 3 ++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/docs/custom_templates.rst b/docs/custom_templates.rst
index 534d8b3321..8cc40f0ff4 100644
--- a/docs/custom_templates.rst
+++ b/docs/custom_templates.rst
@@ -83,6 +83,15 @@ database column they are representing, for example:
         </tbody>
     </table>
 
+.. _customization_css:
+
+Writing custom CSS
+~~~~~~~~~~~~~~~~~~
+
+Custom templates need to take Datasette's default CSS into account. The pattern portfolio at ``/-/patterns`` (`example here <https://latest.datasette.io/-/patterns>`__) is a useful reference for understanding the available CSS classes.
+
+The ``core`` class is particularly useful - you can apply this directly to a ``<input>`` or ``<button>`` element to get Datasette's default form styles, or you can apply it to a containing element (such as ``<form>``) to apply those styles to all of the form elements within it.
+
 .. _customization_static_files:
 
 Serving static files
diff --git a/docs/writing_plugins.rst b/docs/writing_plugins.rst
index 2bc6bd24c4..cd165a3fbb 100644
--- a/docs/writing_plugins.rst
+++ b/docs/writing_plugins.rst
@@ -124,7 +124,6 @@ And a Python module file, ``datasette_plugin_demos.py``, that implements the plu
             "random_integer", 2, random.randint
         )
 
-
 Having built a plugin in this way you can turn it into an installable package using the following command::
 
     python3 setup.py sdist
@@ -164,6 +163,8 @@ Where ``datasette_plugin_name`` is the name of the plugin package (note that it
 
 `datasette-cluster-map <https://github.com/simonw/datasette-cluster-map>`__ is a useful example of a plugin that includes packaged static assets in this way.
 
+See :ref:`customization_css` for tips on writing CSS that is compatible with Datasette's default CSS, including details of the ``core`` class for applying Datasette's default form element styles.
+
 .. _writing_plugins_custom_templates:
 
 Custom templates