alphagov / product-page-example Goto Github PK

The buttons on GOV.UK Elements use the "nta" font family, but buttons in the product page don't.

As far as I can tell this is because _core.scss doesn't include the input rule defined in govuk_template's _basic.scss.

Credit to eagle-eyed @christopherthomasdesign for noticing the difference!

From @dashouse:

These are here for sub level pages not for jump links within content, could potentially be used for either but will require the active state for the sub-nav and create fourth level breadcrumb

From @dashouse:

padding on .breadcrumbs is uneven on top & bottom, go for 10px on both
.breadcrumbs ol – line-height 25px (may require reduction in padding to compensate for height increase)?

Transition this template from toolkit, elements and template (which are deprecated) over to GOV.UK Design System (govuk-frontend)

Because the deploy script is in a subfolder, when you run it, it can't see any parameters set in manifest.yml. I found this out because it wasn't taking the app name from manifest.yml. Suggest putting deploy script in root folder.

When adding a list it appears indented. Not aligned with http://govuk-elements.herokuapp.com/typography/#typography-lists

From @dashouse:

Content / Illustration should go 50% / 50% at mid size breakpoint before stacking. On the prototype I have a grid override "product-overview-intro-….” for this
"column-two-thirds product-overview-intro-text"
"column-one-third product-overview-intro-image"

Ideally I’d like this image to be inserted between the h1 and the .hero__description when it breaks to one column. Could we use (https://github.com/filamentgroup/AppendAround) ?

Do we treat the Verify logo example as an entirely separate use case?

Given GOV.UK Design System is the newer, maintained product, it would be best if this template was built on top of it, not the Frontend Toolkit.

It looks like this repo isn't under active maintenance, but I thought it worth noting - maybe something in the README would warn future users?

Notably, this repo has been a huge boon for us, and helped us get up and running quickly - I'm grateful for its existence, but would like make future users aware of this issue.

The GOV.UK Crown and text isn't positioned as per GOV.UK / Service Manual / Service Toolkit

From @dashouse:

.breadcrumbs (< 640px) – remove margin-bottom (might still be needed when in blue header)
.sub-navigation (< 640px) – remove margin-top
.header__navigation ul (< 640px) – increase margin-bottom to 8px;

Looks to me as if the font sizes are a little bit different from GOV.UK Elements

Headings (Elements): 48 / 36 / 24 / 19
Headings (Product page example computed): 48 / 38 / 28.5 / 22.23

There are also some examples in the prototype of where the .heading-medium (etc) classes from GOV.UK Elements come in useful in regards to margins. Below is (roughly) the same markup with the right using a .heading-medium class which applies the larger margins.

(Low priority, just to bring in-line)