mirror of
https://github.com/simonw/datasette.git
synced 2025-12-10 16:51:24 +01:00
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:
parent
92c4d41ca6
commit
2170269258
13 changed files with 46 additions and 23 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue