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. styling, clean up now-unused CSS, etc., to keep things maintainable.
Opt to write CSS in CSS files. Avoid using the `style=` attribute in Opt to write CSS in CSS files. Avoid using the `style=` attribute in
HTML unless the styling is actually dynamic. Instead, define logical HTML except for styles that are set dynamically. For example, we set
classes and put your styles in external CSS files such as `zulip.css`. 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 ### Be consistent with existing similar UI