Something went wrong. Try again.
@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
Something went wrong. Try again.
2.3 kB · 89 lines
at commit 2cc898a6
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990@title CSS Coding Standards@group standardsThis document describes CSS features and coding standards for Phabricator.= Overview =This document describes technical and style guidelines for writing CSS inPhabricator.Phabricator has a limited CSS preprocessor. This document describes the featuresit makes available.= Z-Indexes =You should put all `z-index` rules in `z-index.css`, and keep them sorted. Thegoal is to make indexes relatively manageable and reduce the escalation of theGreat Z-Index War where all indexes grow without bound in an endless arms race.= Color Variables =Phabricator's preprocessor provides some standard color variables. You canreference these with `{$color}`. For example: span.critical { color: {$red}; }You can find a list of all available colors in the **UIExamples** application.= Printable Rules =If you preface a rule with `!print`, it will be transformed into a print ruleand activated when the user is printing the page or viewing a printable versionof the page: lang=css !print div.menu { display: none; }Specifically, this directive causes two copies of the rule to be written out.The output will look something like this: lang=css .printable div.menu { display: none; } @media print { div.menu { display: none; } }The former will activate when users look at the printable versions of pages, byadding `__print__` to the URI. The latter will be activated in print contextsby the media query.= Device Rules =Phabricator's environment defines several device classes which can be used toadjust behavior responsively. In particular: lang=css .device-phone { /* Smallest breakpoint, usually for phones. */ } .device-tablet { /* Middle breakpoint, usually for tablets. */ } .device-desktop { /* Largest breakpoint, usually for desktops. */ }Since many rules are specific to handheld devices, the `.device` class selectseither tablets or phones: .device { /* Phone or tablet (not desktop). */ }= Image Inlining =Phabricator's CSS preprocessor automatically inlines images which are less than32KB using `data:` URIs. This is primarily useful for gradients or textureswhich are small and difficult to sprite.