We're getting close to 1.0.0 and are tidying up and loose ends for the public API.
One of the final things we're auditing is the consistency between class names, we believe if they're more consistent they'll be easier to remember and more intuative.
Right now our override classes look like:
.govuk-!-display-inline {}
.govuk-!-display-inline-block {}
.govuk-!-display-block {}
.govuk-!-m-rN {}
.govuk-!-p-rN {}
.govuk-!-f-N {}
.govuk-!-w-regular {}
.govuk-!-w-bold {}
.govuk-!-width-three-quarters {}
.govuk-!-width-two-thirds {}
.govuk-!-width-one-half {}
.govuk-!-width-one-third {}
.govuk-!-width-one-quarter {}
(Note for sake of demonstration I've not included all the spacing classes)
Some examples of the short hand classes are:
.govuk-!-w-bold
which sets the font weight to 'bold').govuk-!-f-30
which sets the font size to 24 (responsively).govuk-!-mb-r3
which sets the margin bottom to the spacing scale of 3 (responsively)
We're considering making all overrides consistent, this would look like either:
.govuk-!-display-inline {}
.govuk-!-display-inline-block {}
.govuk-!-display-block {}
.govuk-!-margin-5 {}
.govuk-!-margin-bottom-5 {}
.govuk-!-padding-0 {}
.govuk-!-padding-bottom-0 {}
.govuk-!-font-size-30 {}
.govuk-!-font-weight-regular {}
.govuk-!-font-weight-bold {}
.govuk-!-width-three-quarters {}
.govuk-!-width-two-thirds {}
.govuk-!-width-one-half {}
.govuk-!-width-one-third {}
.govuk-!-width-one-quarter {}
- easier to understand what the classes are doing when seeing them for the first time
- since override classes tend to be used together, verbose class names could make markup verbose
.govuk-!-d-i {}
.govuk-!-d-ib {}
.govuk-!-d-b {}
.govuk-!-m-5 {}
.govuk-!-mb-5 {}
.govuk-!-p-0 {}
.govuk-!-pb-0 {}
.govuk-!-fs-30 {}
.govuk-!-fw-regular {}
.govuk-!-fw-bold {}
.govuk-!-w-3/4 {}
.govuk-!-w-2/3 {}
.govuk-!-w-1/2 {}
.govuk-!-w-1/3 {}
.govuk-!-w-1/4 {}
- once the naming convention is understood, it is faster to type
- less verbose when composing classes together.
- higher overhead to learn and remember this naming convention
To explore what it would look like to use the long hand I took some real examples of using overrides from the GOV.UK Design System and put them side by side.
No change:
<h1 class="govuk-heading-xl">Service unavailable</h1>
<p class="govuk-body-l">The submit an employment intermediary report service has closed.</p>
<p class="govuk-body">Contact us if you need to speak to someone about the service and your reports.</p>
<p class="govuk-body govuk-!-mb-r0">Telephone:</p>
<p class="govuk-body govuk-!-w-bold">0808 157 3900</p>
<p class="govuk-body govuk-!-mb-r0">Opening times:</p>
<p class="govuk-body govuk-!-w-bold">Monday to Friday: 8:30am to 4:30pm</p>
Expanded:
<h1 class="govuk-heading-xl">Service unavailable</h1>
<p class="govuk-body-l">The submit an employment intermediary report service has closed.</p>
<p class="govuk-body">Contact us if you need to speak to someone about the service and your reports.</p>
<p class="govuk-body govuk-!-margin-bottom-0">Telephone:</p>
<p class="govuk-body govuk-!-font-weight-bold">0808 157 3900</p>
<p class="govuk-body govuk-!-margin-bottom-0">Opening times:</p>
<p class="govuk-body govuk-!-font-weight-bold">Monday to Friday: 8:30am to 4:30pm</p>
No change:
{{ govukPhaseBanner({
tag: {
text: "preview",
classes: "app-tag--review"
},
classes: "govuk-!-pl-r3 govuk-!-pr-r3",
html: phaseBannerText
}) }}
Expanded:
{{ govukPhaseBanner({
tag: {
text: "preview",
classes: "app-tag--review"
},
classes: "govuk-!-padding-left-3 govuk-!-padding-right-3",
html: phaseBannerText
}) }}
No change:
<p class="govuk-body">Registering takes around 5 minutes.</p>
{{ govukButton({
text: "Start now",
href: "#",
classes: "govuk-button--start govuk-!-mt-r2 govuk-!-mb-r8"
}) }}
<h2 class="govuk-heading-m">Before you start</h2>
Expanded:
<p class="govuk-body">Registering takes around 5 minutes.</p>
{{ govukButton({
text: "Start now",
href: "#",
classes: "govuk-button--start govuk-!-margin-top-2 govuk-!-margin-bottom-8"
}) }}
<h2 class="govuk-heading-m">Before you start</h2>
What do you think? Should we keep these overrides as they are? Or should we make them consistent one way or the other?
I think verbose is good - is there a real advantage in shorthand? It might be a bit quicker to type, but we recommend verbose in our programming style guides for ease of reading and debugging. Probably good to be consistent with that?
https://github.com/alphagov/styleguides/blob/master/js.md#naming-conventions