Tutorials

Hands-on, learning-oriented guides to help you build real components.

Available Tutorials

Build an Icon Component

Create a complete icon system using CSS mask-image

What Are Tutorials?

Tutorials are learning-oriented — they take you through building something from scratch. Unlike how-to guides (which solve specific problems) or reference docs (which list all options), tutorials help you understand the workflow.

Tutorial Philosophy

  1. Hands-on — You write real code, not just read about it
  2. Complete — You end with a working result
  3. Explained — Each step explains why, not just what
  4. Buildable — You can extend what you learned

Getting Started

If you're new to StyleScribe, start with:

  1. Getting Started — Install and create your first project
  2. Icon Component Tutorial — Build your first component

Then explore the Guides for task-specific help.