Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

docs: Provide an example of dynamic styling.

This commit is contained in:
Karl Stolley 2023-05-24 12:48:05 -05:00 committed by Tim Abbott
parent ee7b6f476d
commit 04656bf16f
1 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
docs/subsystems/html-css.md
View File

@ -45,8 +45,20 @@ to avoid such a fate. So please make an effort to reuse existing
styling, clean up now-unused CSS, etc., to keep things maintainable.
Opt to write CSS in CSS files. Avoid using the `style=` attribute in
HTML unless the styling is actually dynamic. Instead, define logical
classes and put your styles in external CSS files such as `zulip.css`.
HTML except for styles that are set dynamically. For example, we set
the colors for specific streams (`{{stream_color}}`) on different
elements dynamically, in files like `user_stream_list_item.hbs`:
```html
<span
class="stream-privacy-original-color-{{stream_id}} stream-privacy filter-icon"
style="color: {{stream_color}}">
```
But for most other cases, its preferable to define logical classes and
put your styles in external CSS files such as `zulip.css` or a more
specific CSS file, if one exists. See the contents of the `web/styles/`
directory.
### Be consistent with existing similar UI