Building Your Zippy Courses Theme Part 7: Core Component Structure and Style

Core Component Structure and Style Guide

If you've made it this deep into the reference material, it's because you want to know exactly how a Core Component is built and how you can work with it.

Great! We love it when people are engaged enough to dig deep and really understand the technology they use.

Technology and Technical Choices

By now, you know that custom themes use HTML, CSS, and Handlebars to do all of their heavy lifting. Under the hood of Core Components, there's a bit more going on:

VueJS

When it comes to Core Components, Zippy Courses employs JavaScript, specifically the VueJS library, to empower the Core Components with advanced functionality.

Click Here to read more about VueJS.

CSS: Namespaces + BEM

Because Zippy Courses cannot predict which HTML and CSS frameworks you may choose when building your themes, we have adopted a policy of following articulate and clear rules for how we craft our components.

  • Namespaces: Every component's class names will begin with a c- to indicate that it is a component. View this article on the power of using namespaces in your CSS.
  • BEM: Stands for Block, Element, and Modifier. Blocks are basically the name of your component: .c-affiliate-summary. In the example component, there is a section (we refer to it as an element when thinking in BEM) for details called .c-affiliate-summary__detail. And each detail section is used for a particular purpose that could be different than the norm, so we apply a modifier, c-affiliate-summary__detail--pending. BEM is a rich and intelligent strategy for designing well-crafted CSS structure. Visit the GetBEM homepage for more information.

By making these choices, we hope that the net result is something that you can understand and work with as soon as you "View Source" or "Inspect Element" in your browser.

Exceptions

There are two significant exceptions to the above practices:

  • Tables: We felt that the design and structure of Bootstrap's tables were very good, so we've adopted their naming conventions. See more about Bootstrap Tables.
  • Alerts: Again, Bootstrap has a simple and solid solution for alerts. See more here.

And that's everything! Now that you have all this under your belt, we hope you're ready to build your own devastatingly awesome custom themes! Have questions? Reach out to us at support@zippycourses.com, and we can help.