mirror of https://github.com/zulip/zulip.git synced 2025-11-16 03:41:58 +00:00

Files

David Rosa bdbc384de5 docs: Reduce the number of apparently broken links on github.

- Updated 260+ links from ".html" to ".md" to reduce the number of issues
reported about hyperlinks not working when viewing docs on Github.
- Removed temporary workaround that suppressed all warnings reported
by sphinx build for every link ending in ".html".

Details:
The recent upgrade to recommonmark==0.5.0 supports auto-converting
".md" links to ".html" so that the resulting HTML output is correct.

Notice that links pointing to a heading i.e. "../filename.html#heading",
were not updated because recommonmark does not auto-convert them.
These links do not generate build warnings and do not cause any issues.
However, there are about ~100 such links that might still get misreported
as broken links.  This will be a follow-up issue.

Background:
docs: pip upgrade recommonmark and CommonMark #13013
docs: Allow .md links between doc pages #11719

Fixes #11087.

2019-10-07 12:08:27 -07:00

2.6 KiB

Raw Blame History

HTML and CSS

Zulip CSS organization

The Zulip application's CSS can be found in the static/styles/ directory. Zulip uses Bootstrap as its main third-party CSS library.

Zulip currently does not use any CSS preprocessors, and is organized into several files. For most pages, the CSS is combined into a single CSS file by the static asset pipeline.

The CSS files are:

portico.css - Main CSS for logged-out pages
pygments.css - CSS for Python syntax highlighting
activity.css - CSS for the activity app
fonts.css - Fonts for text in the Zulip app

The CSS for the Zulip web application UI is primarily here:

settings.css - CSS for the Zulip settings (including organization settings) pages
zulip.css - CSS for the rest of the Zulip logged-in app
media.css - CSS for media queries (particularly related to screen width)

We are in the process of splitting zulip.css into several more files; help with that project is very welcome!

Editing Zulip CSS

If you aren't experienced with doing web development and want to make CSS changes, we recommend reading the excellent Chrome web inspector guide on editing HTML/CSS, especially the section on CSS to learn about all the great tools that you can use to modify and test changes to CSS interactively in-browser (without even having the reload the page!).

CSS Style guidelines

Avoid duplicated code

Without care, it's easy for a web application to end up with thousands of lines of duplicated CSS code, which can make it very difficult to understand the current styling or modify it. We would very much like to avoid such a fate. So please make an effort to reuse existing styling, clean up now-unused CSS, etc., to keep things maintainable.

Be consistent with existing similar UI

Ideally, do this by reusing existing CSS declarations, so that any improvements we make to the styling can improve all similar UI elements.

Use clear, unique names for classes and object IDs

This makes it much easier to read the code and use git grep to find where a particular class is used.

Validating CSS

When changing any part of the Zulip CSS, it's important to check that the new CSS looks good at a wide range of screen widths, from very wide screen (e.g. 1920px) all the way down to narrow phone screens (e.g. 480px).

For complex changes, it's definitely worth testing in a few different browsers to make sure things look the same.

2.6 KiB Raw Blame History