Skip to content

Commit

Permalink
Custom CSS docs (#157)
Browse files Browse the repository at this point in the history
  • Loading branch information
GitRon authored Feb 8, 2024
1 parent 740bc5a commit d75a08b
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 0 deletions.
67 changes: 67 additions & 0 deletions docs/custom.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
=============
Custom Styles
=============

With Tailwind being a utility framework there is much more ability to customise
your site than with many of the other CSS frameworks such as Bootstrap.

While our opinionated Tailwind styles may get you so far you may wish to change these.

The Tailwind template pack aims to help you customise your form in a DRY way. This
template pack comes with a utility class called `CSSContainer` which can be attached to your
form helper.

------------
CSSContainer
------------

`CSSContainer` is imported from `crispy_tailwind.tailwind`. This is a class which holds the
CSS style for your form. Currently it holds the classes for the `<input>` tags within your form.
The class expects a dict of Django widgets and class styles::

>>> from crispy_tailwind.tailwind import CSSContainer

>>> css = CSSContainer({
"text": "border border-gray-300",
"number": "border border-gray-300",
...
})

As there are many Django widgets, there is the option to pass in classes to a "base" key
which will then be applied to all of the widgets::

>>> css = CSSContainer({
"base": "bg-white"
})
>>> css
{
'text': 'bg-white',
'number': 'bg-white',
'email': 'bg-white',
...
}

You can also update add and remove styles::

>>> css += {
"text": "text more styles",
"number": "number style"
}
>>> css
{
'text': 'bg-white text more styles',
'number': 'bg-white number style',
'email': 'bg-white',
...
}
>>> css -= {
"text": "bg-white",
"number": "bg-white"
}
>>> css
{
'text': 'text more styles',
'number': 'number style',
'email': 'bg-white',
...
}
1 change: 1 addition & 0 deletions docs/index.txt
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ This is a Tailwind template pack for django-crispy-forms_.

getting_started
layout_objects
custom
examples
contributing

Expand Down

0 comments on commit d75a08b

Please sign in to comment.