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).
Anotace v angličtině
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.
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).
Anotace v angličtině
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.
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).
Zásady pro vypracování
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).
Seznam doporučené literatury
MICHÁLEK, Martin. Vzhůru dolů - webová kodéřina ze všech stran [online]. [cit. 2020-04-04]. Dostupné z: https://www.vzhurudolu.cz/prirucka/css-utility
WATHAN, Adam a Steve SCHOGER. Tailwind CSS - A Utility-First CSS Framework for Rapidly Building Custom Designs [online]. [cit. 2020-04-04]. Dostupné z: https://tailwindcss.com
Joyent, Inc. Node.js [online]. [cit. 2020-04-04]. Dostupné z: https://nodejs.org/en/
OTTO, Mark a Jacob THORNTON. Bootstrap ? The most popular HTML, CSS, and JS library in the world. [online]. [cit. 2020-04-04]. Dostupné z: https://getbootstrap.com/
MICHÁLEK, Martin. Vzhůru dolů - webová kodéřina ze všech stran [online]. [cit. 2020-04-04]. Dostupné z: https://www.vzhurudolu.cz/prirucka/css-utility
WATHAN, Adam a Steve SCHOGER. Tailwind CSS - A Utility-First CSS Framework for Rapidly Building Custom Designs [online]. [cit. 2020-04-04]. Dostupné z: https://tailwindcss.com
Joyent, Inc. Node.js [online]. [cit. 2020-04-04]. Dostupné z: https://nodejs.org/en/
OTTO, Mark a Jacob THORNTON. Bootstrap ? The most popular HTML, CSS, and JS library in the world. [online]. [cit. 2020-04-04]. Dostupné z: https://getbootstrap.com/