Training »

Implement your Design System with Stencil

Class length: 2 days (customizable)

Most large organizations by now have a style guide, CSS library, jQuery-based legacy Javascript widgets, and/or framework-specific component set to achieve a unified look and feel across applications and web properties. A broad set of ideas around cross-application appearance and behavior have recently been unified under the term “design system”, as organizations have realized the limitations (and cost and schedule difficulties) of a framework-specific implementation.

In this class, you learn more about the design system concept, then learn the essentials of Stencil, the first tool to deeply embrace design system implementation. With Stencil, you can implement a design system, encompassing ideas, features, and often code from past efforts. The new implementation will work well across the three leading web application frameworks (Angular, React, Vue), as well as with static websites, CMS driven sites, and (with minor effort) other frameworks. Stencil leverages the underlying web component features of the modern web platform, while adding excellent developer ergonomics, both for the authors of the design system implementation and consumer projects.

At the same time though, the marketplace for design system implementation tooling is in its early days; so the class will also introduce, more briefly, other tools and approaches to achieve a framework neutral and ergonomic implementation.

The class focuses on design system implementation tooling and techniques; not on the visual/behavioral design of such a system. (Enterprises contemplating a new implementation typically already have a design target, with a different group of people responsible for the design aspect versus implementation.)

After learning these technologies, your team should be ready to choose its tools and begin a high quality implementation effort.

Alternatively, Oasis Digital experts are available to create such an implementation for you; you bring the design (you make the decisions on what your design system should encode), and we can encode it in a framework-neutral implementation.

Who Should Attend?

  • Decision-makers deciding whether and how to implement a custom design system for their organizations.
  • Implementation teams looking for a well-suited toolset to realize their design system for ergonomic use with Angular, React, Vue, and in static or CMS-driven web properties.
  • Developers using Stencil for a current or upcoming project.

Prerequisites / requirements

  • Ability to read and write moderately complex CSS
  • Familiarity with common single-page-application frameworks like Angular, React, or Vue
  • Computer with code editor and other tools (for hands-on portions)

Proven results

We have trained thousands of developers at hundreds of companies, including numerous global leaders.

Two ways to learn

1) Training for your team,

For corporate groups and other organizations, we offer live in-person or online instruction. These teams typically have advanced needs, so we provide customized, hands-on assistance.

Before each class, our instructors listen to your needs in depth and adjust the agenda. We can follow-up a class with consulting assistance, or combine multiple classes into a longer workshop week.

Contact us about a private class

2) Live-instructor public classes,
coming soon

Want to attend as an individual or small group? We are creating public, open enrollment versions of many of our classes, including this one.

Unlike canned video training, live instructor online classes offer frequent opportunities for detailed Q&A discussion.

This class isn't quite ready yet, but follow us on social media (bottom of the page) or keep an eye on our website for announcements. We will show the schedule of upcoming open enrollment class dates prominently.

Topic outline


Oasis Digital instructors have extensive experience with both Angular and numerous surrounding technologies; here are some of them. The specific instructor(s) assigned to your class will depend on which class or class topics (we customize!) are put together, availability, additional consulting needs, etc.

Training FAQs

Q: Is this taught "in person"?
A: We offer training both in-person and online via remote conferencing.
Q: How does the remote option work?
A: Much like an in-person class, it is conducted by our expert trainers, in real time. The trainers can answer questions, assist with trouble students are having, etc. We strive to offer as much of the in-person experience as possible, online.
Q: Are there open enrollment public classes?
A: We currently only offer an open-enrollment "public" class for our flagship Angular Boot Camp.
Q: Can the content be customized?
A: For private team classes, we *always* discuss your goals, the class contents, any specials areas for extra coverage, etc. in advance. We customize both the contents and length (number of days) to your needs.
Q: Can we schedule a private class any time?
A: Our classes are taught by developers who use the subject technologies in their daily work, so we don't assign "any" available developer/trainer to any particular class, but only to classes with a strong experience and knowledge match. Please contact us to arrange a date.