"Icon set lab" for aegis-icons

Helps for finding design inconsistencies and other issues on all the icons, created specifically to help process of maintaining and designing icons for Aegis Authenticator.

Features

• Display the icon grid for seeing logo size irregularities.
• Change the site background color for seeing icon contrast irregularities.
  • Features theme colors used in Aegis Authenticator v3: AMOLED, Dark, Light.
• Change the size of the listed icons.
  • Options to see icons in almost full page sized or simulated* Aegis's icon container sizes.
• Filter the icons by name, instantaneous search.
• Jump between icon categories.
• Calculates how many icons are in the lab in total and categories separately.
• Uses CSS scroll snapping.
  • Has option to disable it, see the notes / caveats section.
• Works 100% only with keyboard too, if needed.
  • Every function has keyboard shortcut (see the blue squares).

* _{Currently not accurately calculated, just eyeballed being "close enough".}

Demonstration

Caution

Rapidly flashing colors in the video from 00:01 to 00:06.

Video is now outdated, but functionally works the same.

2023-01-10.22-02-15.mp4

Setting up the lab

Getting the icons from aegis-icons to the lab

1. Clone / fork this project or download repo as ZIP.
2. Clone / fork aegis-icons project or download it as ZIP.

Important

Unzip the ZIP files, if you downloaded the repos as ZIP.

Windows

Important

Both icon-set-lab & aegis-icons (or aegis-icons-master) directories needs to be side by side in the same root directory.

• Run the 1__get_icons.bat script in the z__bat-scripts directory.

Linux (with bash)

Important

Both icon-set-lab & aegis-icons (or aegis-icons-master) directories needs to be side by side in the same root directory.

1. Go to z__sh-scripts directory on the terminal.
2. Check that 1__get_icons.sh has execution permission by running:

   chmod +x 1__get_icons.sh

   ^{(you'll only need do this once).}
3. Run the 1__get_icons.sh script.

Other OSes / manual way

1. Copy-paste icons folder from aegis-icons dir to icon-set-lab root.
2. Copy-paste z_icon_grid.svg from aegis-icons\_templates dir to icon-set-lab root.

Launching the local Jekyll server

Initial server setup

1. Install Ruby, Bundler & Jekyll with guides here.
2. Run bundle install in the terminal at lab's root directory.

Start the server in Windows

• Run 2__start_jekyll_server.bat script in the z__bat-scripts directory.

The lab should open to your default browser after this.

Start the server in Linux (with bash)

1. Go to z__sh-scripts directory on the terminal.
2. Check that 2__start_jekyll_server.sh has execution permission by running:

   chmod +x 2__start_jekyll_server.sh

   ^{(you'll only need do this once).}
3. Run the 2__start_jekyll_server.sh script.

The lab should open to your default browser after this.

Start the server in other OSes / manual way

Run this in the terminal at lab's root directory:

bundle exec jekyll serve --host localhost --open_url

The lab should open to your default browser after this.

Troubleshooting

• Some assets on the site are broken:
  • Stop Ruby & Jekyll, remove _site folder, run Jekyll again.
• Jekyll won't launch:
  • Run bundle clean --force in the terminal at lab's root directory, run Jekyll again.

Notes / caveats

• 👍 The CSS scroll snapping works best with Firefox.
  • If you want the rapid scroll like in the demonstration video, disable Use smooth scrolling from Firefox's browsing settings.
• ⚠️ Chromium-based browsers has issues with CSS scroll snap! (As of January 2023.)
  • Holding (page) up / (page) down / space key makes scroll sluggish and barely move.
  • 💡 Solutions:
    • Disable scroll snap from lab's sidebar on the right.
    • Only scroll with mouse scroll wheel or scroll bar's up / down buttons.
    • Disable smooth scroll (works in any desktop Chromium-based browser, enables the rapid scroll like in the video)
      • ⚠️ Makes mouse scroll act weird.
• Site is responsive, but designed only desktop in mind (preferly 1920px+ width window).

Todos

• Give option to disable CSS scroll snap.
• Low priority: Migrate from Jekyll to something faster and modern (Zola possibly).
  • Issue: I don't know how to do it, Zola and others seems so much more complicated then Jekyll.

Credits

• Departure Mono font by Helena Zhang (SIL OFL 1.1).
• Geist Mono font by Vercel, Basement Studio & Andrés Briganti (SIL OFL 1.1)
• HotKeys.js by Kenny Wong & Thomas Fuchs (MIT).
• Inter font by Rasmus Andersson (SIL OFL 1.1).
• List.js by Jonny Strömberg (MIT).
• sanitize.css by CSS Tools (CC0 1.0 Universal).

License

The MIT License.