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.
Anotace v angličtině
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.
Klíčová slova
HTML, CSS, Javascript, framework, Bulma, front-end, vývojové prostředí
Klíčová slova v angličtině
HTML, CSS, Javascript, framework, Bulma, front-end, Integrated Development Environment
Rozsah průvodní práce
87
Jazyk
CZ
Anotace
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.
Anotace v angličtině
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.
Klíčová slova
HTML, CSS, Javascript, framework, Bulma, front-end, vývojové prostředí
Klíčová slova v angličtině
HTML, CSS, Javascript, framework, Bulma, front-end, Integrated Development Environment
Zásady pro vypracování
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. Bulma je open source CSS framework založený na CSS Flexible Box Layoutu (tzv. flexboxu), jehož použitím docílíme automatického uspořádání responzivních prvků v závislosti na velikosti obrazovky, webová stránka je tedy 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, CSS flexbox), uvedeny jeho vlastnosti 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 Semantic 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.
Zásady pro vypracování
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. Bulma je open source CSS framework založený na CSS Flexible Box Layoutu (tzv. flexboxu), jehož použitím docílíme automatického uspořádání responzivních prvků v závislosti na velikosti obrazovky, webová stránka je tedy 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, CSS flexbox), uvedeny jeho vlastnosti 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 Semantic 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.
Seznam doporučené literatury
Bulma.io: Bulma: the modern CSS framework that just works. [online]. [cit. 2022-03-30]. Dostupné z: https://bulma.io/
Bulma.io: Documentation: Everything you need to create a website with Bulma [online].
[cit. 2022-03-30].
Dostupné z: https://bulma.io/documentation/
Mobiosolutions: What is Bulma ? Advantages & disadvantages of using Bulma [online].
[cit. 2022-03-30].
Dostupné z: https://mobiosolutions.com/what-is-bulma-advantages-disadvantages-of-using-bulma/
Devmountain: Bulma CSS: What It Is and Why It's a Framework That Developers Love [online]. [cit. 2022-03-30].
Dostupné z: https://blog.devmountain.com/why-bulma-css-could-be-your-new-favorite-framework/
HubSpot: The Bulma CSS Framework: What It Is and How To Get Started [online].
[cit. 2022-03-30].
Dostupné z: https://blog.hubspot.com/website/bulma-css
Bulma.io: Bulma: the modern CSS framework that just works. [online]. [cit. 2022-03-30]. Dostupné z: https://bulma.io/
Bulma.io: Documentation: Everything you need to create a website with Bulma [online].
[cit. 2022-03-30].
Dostupné z: https://bulma.io/documentation/
Mobiosolutions: What is Bulma ? Advantages & disadvantages of using Bulma [online].
[cit. 2022-03-30].
Dostupné z: https://mobiosolutions.com/what-is-bulma-advantages-disadvantages-of-using-bulma/
Devmountain: Bulma CSS: What It Is and Why It's a Framework That Developers Love [online]. [cit. 2022-03-30].
Dostupné z: https://blog.devmountain.com/why-bulma-css-could-be-your-new-favorite-framework/
HubSpot: The Bulma CSS Framework: What It Is and How To Get Started [online].
[cit. 2022-03-30].
Dostupné z: https://blog.hubspot.com/website/bulma-css