AusDTO / gov-au-ui-kit

MOVED TO https://github.com/govau/uikit/
https://github.com/govau/uikit/
MIT License
19 stars 12 forks source link

Recreate the Design Guide in Jekyll #396

Closed gazhands closed 7 years ago

gazhands commented 8 years ago

As a proof of concept I've (re)created the Design Guide in Jekyll. The new site is close to production-ready.

Done

Not yet done

To go live

GitHub https://github.com/AusDTO/dto-design-guide

Handy links

klepas commented 8 years ago

Dan W. and I are pairing on this.

klepas commented 8 years ago

Deployment is set up:

klepas commented 7 years ago

Brendan and Dan helped me: we modified the styleguide.data gulp task to nest subsections in the JSON output.

the examples gulp task appears broken however.

klepas commented 7 years ago

For personal referencing: https://kss-node.github.io/kss-node/api/master/module-kss.KssStyleGuide.html

klepas commented 7 years ago
  • Styleguide sections are split out individually and need to be combined in a custom template
  • Get tags to show up in guide from KSS comments

Done!

klepas commented 7 years ago
  • Guide-specific styles (e.g. for colour swatches) need to be reapplied

Done.

klepas commented 7 years ago

Git flow is implied with the branch names (I’ve been naughty so far, just working in develop straight at the moment).

(A) What’s left now

  1. Example pages ("layouts") — the gulp task (examples) that builds these is broken in the UI-Kit repo at the moment and I’m unsure why. :S
  2. Home page, Getting started & Styleguide landing page content needs to be added/refactored.

(B) Additional things we probably should do

  1. Styleguide sections are split out individually and have their own nice custom template… but it’s not yet possible to add pages (eg accordions.md in say, _patterns/accordions.md) such that the content contained therein is intermixed with the content pulled from the uikit’s SASS source (via JSON).
  2. Create a template for each tag, listing all section that contain said tag.

(C) To go live

  1. Review/refactor content & guide sections.
  2. Replace all references to current guide URL https://gov-au-ui-kit.apps.staging.digital.gov.au.
  3. Redirect all old URLs to new ones (301).

(B) 1 needs to be addressed when we decide on the IA, but I can make headway here in the interim since we already know we want to be able to add ad-hoc pages and have them sit in the “guide”, and for those sections where we have living style guide SASS comments we want to be able to have this content automatically mixed and presented on the same page.

From a technical angle, I was thinking of using Jekyll Collections to achieve this — we’d have at least 3 collections (Foundations, Components, Patterns).

Please discuss ^

joolswood commented 7 years ago

@klepas are we removing the Google Analytics as discussed, until we have the privacy policy sorted?

klepas commented 7 years ago

@joolswood Yup, I’ve already commented it out of _config.yml.

gazhands commented 7 years ago
  1. MVP - (4) Templates for each category
  2. Example pages ("layouts") custom demo eg. grid example
  3. Navigation structure L1 - horizontal navigation bar L2 - Side nav L3 Side nav (or inline links)
  4. Tagging of content types in each category (components, patterns, foundations)
  5. Cross linking between components><patterns
joolswood commented 7 years ago

Hey @klepas from what you've explained of how Jekyll Collections work it sounds like the best route.

We also need to resolve the (potential) problem of confusion arising from KSS guidance comments being presented in code block as well as md guidance.

joolswood commented 7 years ago

I'm hoping to be able to jump on to C1 in next sprint. Part of the issue is not being able to as yet host local builds with a working nav. I could work on it without it, but so much easier if I can prototype the content with real navigation in place.

Do you need anything else for now @klepas ?

joolswood commented 7 years ago

@klepas will split this work into individual issues

klepas commented 7 years ago

I have split the remaining items here up into: