UMM AL-QURA UNIVERSITY

Research project

Comparative CSS frameworks

Submitted by

Hatim Al Salmi

Student at Umm Al-Qura University

Email:[email protected]

1
 Abstract

The CSS frameworks are ever hyped and in demand among web developers.
Over years CSS frameworks have grabbed the attention of web developers due
to their dynamic features which facilitate web developers to design websites
efficiently and quickly. However, due to the variety of CSS frameworks
available in the market, it is quite difficult to determine which framework is best
suited to design your web pages for the required project. Developers' preferred
choices for web page designing, Bootstrap, Foundation, Skeleton, Bulma, and
Tailwind CSS have been discussed in this research.

This research is conducted to well analyze the pros and cons of CSS
frameworks based on their profound features. A comparative analysis is
presented based on four performance measures that are popularity and support,
framework size, supported browsers, and responsive designs. This helps
developers while selecting the best option available for the required project
according to their knowledge background and work experience.

It probably is a sweeping statement to say the particular framework stands out

among the rest of the frameworks because each framework is different from the
other concerning their difference in characteristics.

Tailwind CSS however shows the best choice by highly skilled and experienced
developers due to its suitability and compatibility while the bootstrap CSS
framework is popular for responsive page designs. It facilitates developers to

2
‫‪complete their projects at high speed because it has built-in templates and‬‬
‫‪components that are ready to use. Also, it does not require in-depth knowledge‬‬
‫‪of programming and skills. It is user-friendly and easy to understand.‬‬

‫‪Keywords— CSS frameworks, responsive design, Bootstrap, Tailwind CSS‬‬

‫انًهخض‬

‫إٌ أطش ‪ CSS‬يرذأنح ٔيطهٕتح ت‪ ٍٛ‬يطٕس٘ انٕ‪ٚ‬ة‪ .‬ػهٗ يذاس سُٕاخ ‪ ،‬جزتد أطش ‪ CSS‬اَرثاِ يطٕس٘‬
‫َظشا نً‪ٛ‬ضاذٓا انذ‪ُٚ‬اي‪ٛ‬ك‪ٛ‬ح انر‪ ٙ‬ذسٓم نًطٕس٘ انٕ‪ٚ‬ة ذظً‪ٛ‬ى يٕالغ انٕ‪ٚ‬ة تكفاءج ٔسشػح‪ٔ .‬يغ‬
‫انٕ‪ٚ‬ة ً‬
‫َظشا نرُٕع أطش ػًم ‪ CSS‬انًرٕفشج ف‪ ٙ‬انسٕق ‪ ،‬يٍ انظؼة ذحذ‪ٚ‬ذ إطاس انؼًم األَسة نرظً‪ٛ‬ى‬
‫رنك ‪ً ،‬‬
‫طفحاخ انٕ‪ٚ‬ة انخاطح تك نهًششٔع انًطهٕب‪ .‬ذًد يُالشح انخ‪ٛ‬اساخ انًفضهح نهًطٕس‪ ٍٚ‬نرظً‪ٛ‬ى‬
‫طفحاخ انٕ‪ٚ‬ة ٔ ‪ Tailwind CSS ٔ Bulma ٔ Skeleton ٔ Foundation ٔ Bootstrap‬ف‪ْ ٙ‬زا‬
‫انثحث‪.‬‬

‫‪ٚ‬رى إجشاء ْزا انثحث نرحه‪ٛ‬م إ‪ٚ‬جات‪ٛ‬اخ ٔسهث‪ٛ‬اخ أطش ‪ CSS‬تُا ًء ػهٗ ي‪ٛ‬ضاذٓا انؼً‪ٛ‬مح‪ٚ .‬رى ذمذ‪ٚ‬ى ذحه‪ٛ‬م‬
‫يماسٌ تُا ًء ػهٗ أستؼح يما‪ٛٚ‬س نألداء ْ‪ ٙ‬انشؼث‪ٛ‬ح ٔانذػى ٔحجى اإلطاس ٔانًرظفحاخ انًذػٕيح‬
‫ٔانرظاي‪ٛ‬ى سش‪ٚ‬ؼح االسرجاتح‪ٚ .‬ساػذ ْزا انًطٕس‪ ٍٚ‬أثُاء اخر‪ٛ‬اس أفضم خ‪ٛ‬اس يراح نهًششٔع انًطهٕب‬
‫ٔف ًما نخهف‪ٛ‬رٓى انًؼشف‪ٛ‬ح ٔخثشاذٓى انؼًه‪ٛ‬ح‪.‬‬

‫يٍ انًحرًم أٌ انمٕل إٌ إطاس انؼًم انخاص ‪ٚ‬ثشص ت‪ ٍٛ‬تم‪ٛ‬ح األطش ألٌ كم إطاس ‪ٚ‬خرهف ػٍ ا‪ٜ‬خش ف‪ًٛ‬ا‬
‫‪ٚ‬رؼهك تاخرالفٓى ف‪ ٙ‬انخظائض‪.‬‬

‫ٔيغ رنك ‪ ،‬ذُظٓش ‪ Tailwind CSS‬انخ‪ٛ‬اس األفضم يٍ لثم انًطٕس‪ ٍٚ‬رٔ٘ انًٓاساخ انؼان‪ٛ‬ح ٔانخثشج‬
‫َظشا نًذٖ يالءيرٓا ٔذٕافمٓا ت‪ًُٛ‬ا ‪ٚ‬شرٓش إطاس ػًم ‪ bootstrap CSS‬ترظً‪ًٛ‬اخ انظفحاخ سش‪ٚ‬ؼح‬
‫ً‬
‫االسرجاتح‪ٚ .‬سٓم ػهٗ انًطٕس‪ ٍٚ‬إكًال يشاس‪ٚ‬ؼٓى تسشػح ػان‪ٛ‬ح ألَّ ‪ٚ‬حرٕ٘ ػهٗ لٕانة ٔيكَٕاخ‬

‫‪3‬‬
 ‫ إَّ سٓم االسرخذاو‬.‫رطهة يؼشفح يرؼًمح تانثشيجح ٔانًٓاساخ‬ٚ ‫ ال‬، ‫ضا‬
ً ٚ‫ أ‬.‫يذيجح جاْضج نالسرخذاو‬
.‫ٔسٓم انفٓى‬

ٍ‫ح ي‬ٛ‫ انثحث‬ٙ‫ٍ ٔكانح انكشاس‬ٛ‫ٓذف انُظاو إنٗ ذًك‬ٚ .ًٙ‫ انثحث نؼًادج انثحث انؼه‬ٙ‫ َظاو إداسج كشس‬ٙ‫ف‬
‫ذ‬ٚ‫ ذى ذحذ‬، ‫ ذًد يُالشرٓا‬ٙ‫ش انر‬ٛٚ‫ ٔتُا ًء ػهٗ انُرائج ٔانًؼا‬.‫ح‬ٛ‫ح ٔانًان‬ُٛ‫ٓا ٔيشالثح أَشطرٓا انف‬ٛ‫إداسج كشاس‬
‫مٓا‬ٛ‫ ٔذطث‬Tailwind CSS‫د‬ٛ‫م نرثث‬ٛ‫رضًٍ دن‬ٚ ‫ى ٔاجٓح انًسرخذو‬ًٛ‫ نرظ‬Tailwind CSS ‫إطاس ػًم‬
.‫داخم انُظاو‬

1. Introduction
The objective of this research is to facilitate web developers to answer their
concerns about CSS frameworks. Available CSS frameworks provide the same
functionalities but having different features and characteristics. Developers
often face problems while selecting the optimal framework for their projects
since each framework has different characteristics and requirements. This work
is done to gauge the performance and features of CSS frameworks to help
developers to select the best and appropriate frameworks for their projects.
Analyzing and researching for the best available frameworks for designing web
pages and then comparing those frameworks requires the developer's most
precious time and effort. This research helps web developers to save their time
and efforts as it provides a complete analysis and comparison of the most
popular CSS frameworks and facilitates developers to determine the most
appropriate CSS framework for their required projects.

4
Many programmers and app developers rely on several Design Architectural
Patterns to build their app. These patterns have appeared in recent times,
especially in the field of application development such as MVC.

1.1 MVC:
Architectural Design Patterns are trending approaches followed now days by
industry leaders. These models such as MVC have been adopted by application
developers as well. The idea behind MVC is to separate logic from view. In
other words it handles user interface and business logic program separately. The
view layer uses HTML, CSS and JavaScript technologies. MVC stands for
Model-View-Controller is a software design model adopted for developing user
interfaces. MVC breaks down an application into three main and logical
components: the model, the view, and the controller. MVC is frequently in
practice development framework used to create scalable and extensible projects.
MVC is also considered an industry-standard in web development. The MVC
helps to focus on catering to specific development aspects of an application.
The model component handles all operations-related data that has been
exchanged between view and controller components. The view component is
responsible for UI (User Interface) logic. And controller is used as a request
handler. Controller receives request from view and returns the appropriate view
as a response. The controller works on back end while view as a front-end.

The View layer of MVC architecture handles the GUI (graphical user Interface)
of the application. It presents what should be display on the user screen and
application interface. View layer use HTML, CSS, and JavaScript technologies
5
for designing user interfaces. View is the GUI of an application that facilitates
the end users to communicate with application. Users use view and raises HTTP
request. View receives requests from users and communicates with the
controller and model. The View of the web pages is designed using HTML and
CSS tools. CSS facilitates the developers to format HTML pages and styles
them.

1.2 CSS:
CSS the Cascading style sheets are used to format HTML pages. HTML pages
are web pages written in HTML language. CSS decides the format of HTML
pages and how they should be displayed on the web. CSS style caters to the
look and feel of the web pages, including page background, font size, color and
texture, animation, and special effects Temere, B. (2017). CSS can be installed
in any HTML project in anyways. Such as

 Inline style sheet

 Internal style sheet
 External style sheet.

Inline style sheet refers to the direct installation of CSS in HTML. Internal style
refers to adding CSS by using the head tag in an HTML document. While
external style sheet is the third way of installing CSS by an external source or
by importing files locally Muslimin, I. (2017).

6
1.3 CSS Frameworks:
Creating web pages from scratch using HTML is time-consuming and requires a
lot of effort. It eats up a lot of project time and consumes developers’ efforts.
CSS frameworks come in handy and optimize the developing process. It saves
both time and efforts of developers and increases the overall productivity of the
project. Also, CSS frameworks are compatible and updated so it also increases
the efficiency of the site. The web browsers have new updates now and then
concerning their new extensions and supported libraries and mostly CSS
frameworks support and adapt those changes and variations. This improves the
overall efficiency of the websites and keeps sites up to date. Most frameworks
are open-source and freely accessible to the developers that enhance the quality
and efficiency because a lot of developers share their knowledge and
experiences which helps other developers in their work (Laaziri, M.,
Benmoussa, K., Khoulji, S., Larbi, K. M., & El Yamami, A. (2019). There is a
lot of room available for customization as well for the developers while using
frameworks. There are three types of web pages static, dynamic, and
responsive. Static pages are easier to create and maintain as they are fixed and
simple. They cannot be changed in terms of their content and user. Dynamic
websites contain dynamic web pages and are real-time generated. They receive
information and provide results depending upon the users' requests. Dynamic
websites may associate with some database etc. While responsive are dynamic
websites but additional features of optimization. Responsive websites are built
with percentages instead of exact measurements. The idea behind these

7
responsive web pages is to make them optimal for all screens such as tablets,
smartphones, etc. Some responsive web page design developers may find it
difficult to design them, so there is a predefined framework to support
developers in designing pages easily and professionally.

The frameworks are useful for the developer for several reasons

 To significantly shorten the time due to the use of ready-made libraries.

 It is easy to deal with because there is an active developer community
that supports each other.
 Pages designed using these frameworks are supported on most popular
browsers.
 The presence of documentation that shows how to install and use the
framework is one of the most beneficial reasons for the developer.

As each framework has many characteristics and many different cons, the
developer faces a problem, what is the best framework? And what is the most
appropriate framework for the current project? To help the developer choose the
best and most appropriate framework a comparative study has been done
between the most popular frameworks. And analyze the characteristics of each
to make it easier for the developer to determine the most appropriate framework
for the project. Bring up and evaluating the popular frameworks and conversing
their pros and cons of each framework and then associating the frameworks can
help developers to inferior the most appropriate and best framework according
to the requirements of the project and the developer's experience. Hence, this

8
work analyzes and compares the most excellent CSS frameworks and their
features to assist the developer decide the foremost appropriate framework and
why the system was chosen.

In the remainder of this paper, Section (2) gives the overview of the literature of
some state-of-the-art frameworks in this field, and then in Section (3)
methodology of this research work is presented. The methodology used to
define the appropriate frameworks. In section (4), a comparison of CSS
frameworks at different aspects is presented .Section (5) discusses the findings
as a result of analysis and comparison of frameworks. Section (6) implements
and designs a webpage with the Tailwind CSS framework. Finally, the
summary is included at the end as a conclusion.

2. Literature Review

2.1 CSS Frameworks:

There are nearly twenty frameworks ready for use by developers. Several
techniques are used to test responsive pages.

2.1.1 Bootstrap:
Twitter introduced Bootstrap and nowadays it is the most preferred choice of
developers in the web community. It is the most popular HTML, CSS, and JS
library for web designing and development. Bootstrap provides quality features
and among them is responsiveness. Bootstrap creates responsive websites which
means the elements are organized depending on the width of the user screen or
the browser. This framework uses 12 columns and allows 4 types to display
9
different screens. It includes other components such as forms, buttons, progress
bar, and Navbar. The bootstrap provides more customization than predefined
build-in components. It provides more space for the developer for customization
according to his requirements. It provides Js components for dynamic web
pages, less preprocessor dependency and more room for customized style for
components (Laaziri, M., Benmoussa, K., Khoulji, S., Larbi, K. M., & El
Yamami, A. (2019).

Bootstrap is way easier, to begin with, because it does not require a lot of skills
and knowledge to start with. That is why it is the best choice of its new
developers to start their learning and mast their skills. Bootstrap contains
components such as buttons, alerts, progress bar, and dropdown menus. It
provides enough components to developers to start from designing interfaces.

Additionally bootstrap provides SASS and LESS features. SASS stands for
Syntactically Awesome Style sheets while LESS is for Leaner CSS Style sheets
and both are CSS preprocessors. These special extensions make designing
easier and enjoyable. These extensions are compiled into CSS to acknowledge
by modern browsers. Also Bootstrap provides support devices of display
resolution from 480 pixels to 1200 pixels. Bootstrap uses a 12-column grid
system for vertical representation. Bootstrap has more reach to the developers as
compared to another framework (Jain, N. 2014). It provides customization for
components by assigning predefined variables (Temere, B. 2017).

10
 2.1.2 Foundation:
The foundation is another most in-demand CSS framework in web
development. The founder of the Foundation is ZURB. Foundation is an
advanced responsive front-end framework for designing user interface tools like
HTML and CSS. Foundation provides the feature of integrating or merging the
old features with the latest features of projects. The Foundation framework uses
a SASS preprocessor that uses predefined variables of CSS (Laaziri, M.,
Benmoussa, K., Khoulji, S., Larbi, K. M., & El Yamami, A. (2019).

The Foundation framework is the second most in-demand and popular

framework. It is adopted by professionals who can better deal with the design
files from scratch because it does not contain UI components. The foundation
uses Ruby and SASS, SCSS for this purpose. At the same time Foundation
considered as a most difficult and deep framework when compared to bootstrap
and Skeleton (Pasha, M. R. (2015). This framework is suggested for training
projects, business domain and it has a relatively more reach than other
frameworks (Jain, N. 2014). Foundation is designed with a Mobile-first feature
which means it is designed initially for mobile and tablet screen web pages and
then reconfigured for large screens. Bootstrap also provides the same feature.
Foundation syntax is easier to understand and code (Temere, B. 2017).

2.1.3 Skeleton:
The next framework to discuss here is the Skeleton. Skeleton framework is a
lightweight and easy-to-code framework. It is smaller in size and limited
function framework so suggested for smaller projects. Skeleton is a responsive
11
mobile-first 12 column fluid grid, consisting of rows and columns. Skeleton
supports devices with a resolution of 960 pixels (Pasha, M. R. (2015). Skeleton
is fully functional and used for all the latest browsers including the SASS and
LESS supported extensions.

2.1.4 Bulma:
The Bulma is a free and open-source CSS framework. Like the Skeleton
framework, it is also a lightweight framework. It provides ready-to-use front-
end components which can be integrated to design responsive web interfaces.
The amazing feature of Bulma is the Flexbox support. It makes the use of
Flexbox easier. The worth mentioning feature of Bulma is the customization
feature using SASS and variable (Thomas, J., Potiekhin, O., Lauhakari, M.,
Shah, A., & Berning, D. (2018). The Bulma framework is purely CSS-based
and supports CSS files only without the need for Js files. It is the fully modular
and responsive framework provided with 9 different sizes, including 5 basic and
4 additional sizes ( Harsch, N. 2019).

2.1.5 Tailwind CSS:

Tailwind CSS is another worth mentioning web development framework. It is a
utility-first responsive CSS framework. It provides the developer full privilege
for customization and is relieved from bounding previously build designed. This
framework works on the minimal level of CSS tools and classes to build their
complete single design. It does not provide any pre-defined components.
Tailwind is an advanced framework for using CSS features without leaving

12
HTML behind. Over the past few years, Tailwind CSS has gained immense
popularity in the web community and is gaining attention from many designers
and developers. The Tailwind CSS framework uses specific constraints where
classes’ utility represents CSS style definitions.

Tailwind is also welcoming for new developers who are keen on learning
tailwind CSS and mastering it. In other frameworks, the inexperienced
developers face challenges for dealing with semantic classes, tailwind takes care
of this problem by introducing Tailwind CSS agreements, which leads to better
communication between teams during the developing process. Classes with new
semantic cannot be overwritten by predefined classes. Rather they are separated
from utility classes as they are written in HTML. This helps in maintaining the
consistency of the design. This methodology is very effective as the effects are
only activated directly within the current markup HTML and not in CSS files in
classes, in which a change in them may lead to changes in other related files. If
the developer requires verification of the current file only, there is no need to
verify through CSS files (Klimm, M. C. 2021). Tailwind is a low-level CSS
framework to help develop custom user interface styling very fast.

Tailwind CSS helps support 5 different sizes and styles according to different
screen sizes. The smallest size is the mobile-first breakpoint which by default is
the active breakpoint. So when adjustment is due it is modified in that default
main point and then all the larger points Hernandez, E. (2020).

13
2.2 Responsive Design:
Responsive web pages are referred to as web pages that are designed by
percentages instead of exact measurements. Percentile values are used instead
of static values to design components of the web page. Mostly responsive
designs are made for smartphones and tablets and then these designs are
reconfigured for larger screens. Initially, it is designed for one page but now it is
possible to design one page with multiple styles (Jain, N. 2014).

2.3 Related Work:

A thorough study of state-of-the art literature is conducted in order to analyze
the performance measures for CSS frameworks. Many papers discussed and
compared CSS frameworks according to different criteria. According to Nadine
Harsch the price and the license are all free and can be used for commercial and
personal use, which means there is no preference for one of them over the other.
Moreover, rated Bootstrap as the best because it uses Less and Sass for some
versions. Semantic UI comes second because it supports the use of LESS, with
the ability methods to Sass. Materialize and Bulma only use Sass, so they are
weaker than previous frameworks.The best framework of Responsive Design
support is the Bulma framework because it offers 9 different sizes, 5 basic and 4
additional ones. Second, the Bootstrap framework provides 5 different sizes.
Third, the Materialize framework provides 4 different sizes, while the worst is
the Semantic UI framework, where there is no clear information related to the
sizes of the screens. In the field of performance and speed, evaluation
experiments were carried out using each framework separately. Calendar

14
content was downloaded quickly from everyone if they were all with the same
high efficiency. The Materialize framework showed the superiority of the
Materialize framework for its support of many versions, coming second and
third frameworks for Bootstrap and Semantic UI, for supporting modern
browsers only for different operating systems. Finally, Bulma supports modern
browsers only, without the old ones. Regarding components provided Bootstrap
is best at providing 24 components, then Semantic UI with 16 components, then
Materialize with 11 components, and lastly Bulma with 7 components only.
Bootstrap provides many useful lessons with great content and in different
platforms, so it is best that Materialize comes second by providing many lessons
with a search feature to facilitate the provision of information, this feature is not
available in the Semantic UI and Bulma frameworks, so each of them comes
third and fourth, respectively. Bootstrap firstly provides its own themes and
how to use them, as well as ways to buy and sell themes, as well as Materialize
provides ways to buy and sell themes without explaining their use, so it comes
second, as for Semantic UI and Bulma they provide template themes only and
there is no way to buy and sell them.

Community is available for all frameworks the means of communication

Semantic UI and Materialize offer Gitter communication so they are better at
community support to a lesser degree Bootstrap allows Internet Relay Chat.
Finally, Bulma does not provide any means of communication at all. Regarding
Developer support, the Bootstrap comes first where the GitHub repository is
active and provides a blog for developers. Second is Materialize, where the

15
GitHub repository is active and provides a Gitter communication feature. Third
is the Bulma where the GitHub repository is active and provides a book with
explanations. It provides an email or Gitter communication feature to help
developers. The disadvantage is that the GitHub repository is not active.
Bootstrap is the easiest to use and suitable for beginners’ developers. Semantic
UI and Materialize are aimed at experienced developers and not suitable for
beginners. Bulma is for experts only and does not provide ready-made
JavaScript functions. The expert must write the complete code. All of the
frameworks are easy to install, except Semantic UI, it has many problems and it
didn't work very well Regarding the Integration, all are easy in Integration,
except Bluma. There are some difficulties. Bootstrap and Materialize is the best
overall ( Harsch, N. 2019). Majida Laaziri says bootstrap provides the option to
the developer choose Less or Sass preprocessor while Foundation do not. The
bootstrap framework is best option rather than Foundation when developers
need more multiple options to support many browsers. The Foundation
framework support direction right to left this advantage is very appropriate to
pages used different languages. The bootstrap framework is best option rather
than Foundation when developer’s need more multiple options to select themes.
The bootstrap framework is suitable more than Foundation. for when the
developers has more questions because the bootstrap have a large community
support to answer this questions. The Foundation framework is better than
bootstrap In case developers want easy used when environment installation or
during development not required extra library To use the features like

16
responsive pages (Laaziri, M., Benmoussa, K., Khoulji, S., Larbi, K. M., & El
Yamami, A. (2019). Befekadu Temere says Bootstrap and Foundation have
many common features: they both rely on the SASS CSS preprocessor. One of
the most important comparison factors between Bootstrap and Foundation is the
web page loading speed, which is the time it takes to fully load the pages
including the source files. In (Temere, B. 2017) compared the download speed
with 3 tools, the first of which is the Pingdom tool, as it showed that the entire
download speed of the particular page reached (353ms) for the Bootstrap
framework, while the Foundation framework reached (358ms) for the same
page and the same tool, which means the superiority of the Bootstrap
framework. The other tool is GTmetrix, where it compares a page size of 1.3
megabytes and a download speed of 1.2 seconds for Bootstrap with another
page of size of 2.54 megabytes and a download speed of 4.2 seconds, and it is
clear that the Bootstrap framework is superior. Page Speed Insights tool, which
showed the superiority of the Bootstrap framework over the Foundation
framework on both sides of smart devices or office devices, as the percentage of
efficiency of the page designed under the Bootstrap framework reached 53
percentage calculator for smart devices and 55 percentage calculator for the
office, on the other side, the efficiency rate for pages designed under the
Foundation framework was 50 percentage calculator for smart devices and 54
percentage calculator For the office. Bootstrap and Foundation give the ability
to download all package or specific part. They all have the element return
feature and use the grid system. According to GitHub and Stack Overflow, the

17
Bootstrap framework outperformed Foundation by the number of stars by nearly
4 times and the number of downloads by nearly 10 times in relation to GitHub.
As for the searches within StackOverFlow, the results for Bootstrap were 3
times the Foundation, which means that Bootstrap is more popular than the
Foundation (Temere, B. 2017).

The Sneha, Dashrath compared file size and download speed: In UIkit, the js
files are larger than the bootstrap framework because it focuses on the code
instead of the CSS files. Whereas, UIkit is smaller than Bootstrap in CSS file
size. Therefore, page loading speed designed by UIkit framework is better than
bootstrap pages. It also provides better stylies than bootstrap framework. One of
the features that distinguish the UIkit framework from the bootstrap framework
is that it provides an autocomplete code while typing feature. It can be said that
the UIkit framework is less common, but more efficient and professional than
the bootstrap framework, and it is also best for large and small projects alike.
Bootstrap and UIkit framework structure is similar easy, legible and
understandable to developers (Velankar, S., & Mane, D. (2017).

3. Methodology
This section describes the procedure which is adopted to compare the popular
CSS framework from the last few years including Bootstrap, Foundation,
Skeleton, Bulma, and Tailwind CSS. The comparison of these frameworks is
based on some features derived from the literature review. Performance criteria
are based on these features. The popularity and support, framework size,
supported browsers, and responsive design supported by frameworks. These
18
features are selected based on their number of occurrences in the literature
review. Analysis of characteristics of each framework, exploring their pros and
cons, and comparing it to determine the most appropriate framework based on
the type of project. Results are discussed concerning each framework and their
key points are highlighted. A step-by-step guide is provided to Tailwind CSS
and also login page is designed with the help of that Tailwind CSS as a form in
the end.

4. Comparison Popular CSS Frameworks

4.1 Popular and Support:

The latest trends can play a very important in calculating the popularity and
support of the There are several factors for gauging the popularity and
supporting the framework, including interaction in the GitHub platform to
measure popularity or last commit to provide support by the framework. The
second factor for measuring popularity is the number of Stack Overflow topics
for this year and the last factor is the Google trend to determine the percentage
of searches within Google.

The statistic showed a great advantage for the bootstrap framework with 149k
stars inside GitHub, and the latest update was found this week also the most in
the side of Stack Overflow topics with 25,823 topics. And a rate of more than
75% in Google searches compared to other frameworks. The Bulma framework
comes second in terms of the number of likes inside the GitHub, with 43K likes,
the last update of this month, while the fourth in terms of Stack Overflow

19
topics, with 729 topics, and third in Google searches. Tailwindcss, which got
second place in several likes in GitHub with 38.6K and last update this week
and second in several Stack Overflow topics while finished fourth in Google
search. Foundation framework comes fourth with 29k star likes inside GitHub
and the latest update last month with several topics inside Stack Overflow 866
topics. Skeleton framework finally comes with 18.2k star likes inside GitHub
and the latest update last month with 160 topics inside Stack Overflow.
Altogether the popular Bootstrap framework can be arranged first and
Tailwindcss second in order.

Sr. Frameworks Github Last Commit Stackoverfl Google

Star ow Topics Trend
(2021)
1 Bootstrap 149k star March 17, 2021 25,823 1
2 Foundation 29k star February 16, 866 2
2021
3 Skeleton 18.2k star December 29, 160 5
2014
4 Bulma 43k star Match 5, 2021 729 3
5 Tailwind CSS 38.6k star March 22, 2021 1157 4
Table 1 comparison frameworks in the GitHub platform

4.2 Framework Size:

Table 2 depicts the stats for all the frameworks in terms of their sizes. The final
size of CSS file is very important because it affects the page loading speed for
20
the end-user. Because smaller the file size, the faster the page loads. The
frameworks are compared for each the original, the minified version and
compressed files. Minified version is the one in which the extra icons and
spaces are removed.

Sr. Frameworks Size Size Size

(Uncompressed) (Minified) (Gzipped)
1 Bootstrap 187 KB 147 KB 20 KB
2 Foundation 90 KB 64 KB 12 KB
3 Skeleton 5 kb 11.5 kb 2.7 kb
4 Bulma 225 kb 190 kb 25 kb
5 Tailwind CSS 477 kb 350 kb 58.8 kb
Table 2 comparison frameworks size

The smaller framework is a Skeleton framework with a size of 5 kb for the

original file, 11.5 kb for the Minified version, and 2.7 kb for the version of the
zip file. Second, is the Foundation framework with a size of 90 KB for the
original file, 64 kb for the Minified version, and 12 kb for the compressed
version. A third bootstrap framework with a size of 187 KB for the original file,
147 kb for the Minified version, and 20 kb for the zip file. Bulma framework is
fourth with a size of 225 KB for the original file, 190 kb for the Minified
version, and 25 kb for the zipped file. Fifth is the tailwindcss framework with a
size of 477 kb for the original file, 350kb for the Minified version, and 58.8 kb
for the zip file version.

21
According to the table readings the Skeleton is the best framework because it
produced the minimal sized CSS file as possible. After Skeleton there is
Foundation framework. Tailwind CSS is also consider as second best because it
eliminates unused classes and shrinks the overall size of file. For this purpose it
uses PurgeCSS tool. After using PurgeCSS tool the size of Tailwind CSS file
shrink to 13kb.

4.3 Supported Browsers:

Frameworks considered in this research provide full support for state-of-the-art
browsers such as Chrome, Safari, Firefox, and Edge with the latest releases. As
for the IE browser, Foundation and Skeleton support the browser, while
Bootstrap and Bulma are constrained or limited. The Tailwindcss framework
does not support this browser. But all the frameworks mentioned above do
support the basic browsers.

Sr. Frameworks Chrome Safari Firefox Edge IE

1 Bootstrap X X X X Limited
2 Bulma X X X X Limited
3 Foundation X X X X X
4 Skeleton X X X X X
5 Tailwind CSS X X X X Not
Table 3 comparison frameworks in supported browsers

22
4.4 Responsive Design:
Frameworks for responsive designs provide different screen sizes. The Bulma
framework provides 9 different sizes in which 5 are basic and 4 extras. Basic
sizes include small, medium, large xlarge 2xlarge. Secondly, Skeleton and
tailwindcss provide 5 different sizes: small, medium, large xlarge 2xlarge.
Fourth, Bootstrap offers 4 different sizes, small, medium, large and xlarge.
Finally, the Foundation framework comes in 3 different sizes, which are small,
medium, and large. Overall, Bulma showed the best, followed by Skeleton and
Tailwindcss.

Sr. Frameworks Sm Md Lg xl 2xl

1 Bootstrap X X X X Not
2 Bulma X X X X X
3 Foundation X X X Not Not
4 Skeleton X X X X X
5 Tailwind CSS X X X X X
Table 4 comparison frameworks in responsive design

5. Discussion and Results

Each framework has features and characteristics that distinguish it from other
frameworks. This section mentions all five frameworks and their key features.

23
Sr Framework Popularit Framewor Supporte Responsiv Rankin
. s y And k Size d e Design g
Support Browsers
1 Tailwind     1
CSS
2 Skeleton     2
3 Bootstrap     2

4 Foundation     4

5 Bulma     4
Table 5 Ranking of CSS Frameworks

5.1 Bootstrap Framework:

Bootstrap framework is the first choice of many developers because it does not
require any high-level programming and development skills and experience.
Developers with limited experience and knowledge can make a very attractive
and responsive website in a limited period. Because the reason is Bootstrap
have many build-in ready-to-use libraries and components which help
developers to complete the project easily and at a high pace. Bootstrap has a
huge community that supports developers in solving problems that they face
during the development process.

24
5.2 Foundation Framework:
The use of the foundation framework is high in demand however it is less
popular than bootstrap but still it is recommended by professionals for
enterprise applications and e-commerce site development. Foundation
framework supports responsive web pages and creates out-class email templates
for designing marketing campaigns. The frameworks started gaining the interest
of developers and the also framework provides online training courses for
interested candidates. Foundation framework privilege developers by giving full
control over the user interface, so it has more room for customization.

5.3 Bulma Framework:

Bulma considers the most powerful frameworks for responsive web designs
suitable for smartphone size screens. This feature strongly distinguishes it from
other popular frameworks. Bulma is the best choice for developers who are
interested in fully responsive web designs. It has a huge community of
developers and recommends for owners of start-ups and service providers for
smart devices.

5.4 Skeleton Framework:

Skeleton is a small lightweight responsive framework and is recommended for
small and simple web pages. It is usually considered for small websites and
projects which do not require heavy communication. It is easy to learn and
compatible with smart devices because of its small size. It does not reduce the
overall efficiency of mobile phones.

25
5.5 Tailwind Framework:
The most prominent and proficient feature of the Tailwind CSS framework
which differentiates it from the rest of the frameworks is the power of high
customization. Tailwind provides developers the full freedom of customization
of web pages without the dependency of pre-customized styles. It is the most
trending framework recorded on maximum commits on Github. Tailwinds do
not facilitate the dependency of one web page to the other. It does not affect the
modification of one page to any other page. Also, Tailwind speeds up the
development process as it excludes the CSS style sheets. By excluding CSS
features Tailwind reduces the overhead by reducing the size of the final file to
the maximum possible size. The idea of Tailwind is to eliminate the CSS styling
and stick to HTML basics. Tailwind is optimal for producing lightweight web
designs but also facilities developers to build fully customized and unique
pages.

6. Tailwind CSS:
In the Research Chair Management System for the Deanship of Scientific
Research. The system aims to enable the Research Chairs Agency to manage its
chairs and monitor its technical and financial activities. Based on the results and
criteria discussed, tailwind CSS Framework was determined to design the user
interface.

26
6.1 Guide to install Tailwind CSS

A simple 4 step guide to install Tailwind CSS is presented in this coming

section. This guide is for the Laravel project.

Step 1: Tailwind CSS Installation

Firstly, you need to begin with Tailwind CSS installation. Tailwind CSS can be
installed by using different ways such as using npm, Yarn, or CDN, etc.
Installing tailwind by npm is the best option for the Laravel project. To install
Tailwind CSS a command needs to enter in the root of the application.

Command:

npm install tailwindcss

Figure 1 Tailwind CSS Installation

Step 2: Import Tailwind CSS

After tailwind installation, you need to import it to the required project. Import
Tailwind CSS in the app.css file and replace the original file with Tailwind
base, components, and utility styles.

27
Command:

@import ‘tailwindcss/base’;

@import ‘tailwindcss/components‘;

@import ‘tailwindcss/utilities‘;

Figure 2 Import Tailwind CSS

Step 3: Tailwind CSS Configuration

After installation and importing, tailwind CSS needs to be configured. As an

output tailwind.config.js file is generated at the backend. The configuration file
is used for settings and customization.

Command:

npx tailwind init

28
 Figure 3 Tailwind CSS Configuration

Step 4: Include Tailwind to Laravel Mix

In the last step, we need to tell Laravel to use the tailwind CSS. So, include
webpack.mix.js to use tailwind CSS.

Command:

const mix = require(‘laravel-mix’)

require(‘laravel-mix-tailwind’)

Figure 4 Include Tailwind to Laravel Mix

6.2 Implementation:
In the next coming paragraphs, a login interface is created using Tailwind CSS.
For a detailed understanding, screen images demonstrate the commands and
their outcomes.

29
 Figure 6 Snip code for form using Tailwind CSS
W-full keyword is used to set the width of an element. Then mention command
is a combination of multiple variables having unique meaning. sm:max-w-md
declares small screen with max width of an element to medium. mt sets top
margins to 6, px inserts padding on left and side to 6 and py refers to the top and
bottom padding. The value of py here is 4. The background is set to white and
overflow-hidden is used here to handle excess elements within the hidden
elements. sm:rounded-lg controls the border radius of an input.

Figure 7 Snip code for input using Tailwind CSS

30
The input has been specified as border-gray-300 to make the border light gray.
Focus: border-indigo-300 to change the border at focus to input and make it a
light indigo color. focus: ring to display the ring around the input The moment
of focus .focus: ring-indigo-200 Displays the ring around the input the moment
of focus with a light indigo color. focus: ring-opacity-50 to specifically change
the opacity ring the moment of focus on input. rounded-md to control the
border-radius of input with this property border-radius: 0.375rem. shadow-sm to
control the shadow of input with this properties 0 1px 2px 0 rgba (0, 0, 0, 0.05).

Figure 8 Snip code for the label using Tailwind CSS

The first element is a block that means the label takes full width without any
element beside it. Font-medium This element controls the font-weight of the
label text-sm This element control the font size for the label. text-gray-700
makes the font color dark gray.

31
 Figure 9 Snip code for span using Tailwind CSS.

Span is often used for text, either to format or color the object. ltr: ml-2 to make
margin-left -2 (margin: 0.5rem) in case the writing from left to right. rtl: mr-2 to
make margin-left -2 (margin: 0.5rem) in case the writing inside input from right
to left. text-sm This element controls the font size for the label. text-gray-600
makes the font color dark gray.

Figure 10 Snip code for the button using Tailwind CSS.

32
rounded-lg control the border radius of input with this property border-radius:
0.5rem. px-3 would add 0.75rem of padding to the left and right of an
element.py-2 would add 0.5rem of padding to the top and bottom of an element.
Width utilities refer to controlling the width of an element. w-full to make width
with this property’s width: 100% of a button. Height utilities refer to controlling
the height of an element. h-full to make Height with this property’s width:
100% of a button. The result looks like figure 11 represents Login Page. Its
content form is shown In figure 6, the Input type is shown in figure 7, the label
is shown in figure 8, the span shown in figure 9, and the button type shown in
figure 10.

Figure 11 UI of loginPage

7. Conclusion
A detailed discussion on the latest CSS framework is presented in this research
work. Each framework has its pros and cons which differentiate them from one
and other. This research is conducted to compare and contrast the latest
available CSS frameworks based on some performance measures such as

33
popularity and support, framework size, supported browsers, responsive design,
etc. This research helps web developers to better understand their choice of
framework for the required project. The developer’s choice depends on the
developer's experience and project requirements. The developer tries to
determine the most appropriate framework which is easy to code and performs
efficiently according to project requirements. This research helps web
developers in this regard. A tailwind CSS guide is also provided for developers
to provide a short hands-on experience. Results and discussion also clarify the
objective of the research by giving a clear idea of CSS frameworks.

References:

Harsch, N. (2019). Structured classification and evaluation of current Web UI

Frameworks. (PhD thesis). Ulm University.

Hernandez, E. (2020). Developing a website solution for reko model.

Jain, N. (2014). Review of different responsive CSS front-end frameworks.

Journal of Global Research in Computer Science, 5(11), 5–10.

Klimm, M. C. (2021). Design systems for micro frontends - An investigation

into the development of framework-agnostic design systems using Svelte and
Tailwind CSS.

Laaziri, M., Benmoussa, K., Khoulji, S., Larbi, K. M., & El Yamami, A. (2019).
Analyzing Bootstrap and Foundation front-end frameworks: A comparative

34
study. International Journal of Electrical & Computer Engineering (2088-8708),
9(1).

Muslimin, I. (2017). Materialize CSS for Designing a Web of Islamic Lecture

Information and Resumes.

Pasha, M. R. (2015). Responsive web design: Present and future. (MS thesis).
Bahria University.

Temere, B. (2017). Responsive web application using Bootstrap and

Foundation: Comparing Bootstrap and Foundation front-end frameworks.

Thomas, J., Potiekhin, O., Lauhakari, M., Shah, A., & Berning, D. (2018).
Creating interfaces with Bulma.

Velankar, S., & Mane, D. (2017). Comparative analysis of Bootstrap and UIKit
framework. International Research Journal of Engineering and Technology
(IRJET), 4(6), 4–7.

35