Uživatelská rozhraní webu s využitím Utility CSS a frameworku Tailwind

David KRÁL

Bachelor's thesis

Web user interfaces using Utility CSS and Tailwind Framework

Abstract:

Cílem bakalářské práce je zpracovat problematiku Utility CSS s využitím Utility-first CSS frameworku Tailwind. V Utility-first CSS jde o psaní kódu pomocí tříd, které mají jen jeden účel, jedná se tedy o celkový přístup k tvorbě kódu, postaveném na jednotlivých třídách, tzv. "utility classes". Téměř vždy jde o kombinaci CSS vlastnosti a nějaké její hodnoty, výhodou je neměnnost a nezávislost na kontextu. Nástroj Tailwind usnadňuje vývoj UI designu, kdy ale není nutně potřebná znalost Utility CSS, bude tedy porovnána tvorba CSS kódu s využitím frameworku a klasickým postupem. Obsahem teoretické části bude představení Utility CSS, frameworku Tailwind a jeho porovnání s frameworkem Bootstrap, praktická část bakalářské práce bude založena na tvorbě vlastní webové aplikace, kde budou Utility CSS a framework detailně představeny. Výsledkem práce bude porovnání efektivity, časové náročnosti a čitelnosti kódu. Zajímavostí bude ovládání uživatelských formulářů (např. vyhledávání), na kterých bude aplikována aktuální blind friendly technika speech recognition (rozpoznávání hlasu a převodu na text).

Abstract:

The point of the bachelor thesis is to process the issue of Utility CSS using the Utility-first CSS framework Tailwind. Utility-first CSS is about writing code using classes that have only one purpose, so it is a general approach to creating code, built on individual classes, the so-called "utility classes". It is almost always a combination of CSS properties and some of its value, the advantage is immutability and independence of context. The Tailwind tool facilitates the development of UI design, but when the knowledge of the CSS Utility is not necessary, so the creation of CSS code using the framework and the classic procedure will be compared. The content of the theoretical part will be the introduction of Utility CSS, Tailwind framework and its comparison with the Bootstrap framework, the practical part of the bachelor thesis will be based on creating your own web application, where Utility CSS and framework will be introduced in detail. The result of the work will be a comparison of efficiency, time and readability of the code. Of interest will be the control of user forms (eg search), on which the current blind friendly speech recognition technique (voice recognition and conversion to text) will be applied.

Keywords

CSS, utility CSS, Tailwind, Bootstrap, front-end, framework, uživatelské rozhraní, webdesign, speech recognition

Language used: Czech

Date on which the thesis was submitted / produced: 21. 4. 2021

Thesis defence

• Supervisor: PaedDr. Petr Pexa, Ph.D.

UNIVERSITY OF SOUTH BOHEMIA IN ČESKÉ BUDĚJOVICE

Faculty of Education

Bachelor programme / field:
Specialization in pedagogy / information technology and e-learning