Devsigner.io

Jekyll/Liquid Blog

Devsigner Sprite
Project Intention:
  • - To record my learning journey by creating a technical blog
  • - To make this resource the blog I would have loved to have found when I started this journey
Design Deliverables:
UX Skills Practised:
  • Creating a pattern library
  • Information Architecture - blogging site
UI Skills Practised:
  • SVG Illustration/Optimisation
  • Web Typography
Developer Tools Practised:
  • Jekyll CMS
  • Liquid Templating
  • Bootstrap Responsive Grids
  • Creating a maintainable HTML/CSS Codebase
  • Write terse prose on technical topics
  • Deploying to a separate 'dev' site
Lessons Learned:
  1. 1. If CSS styling doesn’t bring about changes you were expecting, check:
    • - The Jekyll serve script for errors
    • - That you are viewing the local host version of the site and not the deployed version 🤦🏻‍♀️
  2. 2. Jekyll serve allows you to check mobile rendering without having to deploy by checking the IP.
  3. 3. I believe I prefer using pure CSS Flexbox than bootstrap for responsive layouts. I’m willing to have this opinion changed however.
  4. 4. A bootstrap pattern library has a speed advantage over other projects I have completed before.
  5. 5. Nested hierarchies are not supported out of the box with Jekyll. This required me think laterally around how I used tags and categories to create the site structure I envisioned.
  6. 6. Styling blog posts about code using the highlight syntax with Jekyll/Liquid is far superior to HTML <pre> tags.
  7. 7. It is important to be careful to be consistent with the styling of the YAML front matter as inconsistentcy can interfere with Liquid loops.
What I'd do differently next time:
  • - I would default to Adobe Illustrator rather than Sketch for drawing SVGs.
  • - I would only use websafe fonts for text in SVGs.
  • - It goes without saying I would never start a blog without a CMS again!
What I’m proud to share:
  • - The pattern library
  • - The use of names for images and scss colors to fit with the site's liquid logic.