New .core CSS class for inputs and buttons

* Initial .core input/button classes, refs #2415
* Docs for the new .core CSS class, refs #2415
* Applied .core class everywhere that needs it, closes #2415
This commit is contained in:
Simon Willison 2024-09-03 08:37:26 -07:00 committed by GitHub
commit 2170269258
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 46 additions and 23 deletions

View file

@ -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

View file

@ -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