This is Yoi

Yoi (pronounced yo-ee) is Yoshino’s component library, the foundation for most of our projects. It enables our team to design, build and test web pages directly in the browser. It was made to be used by designers with basic knowledge of HTML and CSS – at its core stands a simple HTML-based interface.

If you are already familiar with the basics of HTML, you will quickly learn how to use Yoi since you will only write HTML. No CSS and not a single line of JavaScript. We kept things simple because we designed this system with non-programmers in mind.

Components

Building Blocks — Yoi offers a large array of pre-built components that you can mix & match to build almost any layout you wish. Think of them as Lego-blocks. But even better, imagine you could also slightly tweak your lego blocks instead of merely combining them. Ever needed a block of unusual size or color? That’s exactly what we took care of.

Utilities

Layout via CSS classes — By adding utility-classes to an element, you can override styling like colors, width, margin, etc. to fine-tune your layout or even build new custom components. Or you can use utility classes to compose complex new components or even responsive layouts – without writing any CSS!

Behaviors

Effects without writing JavaScript — Sometimes you wish to fade-in an element on the page as soon as it entered the viewport or make another element stick to the top edge of the screen once you scrolled past it. Yoi has many useful Behaviors already built in. You can apply and configure them on any element in you HTML via Yoi’s attributes syntax.

Actions

Interactions without writing JavaScript — Do you need a button that opens all accordions on a page? For use cases like this, we enabled another kind of attribute, one that binds an action to an element (like a button). It may look like this: <button yoi-action="Accordion.openAll;">Open all Accordions</button>.

Attribute-Syntax

Simple HTML interface — Yoi also includes some more complex and interactive components like Modals, PopOvers – all these components are configured via custom HTML attributes. Think of this a simple key/value pairs to enable different options – eg. yoi-modal="cache:true;" tells the modal script to preload the content of a modal page. We stick to this syntax with all our components, behaviors and actions. Once you learned it, you are even able to guess it.