MAC
Introduction
MAC stands for Modular, Atomic, Contextual.
In this vault, MAC is not just a name. It is the umbrella concept that ties together the way products, systems, documentation, and reusable implementation patterns are organized. It describes a working approach in which larger solutions are built from smaller parts, those parts stay focused and composable, and each part is documented in the context where it is actually used.
Modularmeans systems should be split into distinct, reusable parts instead of being treated as one monolithic whole.Atomicmeans those parts should stay as small, clear, and purpose-specific as possible so they can be combined without unnecessary complexity.Contextualmeans each part should be understood alongside the product, workflow, or problem it belongs to, rather than as isolated information.
That idea carries through the structure of this vault and the broader MAC ecosystem. Rather than referring to a single tool, MAC acts as the parent layer for related products, starters, documentation systems, libraries, references, procedures, and support resources.
MAC is also an acronym for Mihai-Andrei Cîrcea, which makes the name both a personal signature and a shorthand for the system design principles behind the work collected here.
Assumptions
MAC is intentionally opinionated.
Unless explicitly stated otherwise, the default context for all content in this vault is web design and development. In cases where no clear domain applies, the context should be interpreted as General.
This assumption ensures consistency in how concepts, patterns, and implementations are defined and applied across the MAC ecosystem.
Ergonomics
The mac prefix used for classes, functions, components, CSS classes, CSS variables, and similar elements is easy to type on both standard keyboards with the default QWERTY layout and on the Glove80 keyboard with the Enthium layout.
The Glove80 is widely regarded as one of the most ergonomic commercially available keyboards due to its split design, columnar layout, concave key wells, and thumb cluster optimization, all of which reduce finger travel and wrist deviation.
There is no single universally accepted “most ergonomic” layout, as this depends on individual preferences and use cases. However, modern layouts such as Enthium (Engrammer), Colemak Mod-DH, and similar ergonomic variants are specifically designed to minimize finger movement, reduce pinky strain, and improve hand alternation, making them among the most ergonomically optimized options currently in use.
Analysis
Typing flow analysis for mac.
| Layout / Keyboard | Key Positions (m → a → c) | Fingers (m → a → c) | Hand Flow | Movement Pattern | Efficiency |
|---|---|---|---|---|---|
| Enthium (Glove80) | Bottom row → Home row → Home row | Right index → Left index → Left ring | R → L → L | Cross-hand → strong index → outward roll (index→ring) | High |
| QWERTY (standard) | Bottom row → Home row → Bottom row | Right index → Left pinky → Left middle | R → L → L | Cross-hand → pinky press → same-hand lateral stretch | Medium |
| QWERTY (Glove80) | Bottom cluster → Home cluster → Bottom cluster | Right index → Left pinky → Left middle | R → L → L | Same pattern, reduced lateral strain | Medium+ |
| Colemak (standard) | Bottom/near-home → Home → Bottom | Right index → Left pinky → Left middle | R → L → L | Cross-hand → pinky → downward same-hand finish | High |
| Colemak (Glove80) | Home cluster → Home cluster → Bottom cluster | Right index → Left pinky → Left middle | R → L → L | Reduced travel, same pinky dependency | Very High |
| Dvorak (standard) | Mixed rows (home/top/bottom) | Right hand → Left hand → Left hand | R → L → L | Inconsistent vertical movement, same-hand finish | Medium |
| Dvorak (Glove80) | Home cluster → Home cluster → Bottom cluster | Right index → Left pinky → Left middle | R → L → L | Similar to Colemak, slightly less natural flow | Medium+ |
Keyboard
Our keyboard of choice is the Glove80, using the Enthium layout from the sunaku glove80-keymaps repository and its configuration as defined in the MoErgo layout editor.
The Glove80 is widely regarded as one of the most ergonomics-focused commercially available keyboards. Its design includes a fully split layout, columnar key arrangement, concave key wells, thumb clusters, adjustable tenting, and a low-profile structure, all of which work together to reduce finger travel, minimize wrist deviation, and improve overall typing posture.
This setup is selected for web design and development work due to the properties of the Enthium layout:
- Higher home-row utilization, reducing vertical finger movement
- Reduced reliance on the pinky through redistribution of high-frequency keys
- Increased use of stronger fingers (index and middle) for common inputs
- More consistent hand alternation, improving typing flow
- Favorable roll patterns (inward and outward) for common sequences
- Layer-based architecture, providing access to symbols, numbers, navigation, and system functions without leaving the home row
- Thumb-driven layer access, enabling fast switching between layers while keeping fingers in position
- Home row modifiers, allowing modifier keys (Ctrl, Alt, Shift, etc.) to be accessed without moving off the home row