Responzivní webová rozhraní s využitím CSS frameworku Bulma

Jakub BURDA

Bachelor's thesis

Responsive web interfaces using the CSS framework Bulma.

Abstract:

Cílem bakalářské práce je představení možností využití CSS frameworku Bulma, který má usnadnit a urychlit kódování webových stránek nebo webových aplikací. Bulma je open source CSS framework založený na CSS Flexible Box Layoutu (tzv. flexboxu) a CSS Grid Layoutu (tzv. gridu), jehož použitím docílíme automatického uspořádání responzivních prvků v závislosti na velikosti obrazovky, webová stránka se stává plně responzivní. Framework Bulma je knihovna CSS tříd, kterou je možné použít buď jako předkompilovaný .css soubor nebo jako .sass soubor, aby bylo možné framework přizpůsobit potřebám webdesignéra. V případě použití .sass souboru je pak Bulma plně modulárním frameworkem. V teoretické části bakalářské práce budou vymezeny základní pojmy úzce souvisejicí s frameworkem Bulma (např. flexbox), uvedeny jeho vlastnosti, představeny technologie související s frameworkem a popsána instalace potřebného softwaru pro práci s technologií Bulma. Dále pak budou představeny další typy CSS frameworků jako Bootstrap, Foundation a Pure k porovnání s frameworkem Bulma a následnému zpracování výhod a nevýhod samotného frameworku Bulma. V praktické části bakářské práce bude zhotovena responzivní webová stránka pomocí frameworku Bulma k představení možností, které tato technologie přináší a zároveň také k demonstraci praktických výhod a nevýhod frameworku Bulma.

Abstract:

The point of bachelor thesis is presentation of utilisation options CSS Bulma framework, which is meant to make coding website or web applications easier and faster. Bulma is open source CSS framework, which is based on CSS Flexible Box Layout (a.k.a. flexbox) and CSS Grid Layout (a.k.a. grid), which we use to achieve an automatic arrangement of responsive elements depending on the screen size, website is therefore fully responzive. Framework Bulma is library of CSS classes, which can be used like precompiled .css file or .sass file so that the framework can be adapted to the needs of a web designer. In case of use .sass file is Bulma fully modular framework. In the theoretical part of bachelor thesis will be defined basic concepts, which are closely related with framework Bulma (e.g. flexbox), listed his properties, introduced technologies related to the framework and description of the installation of the necessary software for work with Bulma technology. Then will be introduced other types of CSS framework like Bootstrap, Foundation and Pure to compare with Framework Bulma and subsequent processing advantages and disadvantages of the Bulma framework. In the practical part of the bachelor thesis will be made a responsive website with help of framework Bulma to introduce possibility that this technology brings and at the same time also to demonstration of practical advantages and disadvantages Bulma framework.

Keywords

HTML, CSS, Javascript, framework, Bulma, front-end, vývojové prostředí

Language used: Czech

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

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