recaptime.dev
@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.)
hq.recaptime.dev/wiki/Phorge
phorge
phabricator
1@title CSS Coding Standards
2@group standards
3
4This document describes CSS features and coding standards for Phorge.
5
6= Overview =
7
8This document describes technical and style guidelines for writing CSS in
9Phorge.
10
11Phorge has a limited CSS preprocessor. This document describes the features
12it makes available.
13
14= Z-Indexes =
15
16You should put all `z-index` rules in `z-index.css`, and keep them sorted. The
17goal is to make indexes relatively manageable and reduce the escalation of the
18Great Z-Index War where all indexes grow without bound in an endless arms race.
19
20= Color Variables =
21
22Phorge's preprocessor provides some standard color variables. You can
23reference these with `{$color}`. For example:
24
25 lang=css
26 span.critical {
27 color: {$red};
28 }
29
30You can find a list of all available colors in the **UIExamples** application.
31
32= Printable Rules =
33
34If you preface a rule with `!print`, it will be transformed into a print rule
35and activated when the user is printing the page or viewing a printable version
36of the page:
37
38 lang=css
39 !print div.menu {
40 display: none;
41 }
42
43Specifically, this directive causes two copies of the rule to be written out.
44The output will look something like this:
45
46 lang=css
47 .printable div.menu {
48 display: none;
49 }
50
51 @media print {
52 div.menu {
53 display: none;
54 }
55 }
56
57The former will activate when users look at the printable versions of pages, by
58adding `__print__` to the URI. The latter will be activated in print contexts
59by the media query.
60
61= Device Rules =
62
63Phorge's environment defines several device classes which can be used to
64adjust behavior responsively. In particular:
65
66 lang=css
67 .device-phone {
68 /* Smallest breakpoint, usually for phones. */
69 }
70
71 .device-tablet {
72 /* Middle breakpoint, usually for tablets. */
73 }
74
75 .device-desktop {
76 /* Largest breakpoint, usually for desktops. */
77 }
78
79Since many rules are specific to handheld devices, the `.device` class selects
80either tablets or phones:
81
82 lang=css
83 .device {
84 /* Phone or tablet (not desktop). */
85 }
86
87= Image Inlining =
88
89Phorge's CSS preprocessor automatically inlines images which are less than
9032KB using `data:` URIs. This is primarily useful for gradients or textures
91which are small and difficult to sprite.