Analyzing bootsrap and foundation font-end frameworks: a comparative study

ABSTRACT


INTRODUCTION
Nowadays, web development is much simplified because of the emergence of different front-end frameworks. In recent years, dozens of frontend frameworks have become available to web developers. Front-end CSS development frameworks make the web development process faster, simpler and more standards-compliant. And help build a well-structured, maintainable and up-gradable website. Thus they also help the developer to save a lot of time because there is a multitude of already prebuilt elements ready to use. Each framework has its own strengths and weaknesses, and specific application areas, allowing the developer to choose one according to the needs of his specific project [1]. In addition, most of the options are modular, allowing to use only the components that the developer needs, or even mix components from different frameworks. There are so many framework choices but many developers are attracted to the most popular ones like Bootstrap and Foundation.
The authors [2] state in their study of Responsive Web Design Frameworks that front-end frameworks reduce the workload of developers and shorten a front-end development process. These frameworks help developers to quickly create a website. So they insist that the Bootstrap framework and Foundation have become the most remarkable frameworks by developers and most used. The author [3] in his article on Responsive Web Design with the Bootstrap Framework prefers to work with the bootsrap framework because it is a stylish, intuitive and powerful front end. Bootstrap has a standard set of classes that allow developers to quickly build applications. Bootstrap is the most popular html, css and javascript framework that offers flexibility in the use of tools without much knowledge of languages. Therefore, save time from coding heavy code. The author [4] confirms that Bootstrap uses LESS CSS, is compiled via Node, and is managed via GitHub to help developers make awesome things on the web. And Foundation is an advanced and responsive front-end framework. Foundation 3 is built with Sass, a powerful CSS preprocessor, which allows you to develop faster.
Studies have mounted that it has a debate on the choice of front end framework, in order to make the selection process easier, this article focuses on an effective analysis between the Bootstrap and Foundation frameworks which are the most used and popular. The reminder of this paper is presented as follow: section 2 presents a literature review about the subject, then we present trough section 3 our proposed model dedicated to the evaluation of web development frameworks. Section 4 presents a discussion of the obtained results, to sum up with a conclusion in section 5.

LETARATURE REVIEW 2.1. Front-end framework
The framework are common tools in the process of creation of web sites. There exist essentially two types of frameworks : front-end and back-end as shown in Figure 1, (this distinction is established according to whether the framework is for the presentation layer or the application/logical layer). The back-end of an application (a set of files with libraries to access databases, model structures, session management). There is many Back-end frameworks (i.e. Zend Framework, Symfony, Laravel, CakePHP ...) [5], [6].
A front-end framework is a library to ensure structure and graphical consistency very quickly. Structure in columns, typography (font, size, title, paragraph), components (button, form, dropdown, carousel, tab, tooltip, alert, modal), states, responsive ; they all bring a number of tools to save a lot of time in the creation of website [7]. Front-end frameworks typically consist of a package consisting of a standard code file and folder structure (HTML, CSS, JS documents, etc.).
The HTML language structures the data, the CSS stylizes this data to make them visually comprehensible and aesthetic, the JS (Javascript acronym) allows to produce animations and interactions improving the user experience. The usual components are [4], [8] : a. CSS source code to create a grid: this allows the developer to position the different elements that make up the design of the site in a simple and versatile way. b. Typography style definitions for HTML elements. c. Solutions for browser incompatibility cases so that the site displays correctly in all browsers. d. Create standard CSS classes that can be used to stylize advanced components of the user interface.  We present blow the advantages of using a front-end framework derived from [5], [9] studies: 1. Time saving In the case of realization of a new project, the front-end developer must evaluate the development time but often the time presses. So thanks to the front-end framework the developer will not have to start from scratch. Rather than encode and create all the components of the page, it will have the task of assembling the preformatted elements and proposed by the framework. It's like eliminating a step in the front-end developer workflow.

Standardization and performance
A site developed using a framework will be efficient because the framework is optimized for the multiple web browsers of the market.

Scalability and update
The framework is regularly updated to comply with the latest web standards but also to offer relevant modules and up-to-date. Using a framework, we benefit from a set of beneficial improvements for the construction and implementation of a website that must comply with the latest standards.

Free and Open
Front-end frameworks are (at least currently) free and open. This means that they can be used without paying a license and being able to modify them at will. This is at least the case for Bootstrap and Foundation.

Reliability
The most popular frameworks by hundreds of thousands of developers who attest to the quality and reliability of the tool. The bugs are almost non-existent. In short, using a framework eliminates a sometimes laborious step that is to design the visual bases of the site and create different modules of zero. In addition to saving time, it provides a proven, robust, and scalable structure tested by thousands of users.

Bootsrap
Bootstrap Twitter is one of the best known and most used CSS frameworks as shown in Figure 2. It was developed on Twitter in 2010. This framework runs on a grid system of 12 columns, with 4 types of displays possible depending on the width of the user's screen. We can adapt the appearance of the site to the visitor's material. The Bootstrap offers components (buttons, navigation bars, form, ...) pretty and easy to integrate. Since version 3, it is totally responsive. The elements adapt to the width of the screen by sliding one below the other when the width decreases. The adaptation is also done by a different display on the screen as we have already said. Its pre-programmed Queries media are now indispensable for smartphones. The bootstrap site offers many examples of directly usable templates. Bootstrap is associated with the Less preprocessor, a language that offers many features, such as using variables and including portions of code. It is thus possible to customize its CSS file with the elements and the colors wanted. The bootstrap of twitter is a safe bet in terms of CSS frameworks [10], [11]. Bootstrap offers : a. a responsive grid, CSS styles for all standard HTML elements (form, button, text, image ...) b. JS components such as dynamic drop-down lists, interactive navigation or carousel c. a font that is actually a set of icons. The advantage is that the icons are not images but fonts, they are vectorized and therefore always sharp on all types of devices [3].

Foundation
Foundation was created by ZURB in 2008. It is a front end framework that consists of many useful tools for creating responsive and mobile first mobile sites. Primarily built with HTML, CSS, and jquery, Foundation uses modern techniques and practices, but degrades dramatically from Internet Explorer 8. Although the Framework is most commonly used by HTML and CSS developers, the developer has the opportunity to take its marks thanks to Foundation in collaboration with Sass and Rails. The company behind Foundation, ZURB, has created a rigorously regulated set of tools for developers. Each module has its role to play in the whole framework, but at the same time can function completely independently of the central leadership. What this means then is that the developer can combine and combine the features of his current project, or take a single feature and add it to an older project. It can even add it as a feature to a different Framework. In summary, this is a modern framework that has been well built and responds to a wide variety

COMPARATIVE STUDY: BOOTSTRAP VS FOUNDATION
We present below the similarities between the two frameworks, the results are based on [8], [5] studies. a. Open source : Both frameworks work under MIT license, which means they are free to use and adapt. b. Reactivity : Bootstrap and Foundation are reactive right out of the box. They apply the "mobile first" approach, which is a design methodology that indicates that it is best to first create the layout for smaller screens, then add more content and features as you go. as the screen grows. c. 12-column grid system : In terms of frameworks, a grid system gives the developer the power to arrange their website or application as shown in Figure 3 Figure. 5. Figure 5. The different components of bootstrap and foundation Table 1 present the basic characteristics of each Framework, a detailed description of each framework can be found in [12], [2]. Table 2 presents the CSS charateristics for each framework. Table 3 presents the charateristics related to grids and the responsiveness of each framework. Table 4 presents the charateristics related to the user interface (UI) and widgets of each framework.   Container syntax <div class="container"> or <div class="container-fluid"> <div class="row"> Nested column syntax <div class="row"> <div class="col-sm-9"> <div class="row"> <!--nested columns add up to 12 --> <div class="col-xs-8 colsm-6">...</div> <div class="col-xs-4 colsm-6">...</div> </div> </div> </div> <div class="row"> <div class="small-6 columns"> <div class="row"> <!--nested columns add up to 12 --> <div class="small-6 columns">...</div> <div class="small-6 columns">...</div>   Tables  Yes  Yes  Tooltips Yes Yes

DISCUSSION OF RESULTS
In this section we depict the differences between Bootstrap and Foundation. We presents trough Table 5 the main results derived from our study. The Bootsrap team takes stability and backward compatibility seriously. They use Saucelabs' automated testing tools to ensure that everything passes a test before engaging in their main branch. The result is a set of very stable tools that can be used as a daily driver. Foundation, on the other hand, was released as "stable" a little over a year ago. At first launch, some components were unfinished, like Abide (their form validation library) which was completely broken, so their color palette settings. From 6 to 6.3, the team changed a number of things by making some settings obsolete and introducing things like ES6 to 6.2. The offcanvas has been reorganized and the parameters are very flexible in 6.3. Since Foundation 6 has been released, its stability is now excellent. The components seem to be well tested and the team publishes updates almost every 3-4 months. Bootstrap and Foundation support responsive grids and flexible breakpoints. However, Foundation supports responsive gutters, which are so easy to configure and seem magical. Collapsed gutters are also a thing in Foundation. The developer may have or remove gutters in specific cases that do not require them simply by adding a class. Other things like centered columns and block grids make the Foundation the winner in grids.
As far as backward compatibility is concerned, Foundation and Bootstrap use the same class convention as their previous versions. This makes the migration as painless as possible.
Flexbox grids are also available on Foundation and Bootstrap as a separate setting that the developer can turn on / off based on support for their target browser. forms In Bootstrap 4, there are special classes for radios and checkboxes that will make them much better than the default ones of the browser. Online forms, validation icons, and icon labels are also very powerful on Bootstrap. Foundation 6 has a simpler form layout that is heavily dependent on the grid. Online forms do not exist in the Foundation, which is almost missed. In addition, predefined fields are prohibited on Foundation, so the developer must rely on external CSS to justify its selection boxes, radio buttons and checkboxes. After the comparative study of the two front-end frameworks Bootstrap and foundation, we see that each framework has its own features and benefits and the choice between these two frameworks depends on the needs of the developer's web application.
To help the developer choose the right framework for the design of his project, we present the main advantages of each framework: the first one is Bootstrap: a. Massive community support: Given the huge popularity of Bootstrap, there is a large community using the Framework. Therefore, if the developer has a question about Bootstrap, he is more likely to find quickly an answer. Further, there are more tutorials as well as full courses on how to use Bootstrap. b. Other themes available: Because of its popularity, there are other Bootstrap themes. This means that if the developer uses a platform like WordPress and is looking for a theme to use, this might be a better option. c. Better browser compatibility d. Can use Less or Sass Many professional websites have used Bootstrap to create elegant and functional pages. Among them: Newsweek, Vogue and Lyft. We present trough Figure 6, the statistics about the use of this framework.  where characters move from right to left 6. Sites using Foundation as shown in Figure 7: Just like Bootstrap, Foundation is used by big names.
Among them: PBS, National Geographic, The Washington and PostMozilla.

CONCLUSION
Using a front-end framework is great for people who want to create content quickly, or at least not doing it from scratch. Without a doubt, the use of a front-end framework facilitates the work of the developer. Many web sites use Bootstrap and Foundation because they can both meet the needs of developers, and to choose the right framework. In this context this paper provided a detailed analysis of these two frameworks, to enhance the process of frameworks selection. The results of this contribution provide guidelines to front-end developers to select the appropriate framework based on the framework popularity, the active development of the framework, framework maturity, framework documentation, and finally the level of specificity of the framework.