Grey Energy

Jekyll Theme | CSS Animation

Grey Energy Sprite

Grey energy

View Github Repo

Project Intention:
  • - To create a Jekyll blog theme which can be installed seamlessly
  • - Theme target audience is Software Engineers starting a blog
Design Deliverables:
UX Skills Practised:
  • Hover attributes on anchor links
UI Skills Practised:
  • Web Typography
  • Modular Typography Scale
Developer Tools Practised:
  • CSS Animation
  • CSS Pseudo Elements
  • Fluid Web Typography
  • Building a Jekyll theme with a compartmentalised code base
  • Deploying an open source project to Github
Lessons Learned:
  1. 1. Fluid web typography is difficult to execute well. Without the existence of a CSS `min-font-size` attribute it is important to account for how small font sizes will get using vw units. I adopted calc([min-font-size] + [modular scale]) as a workaround but want a failsafe option for older browser support.
  2. 2. Whilst making this theme I became aware of the Chrome Developer Tools Lighthouse Audits. This has led me to adopt the best practices outlined by the audit. There is still some work to do on executing a service worker successfully.