Differential D25007 Diff 23 src/docs/contributor/css_coding_standards.diviner

Changeset View

Standalone View

src/docs/contributor/css_coding_standards.diviner

@title CSS Coding Standards		@title CSS Coding Standards
@group standards		@group standards

This document describes CSS features and coding standards for Phabricator.		This document describes CSS features and coding standards for Phorge.

= Overview =		= Overview =

This document describes technical and style guidelines for writing CSS in		This document describes technical and style guidelines for writing CSS in
Phabricator.		Phorge.

Phabricator has a limited CSS preprocessor. This document describes the features		Phorge has a limited CSS preprocessor. This document describes the features
it makes available.		it makes available.

= Z-Indexes =		= Z-Indexes =

You should put all `z-index` rules in `z-index.css`, and keep them sorted. The		You should put all `z-index` rules in `z-index.css`, and keep them sorted. The
goal is to make indexes relatively manageable and reduce the escalation of the		goal is to make indexes relatively manageable and reduce the escalation of the
Great Z-Index War where all indexes grow without bound in an endless arms race.		Great Z-Index War where all indexes grow without bound in an endless arms race.

= Color Variables =		= Color Variables =

Phabricator's preprocessor provides some standard color variables. You can		Phorge's preprocessor provides some standard color variables. You can
reference these with `{$color}`. For example:		reference these with `{$color}`. For example:

lang=css		lang=css
span.critical {		span.critical {
color: {$red};		color: {$red};
}		}

You can find a list of all available colors in the UIExamples application.		You can find a list of all available colors in the UIExamples application.
Show All 24 Lines	The output will look something like this:
}		}

The former will activate when users look at the printable versions of pages, by		The former will activate when users look at the printable versions of pages, by
adding `__print__` to the URI. The latter will be activated in print contexts		adding `__print__` to the URI. The latter will be activated in print contexts
by the media query.		by the media query.

= Device Rules =		= Device Rules =

Phabricator's environment defines several device classes which can be used to		Phorge's environment defines several device classes which can be used to
adjust behavior responsively. In particular:		adjust behavior responsively. In particular:

lang=css		lang=css
.device-phone {		.device-phone {
/* Smallest breakpoint, usually for phones. */		/* Smallest breakpoint, usually for phones. */
}		}

.device-tablet {		.device-tablet {
Show All 9 Lines	either tablets or phones:

lang=css		lang=css
.device {		.device {
/* Phone or tablet (not desktop). */		/* Phone or tablet (not desktop). */
}		}

= Image Inlining =		= Image Inlining =

Phabricator's CSS preprocessor automatically inlines images which are less than		Phorge's CSS preprocessor automatically inlines images which are less than
32KB using `data:` URIs. This is primarily useful for gradients or textures		32KB using `data:` URIs. This is primarily useful for gradients or textures
which are small and difficult to sprite.		which are small and difficult to sprite.