Details
Yarn is een light size framework dat geen gebruikt maakt van andere frameworks zoals Bootstrap of jQuery.
HTML
Door attributen en/of classen toe te voegen aan elementen kun je veel werk te besparen. Bijvoorbeeld door de volgende code te gebruiken: <a tooltip="Hello World!" tooltip-pos="left"></a> wordt er automatisch een tooltip gemaakt met de gegeven tekst en positie (als deze niet wordt meegegven wordt deze automatisch gezet op top). Zo kan je ook carousels maken of gemakelijke toasts en meer.
CSS
Net zoals Bootstrap kun je gebruik maken van de standaard layouts. Zoals row en col-x.
Maar je kunt ook gebruik maken van de flex en grid layouts. Maar met Yarn krijg je een paar upgrades bij. Als je bijvoorbeeld de class grid-masonry toevoegt aan een element, zal Yarn automatisch de grid stijl ‘masonry’ toepassen aan het element.
De standaard kleuren en stijlen kan je veranderen door de :root te veranderen.
JavaScript
Yarn kan je ook toepassen met JavaScript. Zoals gebruik te maken van de ingebounwde functies en methods.
Zoals de WaitUntil functie waarbij er gewacht wordt tot het gevraagde element de gevraagde waarde, class of zichtbaar is. Of de Observer functie waarbij de mee gegeven waarde of class wordt toegevoegd wanneer het element zichtbaar is wanneer er gescrold wordt.
Yarn heeft ook een paar hanige methods. Zoals de API class. Hierbij kan je requests meegeven die dan worden bewaard en dat je later weer kunt gebruiken door de naam van het request te gebruiken. Met de Components class kan je elementen opslaan en laten toevoegen aan andere elementen. Je kan ook variables toevoegen aan de elementen. Naast deze kan je ook gebruik maken van de Storage class, de Elements class waarmee gemakelijk elmenten maken, de Capture class om te debuggen, de Modal class, de Sort en Search classes met alle algoritmes die je nodig hebt om je lijsten te sorteren of om te zoeken naar een specifieke waarde.