SlideShare une entreprise Scribd logo
1  sur  10
Télécharger pour lire hors ligne
International Journal of Electrical and Computer Engineering (IJECE)
Vol. 9, No. 1, February 2019, pp. 713~722
ISSN: 2088-8708, DOI: 10.11591/ijece.v9i1.pp713-722  713
Journal homepage: http://iaescore.com/journals/index.php/IJECE
Analyzing bootsrap and foundation font-end frameworks:
a comparative study
Majida Laaziri 1
, Khaoula Benmoussa2
, Samira Khoulji3
, Kerkeb Mohamed Larbi4
, Abir El Yamami5
1,2,3
Information System Engineering Resarch Group, National School of Applied Sciences,
Abdelmalek Essaadi University, Morocco
4
Information System Engineering Resarch Group, Faculty of Sciences, Abdelmalek Essaadi University, Morocco
5
Laboratory Signals, Distributed Systems and Artificial Intelligence, ENSET Mohammedia,
Hassan II University, Morocco
Article Info ABSTRACT
Article history:
Received Feb 18, 2018
Revised Nov 20, 2018
Accepted Dec 15, 2018
Most modern web applications use some kind of front-end frameworks for
designing and creating content in a faster and more efficient way, which
saves valuable time when creating responsive web sites. There are many
front-end frameworks that vary enormously in terms of features and benefits,
which could make the choice of front-end framework for the developer
tricky. In this context, this paper focuses on an effective analysis of two of
today's most popular front-end frameworks, Boostrap and Foundation. The
results show that our analysis can be beneficial for developers to select the
appropriate front end framework to customize their web applications.
Keywords:
Bootstrap
Foundation
Front-end frameworks
Copyright © 2019 Institute of Advanced Engineering and Science.
All rights reserved.
Corresponding Author:
Laaziri Majida,
Information System Engineering Resarch Group,
National School of Applied Sciences, Abdelmalek Essaâdi University,
Mhannech II, B.P 2121 Tetouan, Morocco.
Email: majida.laaziri@gmail.com
1. 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
 ISSN: 2088-8708
Int J Elec & Comp Eng, Vol. 9, No. 1, February 2019 : 713 - 722
714
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.
2. 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.
Figure 1. Back-end and front-end
Int J Elec & Comp Eng ISSN: 2088-8708 
Analyzing bootsrap and foundation font-end frameworks: a comparative study (Majida Laaziri)
715
A front-end framework offers preformatted and configurable elements for the components of a web
page:
a. A complete and manipulable layout
b. Modules covering all aspects and current needs
c. Standard states
d. Multiple interactive behaviors
e. A customizable responsive design
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.
2. 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.
3. 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.
4. 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.
5. 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.
2.2. 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].
2.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
 ISSN: 2088-8708
Int J Elec & Comp Eng, Vol. 9, No. 1, February 2019 : 713 - 722
716
of users. It offers a good set of features. It's free, and there's a growing community of people to help the
developers if they're stuck[10].
Figure 2. Statistic of the bootstrap and foundation front-end framework
3. 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 and 4.
Both frameworks have :
a. Lines and columns
b. Ability to nest columns in rows, and vice versa
Figure 3. Bootstrap grid example
Figure 4. Foundation grid example
Int J Elec & Comp Eng ISSN: 2088-8708 
Analyzing bootsrap and foundation font-end frameworks: a comparative study (Majida Laaziri)
717
d. Stylized CSS components : Bootstrap and Foundation include additional CSS styles for different
components of the web page, such as typography, tables, forms, navigation bar, buttons, pagination,
labels, progress bar etc as shown in 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.
Table 1. Bootstrap and Foundation Comparison
Bootstrap Foundation
Owned by Originally developed at Twitter by Mark Otto and Jacob
Thornton, now an open-source project
ZURB, a web development company in
Campbell, California
Standard distribution
package includes
Required CSS (1 minified, 1 standard, both
with .map files); required JavaScript (1 minified, 1
standard). Former theme is incorporated in Sass files,
activated by variables. (Glyphicons are not distributed
with Bootstrap 4.) Also contains two additional sets of
CSS files (1 minified, 1 standard, both with .map files):
bootstrap-grid, which appears to be a flexbox-based grid
system, possibly redundant at this point; and bootstrap-
reboot, based on normalize.css. A CDN is available for
standard distribution files.
Four distributions : Complete, Essential,
Custom, Sass. Complete version includes
compiled CSS (minified and not), plus
compiled JavaScript, including individual
vendor files. Essential includes typography,
grid, Reveal, and Interchange only. Custom
can be customized on the website for
downloading, and the developer can choose
elements to include and change a few
variables. The Sass version can only be
downloaded using the command line,
Foundation CLI or Yeti Launcher. A CDN is
available for standard distribution files.
Additional JavaScript
libraries required?
Yes, you must download or link to a CDN separately:
jQuery 3.1.1 Slim, Tether 1.4.0. Files are linked to just
before end of body element.
All dependencies are bundled in the
distribution. jQuery is required, but it is part
of the distribution. Files are linked to just
before end of body element.
Browser support Latest versions of: Chrome (macOS, Windows, iOS and
Android), Safari (macOS and iOS), Firefox (macOS,
Windows, Android, iOS) (latest version of Firefox plus
Extended Support Release), Edge (Windows, Windows
10 Mobile), Opera (macOS, Windows), Android Browser
& WebView 5.0+, Windows 10 Mobile, Internet
Explorer 10+
Last two versions of Chrome, Firefox, Safari,
Opera, mobile Safari, Internet Explorer
mobile, as well as Internet Explorer 9+ and
Android browser 2.3+
Internet Explorer
support
Internet Explorer 10 and higher (Bootstrap 3
recommended for Internet Explorer 8 and 9)
Internet Explorer 9 and higher
Other browser support
notes
“Unofficially, Bootstrap should look and behave well
enough in Chromium and Chrome for Linux, Firefox for
Linux, and Internet Explorer 9, though they are not
officially supported.”
“JavaScript: Our plugins use a number of
handy ECMAScript 5 features that aren’t
supported in IE8.”
License and copyright Code and documentation copyright (2011 to 2017) of the
Bootstrap authors and Twitter, Inc. Code released under
the MIT License. Docs released under Creative
Commons.
MIT license, no mention of copyright
 ISSN: 2088-8708
Int J Elec & Comp Eng, Vol. 9, No. 1, February 2019 : 713 - 722
718
Table 1. Bootstrap and Foundation Comparison
Bootstrap Foundation
Build tools “Bootstrap uses Grunt for its CSS and JavaScript build
system and Jekyll for the written documentation. Our
Gruntfile includes convenient methods for working with
the framework, including compiling code, running tests,
and more.” (
To access Sass files, you must install using
the command line, the Node.js-powered
Foundation CLI, or with its Yeti Launch
application (Mac only). “Foundation is
available on npm, Bower, Meteor, and
Composer. The package includes all of the
source SCSS and JavaScript files, as well as
compiled CSS and JavaScript, in
uncompressed and compressed flavors.”
Other versions of Foundation are available as
simple downloads without using these tools,
but without SCSS files.
Table 2. CSS Comparison
Bootstrap Foundation
Reset reboot.css(_reboot.scss) normalize.css
LESS Yes No
Sass/Scss Yes Yes
Table 3. Grids and Responsiveness Comparison
Bootstrap Foundation
Base width Fluid (0, 34em, 48em, 62em, 75em) Fluid (max-width 75rem default)
Columns 12 1-infinity (12 default)
Single column class syntax .col-xs-1
.col-sm-1
.col-md-1
.col-lg-1
.col-xl-1
.small-1.columns
.medium-1.columns
.large-1.columns
.[custom]-1.columns
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 col-
sm-6">...</div>
<div class="col-xs-4 col-
sm-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>
</div>
</div>
</div>
Visibility class syntax
Viewport-based:
.hidden-xs-down
.hidden-sm-down
.hidden-md-down
.hidden-lg-down
.hidden-xl-down
.hidden-xs-up
.hidden-sm-up
.hidden-md-up
.hidden-lg-up
.hidden-xl-up
Screen Size:
.show-for-medium
.show-for-[custom]
.show-for-medium-only
.show-for-[custom]-only
.hide-for-medium
.hide-for-[custom]
.hide-for-medium-only
.hide-for-[custom]-only
Generic (CAUTION: hides from
Int J Elec & Comp Eng ISSN: 2088-8708 
Analyzing bootsrap and foundation font-end frameworks: a comparative study (Majida Laaziri)
719
Table 3. Grids and Responsiveness Comparison
Bootstrap Foundation
Print-based:
.visible-print-block
.visible-print-inline
.visible-print-inline-block
.hidden-print
screenreaders):
.hide (display: none;)
.invisible (visibility: hidden;)
Orientation:
.show-for-landscape
.show-for-portrait
.hide-for-landscape
.hide-for-portrait
Accessibility:
.show-for-sr (hides visually only)
.show-on-focus (for skip-lin
Table 4. User Interface (UI) and Widgets
Bootstrap Foundation
Alerts Yes Yes — Callout
Breadcrumbs Yes Yes
Buttons Yes Yes
Carousel Yes Yes — Orbit is back
Collapse/Accordion Yes — Collapse Yes — Accordion
Dropdown Yes Yes — Dropdown, Drilldown, & Accordion menus
Forms Yes Yes
Form Validation Yes Yes — Abide
Grids Yes Yes
Icons Yes Yes — with download
Labels Yes Yes
Pagination Yes Yes
Panels Yes — now Cards Yes — Callout
Progress bars Yes Yes
Responsive media No Yes — Interchange
Tables Yes Yes
Tooltips Yes Yes
4. 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.
Table 5. Results of Comparison
CSS Preprocessor
Both Foundation 6 and Bootstrap 4 frameworks are based on SASS. They both have a good set of
mixins, a separate parameter sheet, reusable components, and so on.
JavaScript The Bootstrap 4 and Foundation 6 JavaScript libraries are written on ES6, which means that the
devellopper does not need Babel (or any other transpiler) if it wants to individually include each
of their JS tools in its development pipeline. However, they both have ES5 transpired versions of
each component.
Stability 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.
 ISSN: 2088-8708
Int J Elec & Comp Eng, Vol. 9, No. 1, February 2019 : 713 - 722
720
Table 5. Results of Comparison (continue)
CSS Preprocessor
Both Foundation 6 and Bootstrap 4 frameworks are based on SASS. They both have a good set of
mixins, a separate parameter sheet, reusable components, and so on.
Grid 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.
Menus While Bootstrap 4 has the same old drop-down lists, tabs, and basic navigation menus that we
learned from version 3, Foundation has dramatically improved their drop-down lists by including
other variations that might be useful in some case.
Browser support Both frameworks support the following browsers: Chrome (Mac, Windows, iOS and Android),
Safari (Mac and iOS only), Firefox (Mac and Windows) and Opera (Mac and Windows).
However, there is a slight difference with regard to Internet Explorer - Bootstrap supports IE8 and
newer versions, while Foundation starts at IE9 plus newer versions.
CSS preprocessors Bootstrap includes SASS and LESS files, which means that it can be used in applications that use
one of these CSS preprocessors. On the other hand, Foundation only supports SASS.
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.
Figure 6. Bootstrap popular website
Int J Elec & Comp Eng ISSN: 2088-8708 
Analyzing bootsrap and foundation font-end frameworks: a comparative study (Majida Laaziri)
721
Likewise, we present the advantages of Foundation Framework:
a. More than one design approach by the developer: Foundation provides a better environment for
customizing the web site. Although it is possible to customize with Bootstrap, it takes a lot of effort for
the developer site to look like other Bootstrap sites. With Foundation, the detached CSS design is a
lightweight design and the developer does not have to put a lot of effort into customizing it.
b. Foundation does not need to add classes to be responsive or have a certain style: If the developer does not
add the correct CSS classes with Bootstrap, the effects do not appear. With Foundation, there are built-in
basic CSS appearances. Some may prefer this, especially since there will not be as much CSS in its
HTML.
c. More features of the grid system: Many prefer the Foundation grid system because they find it offers
more flexibility. Some additional abilities :
1. The ability to center columns
2. The developer can add a "collapse" class that allows him to easily edit columns and remove gutters.
3. Can use a block grid that allows you to create columns of equal size with minimal markup.
d. Other built-in widgets: With regard to additional components and JS extensions, Bootstrap and
Foundation are basically equal. Here are some extra that Foundation.
1. Form validation, Abide : HTML5 form validation library
2. Menus off canvas : the developer easily places the navigation of his site on the side of his site
3. Pricing tables : ready-to-use table, designed to display the prices of a product by subscription
Responsive media
4. Reactive media, exchange : the website loads different media for different devices / screen sizes, so
that the developer can customize the user experience
5. Support from right to left : the developer the direction of the text ; Ideal for sites in other languages
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.
Figure 7. Foundation popular website
5. 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.
 ISSN: 2088-8708
Int J Elec & Comp Eng, Vol. 9, No. 1, February 2019 : 713 - 722
722
REFERENCES
[1] D. R. Lakshmi and S. S. Mallika, “A Review on Web Application Testing and its Current Research Directions,”
International Journal of Electrical and Computer Engineering (IJECE), vol. 7, no. 4, p. 2132, 2017.
[2] W. D. Cletus, A. Kakandar, and C. N. Paul, “Responsive Web Design Frameworks : A Review,” Int. J. Sci. Res.
Comput. Sci. Eng. Inf. Technol., vol. 4, no. 5, pp. 132–136, 2017.
[3] W. Computer, “Responsive Web Design With Bootstrap,” vol. 5, no. 4, p. 274, 2016.
[4] N. Jain, “Review of Different Responsive CSS Front-End Frameworks,” J. Glob. Res. Comput. Sci., vol. 5, no. 11,
pp. 5–10, 2014.
[5] “Introduction aux frameworks front-end (Bootstrap, Foundation) – alticreation.” [Online]. Available:
https://www.alticreation.com/bootstrap-foundation-frameworks-front-end/.
[6] S. Subramaniam, S.-C. Haw, and P. K. Hoong, “Bridging XML and Relational Databases: An Effective Mapping
Scheme based on Persistent Labeling,” International Journal of Electrical and Computer Engineering (IJECE),
vol. 2, no. 2, pp. 239–246, 2011.
[7] S. K. Patel, “Responsive Web Design with AngularJS,” p. 142, 2014.
[8] N. Edan, A. Al-sherbaz, and S. Turner, “Design and Implement a Hybrid WebRTC Signalling Mechanism for
Unidirectional & Bi-directional Video Conferencing,” vol. 8, no. 1, pp. 390–399, 2018.
[9] “Les meilleurs frameworks CSS pour créer un site web professionnel. | Outils-web.fr.” [Online]. Available:
http://outils-web.fr/les-meilleurs-frameworks-css-pour-creer-un-site-web-professionnel/.
[10] “COMPARAISON ENTRE LES FRAMEWORK FRONT-END BOOTSTRAP ET FONDATION | SUPINFO,
École Supérieure d’Informatique.” [Online]. Available: https://www.supinfo.com/articles/single/4903-comparaison-
framework-front-end-bootstrap-fondation.
[11] “Tutoriel Bootstrap : les premiers pas - 1&amp;1.” [Online]. Available: https://www.1and1.fr/digitalguide/sites-
internet/developpement-web/tutoriel-bootstrap-les-premiers-pas/.
[12] “Responsive CSS Framework Comparison | Vermilion Design + Digital.” [Online]. Available:
https://www.vermilion.com/responsive-comparison/.

Contenu connexe

Tendances

Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Oleksii Prohonnyi
 
online blogging system
online blogging systemonline blogging system
online blogging system001vaibhav
 
Front-end technologies for Wonderful User Experience through Websites
Front-end technologies for Wonderful User Experience through WebsitesFront-end technologies for Wonderful User Experience through Websites
Front-end technologies for Wonderful User Experience through WebsitesReady Bytes Software labs
 
Front-End Web Development
Front-End Web DevelopmentFront-End Web Development
Front-End Web DevelopmentYash Sati
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | IntroductionJohnTaieb
 
Project report | Major Project | Engineering | Devansh Koolwal
Project report | Major Project | Engineering | Devansh KoolwalProject report | Major Project | Engineering | Devansh Koolwal
Project report | Major Project | Engineering | Devansh KoolwalDevansh Koolwal
 
Drupal Site Building for Developers
Drupal Site Building for DevelopersDrupal Site Building for Developers
Drupal Site Building for DevelopersIan Carnaghan
 
SharePoint as a Web CMS
SharePoint as a Web CMSSharePoint as a Web CMS
SharePoint as a Web CMSCraig Bailey
 
Summer training in web designing
Summer training in web designingSummer training in web designing
Summer training in web designingDUCC Systems
 
Web Engineering
Web Engineering  Web Engineering
Web Engineering Al Mamun
 
Top frontend web development tools
Top frontend web development toolsTop frontend web development tools
Top frontend web development toolsBenji Harrison
 
Unit 1 introduction to web programming
Unit 1 introduction to web programmingUnit 1 introduction to web programming
Unit 1 introduction to web programmingzahid7578
 
Spring framework Introduction
Spring framework  IntroductionSpring framework  Introduction
Spring framework IntroductionAnuj Singh Rajput
 
Website and it's importance
Website and it's importanceWebsite and it's importance
Website and it's importanceRobinSingh347
 

Tendances (20)

Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1
 
online blogging system
online blogging systemonline blogging system
online blogging system
 
Front-end technologies for Wonderful User Experience through Websites
Front-end technologies for Wonderful User Experience through WebsitesFront-end technologies for Wonderful User Experience through Websites
Front-end technologies for Wonderful User Experience through Websites
 
Front-End Web Development
Front-End Web DevelopmentFront-End Web Development
Front-End Web Development
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
 
Project report | Major Project | Engineering | Devansh Koolwal
Project report | Major Project | Engineering | Devansh KoolwalProject report | Major Project | Engineering | Devansh Koolwal
Project report | Major Project | Engineering | Devansh Koolwal
 
Drupal Site Building for Developers
Drupal Site Building for DevelopersDrupal Site Building for Developers
Drupal Site Building for Developers
 
Web technology
Web technologyWeb technology
Web technology
 
SharePoint as a Web CMS
SharePoint as a Web CMSSharePoint as a Web CMS
SharePoint as a Web CMS
 
Report html5
Report html5Report html5
Report html5
 
Summer training in web designing
Summer training in web designingSummer training in web designing
Summer training in web designing
 
Web Engineering
Web Engineering  Web Engineering
Web Engineering
 
Top frontend web development tools
Top frontend web development toolsTop frontend web development tools
Top frontend web development tools
 
Web development
Web developmentWeb development
Web development
 
Unit 1 introduction to web programming
Unit 1 introduction to web programmingUnit 1 introduction to web programming
Unit 1 introduction to web programming
 
124157075 gb
124157075 gb124157075 gb
124157075 gb
 
Top JavaScript Frameworks Compared
Top JavaScript Frameworks ComparedTop JavaScript Frameworks Compared
Top JavaScript Frameworks Compared
 
Spring framework Introduction
Spring framework  IntroductionSpring framework  Introduction
Spring framework Introduction
 
Website and it's importance
Website and it's importanceWebsite and it's importance
Website and it's importance
 
Os php-wiki1-pdf
Os php-wiki1-pdfOs php-wiki1-pdf
Os php-wiki1-pdf
 

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

Bootstrap seminar presentation
Bootstrap seminar presentationBootstrap seminar presentation
Bootstrap seminar presentationPratikDoiphode1
 
Bootstrap vs React Which is the best front-end framework.pdf
Bootstrap vs React Which is the best front-end framework.pdfBootstrap vs React Which is the best front-end framework.pdf
Bootstrap vs React Which is the best front-end framework.pdfLaura Miller
 
web intership ritesh.pptx
web intership ritesh.pptxweb intership ritesh.pptx
web intership ritesh.pptxJenaj2
 
Top Front-End Frameworks For Your Web Development Projects.pdf
Top Front-End Frameworks For Your Web Development Projects.pdfTop Front-End Frameworks For Your Web Development Projects.pdf
Top Front-End Frameworks For Your Web Development Projects.pdfCalvinLee106
 
Web application framework
Web application frameworkWeb application framework
Web application frameworkPankaj Chand
 
Navigating the Hype and Realities of Web Development Frameworks
Navigating the Hype and Realities of Web Development FrameworksNavigating the Hype and Realities of Web Development Frameworks
Navigating the Hype and Realities of Web Development FrameworksSeasiaInfotech2
 
IRJET- A Personalized Web Browser
IRJET-  	  A Personalized Web BrowserIRJET-  	  A Personalized Web Browser
IRJET- A Personalized Web BrowserIRJET Journal
 
How to choose the best frontend framework in 2022
How to choose the best frontend framework in 2022How to choose the best frontend framework in 2022
How to choose the best frontend framework in 2022Katy Slemon
 
Web Programming - 6 Bootstrap Framework
Web Programming - 6 Bootstrap FrameworkWeb Programming - 6 Bootstrap Framework
Web Programming - 6 Bootstrap FrameworkAndiNurkholis1
 
Top 10 HTML5 frameworks for effective development in 2016
Top 10 HTML5 frameworks for effective development in 2016Top 10 HTML5 frameworks for effective development in 2016
Top 10 HTML5 frameworks for effective development in 2016iMOBDEV Technologies Pvt. Ltd.
 
Discover the Top 23 CSS Frameworks for 2023.pdf
Discover the Top 23 CSS Frameworks for 2023.pdfDiscover the Top 23 CSS Frameworks for 2023.pdf
Discover the Top 23 CSS Frameworks for 2023.pdfpcloudy2
 
Top 12 Front End Technologies to Use In 2023.pdf
Top 12 Front End Technologies to Use In 2023.pdfTop 12 Front End Technologies to Use In 2023.pdf
Top 12 Front End Technologies to Use In 2023.pdfLaura Miller
 
Top 12 Front End Technologies to Use In 2024.pdf
Top 12 Front End Technologies to Use In 2024.pdfTop 12 Front End Technologies to Use In 2024.pdf
Top 12 Front End Technologies to Use In 2024.pdfLaura Miller
 
Top 11 Front-End Web Development Tools To Consider in 2020
 Top 11 Front-End Web Development Tools To Consider in 2020 Top 11 Front-End Web Development Tools To Consider in 2020
Top 11 Front-End Web Development Tools To Consider in 2020Katy Slemon
 
Best 5 CSS Frameworks You Should Know To Design Attractive Websites .pdf
Best 5 CSS Frameworks You Should Know To Design Attractive Websites .pdfBest 5 CSS Frameworks You Should Know To Design Attractive Websites .pdf
Best 5 CSS Frameworks You Should Know To Design Attractive Websites .pdfAppdeveloper10
 
12 Front-End App Development Languages to Consider in 2023
12 Front-End App Development Languages to Consider in 202312 Front-End App Development Languages to Consider in 2023
12 Front-End App Development Languages to Consider in 2023Baek Yongsun
 

Similaire à Analyzing bootsrap and foundation font-end frameworks : a comparative study (20)

Bootstrap seminar presentation
Bootstrap seminar presentationBootstrap seminar presentation
Bootstrap seminar presentation
 
Bootstrap vs React Which is the best front-end framework.pdf
Bootstrap vs React Which is the best front-end framework.pdfBootstrap vs React Which is the best front-end framework.pdf
Bootstrap vs React Which is the best front-end framework.pdf
 
web intership ritesh.pptx
web intership ritesh.pptxweb intership ritesh.pptx
web intership ritesh.pptx
 
Top Front-End Frameworks For Your Web Development Projects.pdf
Top Front-End Frameworks For Your Web Development Projects.pdfTop Front-End Frameworks For Your Web Development Projects.pdf
Top Front-End Frameworks For Your Web Development Projects.pdf
 
Web application framework
Web application frameworkWeb application framework
Web application framework
 
Navigating the Hype and Realities of Web Development Frameworks
Navigating the Hype and Realities of Web Development FrameworksNavigating the Hype and Realities of Web Development Frameworks
Navigating the Hype and Realities of Web Development Frameworks
 
RWD - Bootstrap
RWD - BootstrapRWD - Bootstrap
RWD - Bootstrap
 
SeniorProject_Jurgun
SeniorProject_JurgunSeniorProject_Jurgun
SeniorProject_Jurgun
 
IRJET- A Personalized Web Browser
IRJET-  	  A Personalized Web BrowserIRJET-  	  A Personalized Web Browser
IRJET- A Personalized Web Browser
 
How to choose the best frontend framework in 2022
How to choose the best frontend framework in 2022How to choose the best frontend framework in 2022
How to choose the best frontend framework in 2022
 
Web Programming - 6 Bootstrap Framework
Web Programming - 6 Bootstrap FrameworkWeb Programming - 6 Bootstrap Framework
Web Programming - 6 Bootstrap Framework
 
Top 10 HTML5 frameworks for effective development in 2016
Top 10 HTML5 frameworks for effective development in 2016Top 10 HTML5 frameworks for effective development in 2016
Top 10 HTML5 frameworks for effective development in 2016
 
Discover the Top 23 CSS Frameworks for 2023.pdf
Discover the Top 23 CSS Frameworks for 2023.pdfDiscover the Top 23 CSS Frameworks for 2023.pdf
Discover the Top 23 CSS Frameworks for 2023.pdf
 
Top 12 Front End Technologies to Use In 2023.pdf
Top 12 Front End Technologies to Use In 2023.pdfTop 12 Front End Technologies to Use In 2023.pdf
Top 12 Front End Technologies to Use In 2023.pdf
 
Top 12 Front End Technologies to Use In 2024.pdf
Top 12 Front End Technologies to Use In 2024.pdfTop 12 Front End Technologies to Use In 2024.pdf
Top 12 Front End Technologies to Use In 2024.pdf
 
Top 11 Front-End Web Development Tools To Consider in 2020
 Top 11 Front-End Web Development Tools To Consider in 2020 Top 11 Front-End Web Development Tools To Consider in 2020
Top 11 Front-End Web Development Tools To Consider in 2020
 
Bridging Front.pdf
Bridging Front.pdfBridging Front.pdf
Bridging Front.pdf
 
Full Stack Development
Full Stack DevelopmentFull Stack Development
Full Stack Development
 
Best 5 CSS Frameworks You Should Know To Design Attractive Websites .pdf
Best 5 CSS Frameworks You Should Know To Design Attractive Websites .pdfBest 5 CSS Frameworks You Should Know To Design Attractive Websites .pdf
Best 5 CSS Frameworks You Should Know To Design Attractive Websites .pdf
 
12 Front-End App Development Languages to Consider in 2023
12 Front-End App Development Languages to Consider in 202312 Front-End App Development Languages to Consider in 2023
12 Front-End App Development Languages to Consider in 2023
 

Plus de IJECEIAES

Cloud service ranking with an integration of k-means algorithm and decision-m...
Cloud service ranking with an integration of k-means algorithm and decision-m...Cloud service ranking with an integration of k-means algorithm and decision-m...
Cloud service ranking with an integration of k-means algorithm and decision-m...IJECEIAES
 
Prediction of the risk of developing heart disease using logistic regression
Prediction of the risk of developing heart disease using logistic regressionPrediction of the risk of developing heart disease using logistic regression
Prediction of the risk of developing heart disease using logistic regressionIJECEIAES
 
Predictive analysis of terrorist activities in Thailand's Southern provinces:...
Predictive analysis of terrorist activities in Thailand's Southern provinces:...Predictive analysis of terrorist activities in Thailand's Southern provinces:...
Predictive analysis of terrorist activities in Thailand's Southern provinces:...IJECEIAES
 
Optimal model of vehicular ad-hoc network assisted by unmanned aerial vehicl...
Optimal model of vehicular ad-hoc network assisted by  unmanned aerial vehicl...Optimal model of vehicular ad-hoc network assisted by  unmanned aerial vehicl...
Optimal model of vehicular ad-hoc network assisted by unmanned aerial vehicl...IJECEIAES
 
Improving cyberbullying detection through multi-level machine learning
Improving cyberbullying detection through multi-level machine learningImproving cyberbullying detection through multi-level machine learning
Improving cyberbullying detection through multi-level machine learningIJECEIAES
 
Comparison of time series temperature prediction with autoregressive integrat...
Comparison of time series temperature prediction with autoregressive integrat...Comparison of time series temperature prediction with autoregressive integrat...
Comparison of time series temperature prediction with autoregressive integrat...IJECEIAES
 
Strengthening data integrity in academic document recording with blockchain a...
Strengthening data integrity in academic document recording with blockchain a...Strengthening data integrity in academic document recording with blockchain a...
Strengthening data integrity in academic document recording with blockchain a...IJECEIAES
 
Design of storage benchmark kit framework for supporting the file storage ret...
Design of storage benchmark kit framework for supporting the file storage ret...Design of storage benchmark kit framework for supporting the file storage ret...
Design of storage benchmark kit framework for supporting the file storage ret...IJECEIAES
 
Detection of diseases in rice leaf using convolutional neural network with tr...
Detection of diseases in rice leaf using convolutional neural network with tr...Detection of diseases in rice leaf using convolutional neural network with tr...
Detection of diseases in rice leaf using convolutional neural network with tr...IJECEIAES
 
A systematic review of in-memory database over multi-tenancy
A systematic review of in-memory database over multi-tenancyA systematic review of in-memory database over multi-tenancy
A systematic review of in-memory database over multi-tenancyIJECEIAES
 
Agriculture crop yield prediction using inertia based cat swarm optimization
Agriculture crop yield prediction using inertia based cat swarm optimizationAgriculture crop yield prediction using inertia based cat swarm optimization
Agriculture crop yield prediction using inertia based cat swarm optimizationIJECEIAES
 
Three layer hybrid learning to improve intrusion detection system performance
Three layer hybrid learning to improve intrusion detection system performanceThree layer hybrid learning to improve intrusion detection system performance
Three layer hybrid learning to improve intrusion detection system performanceIJECEIAES
 
Non-binary codes approach on the performance of short-packet full-duplex tran...
Non-binary codes approach on the performance of short-packet full-duplex tran...Non-binary codes approach on the performance of short-packet full-duplex tran...
Non-binary codes approach on the performance of short-packet full-duplex tran...IJECEIAES
 
Improved design and performance of the global rectenna system for wireless po...
Improved design and performance of the global rectenna system for wireless po...Improved design and performance of the global rectenna system for wireless po...
Improved design and performance of the global rectenna system for wireless po...IJECEIAES
 
Advanced hybrid algorithms for precise multipath channel estimation in next-g...
Advanced hybrid algorithms for precise multipath channel estimation in next-g...Advanced hybrid algorithms for precise multipath channel estimation in next-g...
Advanced hybrid algorithms for precise multipath channel estimation in next-g...IJECEIAES
 
Performance analysis of 2D optical code division multiple access through unde...
Performance analysis of 2D optical code division multiple access through unde...Performance analysis of 2D optical code division multiple access through unde...
Performance analysis of 2D optical code division multiple access through unde...IJECEIAES
 
On performance analysis of non-orthogonal multiple access downlink for cellul...
On performance analysis of non-orthogonal multiple access downlink for cellul...On performance analysis of non-orthogonal multiple access downlink for cellul...
On performance analysis of non-orthogonal multiple access downlink for cellul...IJECEIAES
 
Phase delay through slot-line beam switching microstrip patch array antenna d...
Phase delay through slot-line beam switching microstrip patch array antenna d...Phase delay through slot-line beam switching microstrip patch array antenna d...
Phase delay through slot-line beam switching microstrip patch array antenna d...IJECEIAES
 
A simple feed orthogonal excitation X-band dual circular polarized microstrip...
A simple feed orthogonal excitation X-band dual circular polarized microstrip...A simple feed orthogonal excitation X-band dual circular polarized microstrip...
A simple feed orthogonal excitation X-band dual circular polarized microstrip...IJECEIAES
 
A taxonomy on power optimization techniques for fifthgeneration heterogenous ...
A taxonomy on power optimization techniques for fifthgeneration heterogenous ...A taxonomy on power optimization techniques for fifthgeneration heterogenous ...
A taxonomy on power optimization techniques for fifthgeneration heterogenous ...IJECEIAES
 

Plus de IJECEIAES (20)

Cloud service ranking with an integration of k-means algorithm and decision-m...
Cloud service ranking with an integration of k-means algorithm and decision-m...Cloud service ranking with an integration of k-means algorithm and decision-m...
Cloud service ranking with an integration of k-means algorithm and decision-m...
 
Prediction of the risk of developing heart disease using logistic regression
Prediction of the risk of developing heart disease using logistic regressionPrediction of the risk of developing heart disease using logistic regression
Prediction of the risk of developing heart disease using logistic regression
 
Predictive analysis of terrorist activities in Thailand's Southern provinces:...
Predictive analysis of terrorist activities in Thailand's Southern provinces:...Predictive analysis of terrorist activities in Thailand's Southern provinces:...
Predictive analysis of terrorist activities in Thailand's Southern provinces:...
 
Optimal model of vehicular ad-hoc network assisted by unmanned aerial vehicl...
Optimal model of vehicular ad-hoc network assisted by  unmanned aerial vehicl...Optimal model of vehicular ad-hoc network assisted by  unmanned aerial vehicl...
Optimal model of vehicular ad-hoc network assisted by unmanned aerial vehicl...
 
Improving cyberbullying detection through multi-level machine learning
Improving cyberbullying detection through multi-level machine learningImproving cyberbullying detection through multi-level machine learning
Improving cyberbullying detection through multi-level machine learning
 
Comparison of time series temperature prediction with autoregressive integrat...
Comparison of time series temperature prediction with autoregressive integrat...Comparison of time series temperature prediction with autoregressive integrat...
Comparison of time series temperature prediction with autoregressive integrat...
 
Strengthening data integrity in academic document recording with blockchain a...
Strengthening data integrity in academic document recording with blockchain a...Strengthening data integrity in academic document recording with blockchain a...
Strengthening data integrity in academic document recording with blockchain a...
 
Design of storage benchmark kit framework for supporting the file storage ret...
Design of storage benchmark kit framework for supporting the file storage ret...Design of storage benchmark kit framework for supporting the file storage ret...
Design of storage benchmark kit framework for supporting the file storage ret...
 
Detection of diseases in rice leaf using convolutional neural network with tr...
Detection of diseases in rice leaf using convolutional neural network with tr...Detection of diseases in rice leaf using convolutional neural network with tr...
Detection of diseases in rice leaf using convolutional neural network with tr...
 
A systematic review of in-memory database over multi-tenancy
A systematic review of in-memory database over multi-tenancyA systematic review of in-memory database over multi-tenancy
A systematic review of in-memory database over multi-tenancy
 
Agriculture crop yield prediction using inertia based cat swarm optimization
Agriculture crop yield prediction using inertia based cat swarm optimizationAgriculture crop yield prediction using inertia based cat swarm optimization
Agriculture crop yield prediction using inertia based cat swarm optimization
 
Three layer hybrid learning to improve intrusion detection system performance
Three layer hybrid learning to improve intrusion detection system performanceThree layer hybrid learning to improve intrusion detection system performance
Three layer hybrid learning to improve intrusion detection system performance
 
Non-binary codes approach on the performance of short-packet full-duplex tran...
Non-binary codes approach on the performance of short-packet full-duplex tran...Non-binary codes approach on the performance of short-packet full-duplex tran...
Non-binary codes approach on the performance of short-packet full-duplex tran...
 
Improved design and performance of the global rectenna system for wireless po...
Improved design and performance of the global rectenna system for wireless po...Improved design and performance of the global rectenna system for wireless po...
Improved design and performance of the global rectenna system for wireless po...
 
Advanced hybrid algorithms for precise multipath channel estimation in next-g...
Advanced hybrid algorithms for precise multipath channel estimation in next-g...Advanced hybrid algorithms for precise multipath channel estimation in next-g...
Advanced hybrid algorithms for precise multipath channel estimation in next-g...
 
Performance analysis of 2D optical code division multiple access through unde...
Performance analysis of 2D optical code division multiple access through unde...Performance analysis of 2D optical code division multiple access through unde...
Performance analysis of 2D optical code division multiple access through unde...
 
On performance analysis of non-orthogonal multiple access downlink for cellul...
On performance analysis of non-orthogonal multiple access downlink for cellul...On performance analysis of non-orthogonal multiple access downlink for cellul...
On performance analysis of non-orthogonal multiple access downlink for cellul...
 
Phase delay through slot-line beam switching microstrip patch array antenna d...
Phase delay through slot-line beam switching microstrip patch array antenna d...Phase delay through slot-line beam switching microstrip patch array antenna d...
Phase delay through slot-line beam switching microstrip patch array antenna d...
 
A simple feed orthogonal excitation X-band dual circular polarized microstrip...
A simple feed orthogonal excitation X-band dual circular polarized microstrip...A simple feed orthogonal excitation X-band dual circular polarized microstrip...
A simple feed orthogonal excitation X-band dual circular polarized microstrip...
 
A taxonomy on power optimization techniques for fifthgeneration heterogenous ...
A taxonomy on power optimization techniques for fifthgeneration heterogenous ...A taxonomy on power optimization techniques for fifthgeneration heterogenous ...
A taxonomy on power optimization techniques for fifthgeneration heterogenous ...
 

Dernier

complete construction, environmental and economics information of biomass com...
complete construction, environmental and economics information of biomass com...complete construction, environmental and economics information of biomass com...
complete construction, environmental and economics information of biomass com...asadnawaz62
 
Past, Present and Future of Generative AI
Past, Present and Future of Generative AIPast, Present and Future of Generative AI
Past, Present and Future of Generative AIabhishek36461
 
Sachpazis Costas: Geotechnical Engineering: A student's Perspective Introduction
Sachpazis Costas: Geotechnical Engineering: A student's Perspective IntroductionSachpazis Costas: Geotechnical Engineering: A student's Perspective Introduction
Sachpazis Costas: Geotechnical Engineering: A student's Perspective IntroductionDr.Costas Sachpazis
 
Decoding Kotlin - Your guide to solving the mysterious in Kotlin.pptx
Decoding Kotlin - Your guide to solving the mysterious in Kotlin.pptxDecoding Kotlin - Your guide to solving the mysterious in Kotlin.pptx
Decoding Kotlin - Your guide to solving the mysterious in Kotlin.pptxJoão Esperancinha
 
CCS355 Neural Network & Deep Learning Unit II Notes with Question bank .pdf
CCS355 Neural Network & Deep Learning Unit II Notes with Question bank .pdfCCS355 Neural Network & Deep Learning Unit II Notes with Question bank .pdf
CCS355 Neural Network & Deep Learning Unit II Notes with Question bank .pdfAsst.prof M.Gokilavani
 
What are the advantages and disadvantages of membrane structures.pptx
What are the advantages and disadvantages of membrane structures.pptxWhat are the advantages and disadvantages of membrane structures.pptx
What are the advantages and disadvantages of membrane structures.pptxwendy cai
 
Call Us ≽ 8377877756 ≼ Call Girls In Shastri Nagar (Delhi)
Call Us ≽ 8377877756 ≼ Call Girls In Shastri Nagar (Delhi)Call Us ≽ 8377877756 ≼ Call Girls In Shastri Nagar (Delhi)
Call Us ≽ 8377877756 ≼ Call Girls In Shastri Nagar (Delhi)dollysharma2066
 
Gurgaon ✡️9711147426✨Call In girls Gurgaon Sector 51 escort service
Gurgaon ✡️9711147426✨Call In girls Gurgaon Sector 51 escort serviceGurgaon ✡️9711147426✨Call In girls Gurgaon Sector 51 escort service
Gurgaon ✡️9711147426✨Call In girls Gurgaon Sector 51 escort servicejennyeacort
 
IVE Industry Focused Event - Defence Sector 2024
IVE Industry Focused Event - Defence Sector 2024IVE Industry Focused Event - Defence Sector 2024
IVE Industry Focused Event - Defence Sector 2024Mark Billinghurst
 
computer application and construction management
computer application and construction managementcomputer application and construction management
computer application and construction managementMariconPadriquez1
 
Application of Residue Theorem to evaluate real integrations.pptx
Application of Residue Theorem to evaluate real integrations.pptxApplication of Residue Theorem to evaluate real integrations.pptx
Application of Residue Theorem to evaluate real integrations.pptx959SahilShah
 
INFLUENCE OF NANOSILICA ON THE PROPERTIES OF CONCRETE
INFLUENCE OF NANOSILICA ON THE PROPERTIES OF CONCRETEINFLUENCE OF NANOSILICA ON THE PROPERTIES OF CONCRETE
INFLUENCE OF NANOSILICA ON THE PROPERTIES OF CONCRETEroselinkalist12
 
Heart Disease Prediction using machine learning.pptx
Heart Disease Prediction using machine learning.pptxHeart Disease Prediction using machine learning.pptx
Heart Disease Prediction using machine learning.pptxPoojaBan
 
Why does (not) Kafka need fsync: Eliminating tail latency spikes caused by fsync
Why does (not) Kafka need fsync: Eliminating tail latency spikes caused by fsyncWhy does (not) Kafka need fsync: Eliminating tail latency spikes caused by fsync
Why does (not) Kafka need fsync: Eliminating tail latency spikes caused by fsyncssuser2ae721
 
TechTAC® CFD Report Summary: A Comparison of Two Types of Tubing Anchor Catchers
TechTAC® CFD Report Summary: A Comparison of Two Types of Tubing Anchor CatchersTechTAC® CFD Report Summary: A Comparison of Two Types of Tubing Anchor Catchers
TechTAC® CFD Report Summary: A Comparison of Two Types of Tubing Anchor Catcherssdickerson1
 
Concrete Mix Design - IS 10262-2019 - .pptx
Concrete Mix Design - IS 10262-2019 - .pptxConcrete Mix Design - IS 10262-2019 - .pptx
Concrete Mix Design - IS 10262-2019 - .pptxKartikeyaDwivedi3
 
Work Experience-Dalton Park.pptxfvvvvvvv
Work Experience-Dalton Park.pptxfvvvvvvvWork Experience-Dalton Park.pptxfvvvvvvv
Work Experience-Dalton Park.pptxfvvvvvvvLewisJB
 
Gfe Mayur Vihar Call Girls Service WhatsApp -> 9999965857 Available 24x7 ^ De...
Gfe Mayur Vihar Call Girls Service WhatsApp -> 9999965857 Available 24x7 ^ De...Gfe Mayur Vihar Call Girls Service WhatsApp -> 9999965857 Available 24x7 ^ De...
Gfe Mayur Vihar Call Girls Service WhatsApp -> 9999965857 Available 24x7 ^ De...srsj9000
 

Dernier (20)

complete construction, environmental and economics information of biomass com...
complete construction, environmental and economics information of biomass com...complete construction, environmental and economics information of biomass com...
complete construction, environmental and economics information of biomass com...
 
Past, Present and Future of Generative AI
Past, Present and Future of Generative AIPast, Present and Future of Generative AI
Past, Present and Future of Generative AI
 
Sachpazis Costas: Geotechnical Engineering: A student's Perspective Introduction
Sachpazis Costas: Geotechnical Engineering: A student's Perspective IntroductionSachpazis Costas: Geotechnical Engineering: A student's Perspective Introduction
Sachpazis Costas: Geotechnical Engineering: A student's Perspective Introduction
 
Decoding Kotlin - Your guide to solving the mysterious in Kotlin.pptx
Decoding Kotlin - Your guide to solving the mysterious in Kotlin.pptxDecoding Kotlin - Your guide to solving the mysterious in Kotlin.pptx
Decoding Kotlin - Your guide to solving the mysterious in Kotlin.pptx
 
CCS355 Neural Network & Deep Learning Unit II Notes with Question bank .pdf
CCS355 Neural Network & Deep Learning Unit II Notes with Question bank .pdfCCS355 Neural Network & Deep Learning Unit II Notes with Question bank .pdf
CCS355 Neural Network & Deep Learning Unit II Notes with Question bank .pdf
 
What are the advantages and disadvantages of membrane structures.pptx
What are the advantages and disadvantages of membrane structures.pptxWhat are the advantages and disadvantages of membrane structures.pptx
What are the advantages and disadvantages of membrane structures.pptx
 
9953056974 Call Girls In South Ex, Escorts (Delhi) NCR.pdf
9953056974 Call Girls In South Ex, Escorts (Delhi) NCR.pdf9953056974 Call Girls In South Ex, Escorts (Delhi) NCR.pdf
9953056974 Call Girls In South Ex, Escorts (Delhi) NCR.pdf
 
Call Us ≽ 8377877756 ≼ Call Girls In Shastri Nagar (Delhi)
Call Us ≽ 8377877756 ≼ Call Girls In Shastri Nagar (Delhi)Call Us ≽ 8377877756 ≼ Call Girls In Shastri Nagar (Delhi)
Call Us ≽ 8377877756 ≼ Call Girls In Shastri Nagar (Delhi)
 
Gurgaon ✡️9711147426✨Call In girls Gurgaon Sector 51 escort service
Gurgaon ✡️9711147426✨Call In girls Gurgaon Sector 51 escort serviceGurgaon ✡️9711147426✨Call In girls Gurgaon Sector 51 escort service
Gurgaon ✡️9711147426✨Call In girls Gurgaon Sector 51 escort service
 
IVE Industry Focused Event - Defence Sector 2024
IVE Industry Focused Event - Defence Sector 2024IVE Industry Focused Event - Defence Sector 2024
IVE Industry Focused Event - Defence Sector 2024
 
computer application and construction management
computer application and construction managementcomputer application and construction management
computer application and construction management
 
Application of Residue Theorem to evaluate real integrations.pptx
Application of Residue Theorem to evaluate real integrations.pptxApplication of Residue Theorem to evaluate real integrations.pptx
Application of Residue Theorem to evaluate real integrations.pptx
 
INFLUENCE OF NANOSILICA ON THE PROPERTIES OF CONCRETE
INFLUENCE OF NANOSILICA ON THE PROPERTIES OF CONCRETEINFLUENCE OF NANOSILICA ON THE PROPERTIES OF CONCRETE
INFLUENCE OF NANOSILICA ON THE PROPERTIES OF CONCRETE
 
Heart Disease Prediction using machine learning.pptx
Heart Disease Prediction using machine learning.pptxHeart Disease Prediction using machine learning.pptx
Heart Disease Prediction using machine learning.pptx
 
🔝9953056974🔝!!-YOUNG call girls in Rajendra Nagar Escort rvice Shot 2000 nigh...
🔝9953056974🔝!!-YOUNG call girls in Rajendra Nagar Escort rvice Shot 2000 nigh...🔝9953056974🔝!!-YOUNG call girls in Rajendra Nagar Escort rvice Shot 2000 nigh...
🔝9953056974🔝!!-YOUNG call girls in Rajendra Nagar Escort rvice Shot 2000 nigh...
 
Why does (not) Kafka need fsync: Eliminating tail latency spikes caused by fsync
Why does (not) Kafka need fsync: Eliminating tail latency spikes caused by fsyncWhy does (not) Kafka need fsync: Eliminating tail latency spikes caused by fsync
Why does (not) Kafka need fsync: Eliminating tail latency spikes caused by fsync
 
TechTAC® CFD Report Summary: A Comparison of Two Types of Tubing Anchor Catchers
TechTAC® CFD Report Summary: A Comparison of Two Types of Tubing Anchor CatchersTechTAC® CFD Report Summary: A Comparison of Two Types of Tubing Anchor Catchers
TechTAC® CFD Report Summary: A Comparison of Two Types of Tubing Anchor Catchers
 
Concrete Mix Design - IS 10262-2019 - .pptx
Concrete Mix Design - IS 10262-2019 - .pptxConcrete Mix Design - IS 10262-2019 - .pptx
Concrete Mix Design - IS 10262-2019 - .pptx
 
Work Experience-Dalton Park.pptxfvvvvvvv
Work Experience-Dalton Park.pptxfvvvvvvvWork Experience-Dalton Park.pptxfvvvvvvv
Work Experience-Dalton Park.pptxfvvvvvvv
 
Gfe Mayur Vihar Call Girls Service WhatsApp -> 9999965857 Available 24x7 ^ De...
Gfe Mayur Vihar Call Girls Service WhatsApp -> 9999965857 Available 24x7 ^ De...Gfe Mayur Vihar Call Girls Service WhatsApp -> 9999965857 Available 24x7 ^ De...
Gfe Mayur Vihar Call Girls Service WhatsApp -> 9999965857 Available 24x7 ^ De...
 

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

  • 1. International Journal of Electrical and Computer Engineering (IJECE) Vol. 9, No. 1, February 2019, pp. 713~722 ISSN: 2088-8708, DOI: 10.11591/ijece.v9i1.pp713-722  713 Journal homepage: http://iaescore.com/journals/index.php/IJECE Analyzing bootsrap and foundation font-end frameworks: a comparative study Majida Laaziri 1 , Khaoula Benmoussa2 , Samira Khoulji3 , Kerkeb Mohamed Larbi4 , Abir El Yamami5 1,2,3 Information System Engineering Resarch Group, National School of Applied Sciences, Abdelmalek Essaadi University, Morocco 4 Information System Engineering Resarch Group, Faculty of Sciences, Abdelmalek Essaadi University, Morocco 5 Laboratory Signals, Distributed Systems and Artificial Intelligence, ENSET Mohammedia, Hassan II University, Morocco Article Info ABSTRACT Article history: Received Feb 18, 2018 Revised Nov 20, 2018 Accepted Dec 15, 2018 Most modern web applications use some kind of front-end frameworks for designing and creating content in a faster and more efficient way, which saves valuable time when creating responsive web sites. There are many front-end frameworks that vary enormously in terms of features and benefits, which could make the choice of front-end framework for the developer tricky. In this context, this paper focuses on an effective analysis of two of today's most popular front-end frameworks, Boostrap and Foundation. The results show that our analysis can be beneficial for developers to select the appropriate front end framework to customize their web applications. Keywords: Bootstrap Foundation Front-end frameworks Copyright © 2019 Institute of Advanced Engineering and Science. All rights reserved. Corresponding Author: Laaziri Majida, Information System Engineering Resarch Group, National School of Applied Sciences, Abdelmalek Essaâdi University, Mhannech II, B.P 2121 Tetouan, Morocco. Email: majida.laaziri@gmail.com 1. 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
  • 2.  ISSN: 2088-8708 Int J Elec & Comp Eng, Vol. 9, No. 1, February 2019 : 713 - 722 714 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. 2. 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. Figure 1. Back-end and front-end
  • 3. Int J Elec & Comp Eng ISSN: 2088-8708  Analyzing bootsrap and foundation font-end frameworks: a comparative study (Majida Laaziri) 715 A front-end framework offers preformatted and configurable elements for the components of a web page: a. A complete and manipulable layout b. Modules covering all aspects and current needs c. Standard states d. Multiple interactive behaviors e. A customizable responsive design 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. 2. 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. 3. 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. 4. 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. 5. 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. 2.2. 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]. 2.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
  • 4.  ISSN: 2088-8708 Int J Elec & Comp Eng, Vol. 9, No. 1, February 2019 : 713 - 722 716 of users. It offers a good set of features. It's free, and there's a growing community of people to help the developers if they're stuck[10]. Figure 2. Statistic of the bootstrap and foundation front-end framework 3. 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 and 4. Both frameworks have : a. Lines and columns b. Ability to nest columns in rows, and vice versa Figure 3. Bootstrap grid example Figure 4. Foundation grid example
  • 5. Int J Elec & Comp Eng ISSN: 2088-8708  Analyzing bootsrap and foundation font-end frameworks: a comparative study (Majida Laaziri) 717 d. Stylized CSS components : Bootstrap and Foundation include additional CSS styles for different components of the web page, such as typography, tables, forms, navigation bar, buttons, pagination, labels, progress bar etc as shown in 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. Table 1. Bootstrap and Foundation Comparison Bootstrap Foundation Owned by Originally developed at Twitter by Mark Otto and Jacob Thornton, now an open-source project ZURB, a web development company in Campbell, California Standard distribution package includes Required CSS (1 minified, 1 standard, both with .map files); required JavaScript (1 minified, 1 standard). Former theme is incorporated in Sass files, activated by variables. (Glyphicons are not distributed with Bootstrap 4.) Also contains two additional sets of CSS files (1 minified, 1 standard, both with .map files): bootstrap-grid, which appears to be a flexbox-based grid system, possibly redundant at this point; and bootstrap- reboot, based on normalize.css. A CDN is available for standard distribution files. Four distributions : Complete, Essential, Custom, Sass. Complete version includes compiled CSS (minified and not), plus compiled JavaScript, including individual vendor files. Essential includes typography, grid, Reveal, and Interchange only. Custom can be customized on the website for downloading, and the developer can choose elements to include and change a few variables. The Sass version can only be downloaded using the command line, Foundation CLI or Yeti Launcher. A CDN is available for standard distribution files. Additional JavaScript libraries required? Yes, you must download or link to a CDN separately: jQuery 3.1.1 Slim, Tether 1.4.0. Files are linked to just before end of body element. All dependencies are bundled in the distribution. jQuery is required, but it is part of the distribution. Files are linked to just before end of body element. Browser support Latest versions of: Chrome (macOS, Windows, iOS and Android), Safari (macOS and iOS), Firefox (macOS, Windows, Android, iOS) (latest version of Firefox plus Extended Support Release), Edge (Windows, Windows 10 Mobile), Opera (macOS, Windows), Android Browser & WebView 5.0+, Windows 10 Mobile, Internet Explorer 10+ Last two versions of Chrome, Firefox, Safari, Opera, mobile Safari, Internet Explorer mobile, as well as Internet Explorer 9+ and Android browser 2.3+ Internet Explorer support Internet Explorer 10 and higher (Bootstrap 3 recommended for Internet Explorer 8 and 9) Internet Explorer 9 and higher Other browser support notes “Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 9, though they are not officially supported.” “JavaScript: Our plugins use a number of handy ECMAScript 5 features that aren’t supported in IE8.” License and copyright Code and documentation copyright (2011 to 2017) of the Bootstrap authors and Twitter, Inc. Code released under the MIT License. Docs released under Creative Commons. MIT license, no mention of copyright
  • 6.  ISSN: 2088-8708 Int J Elec & Comp Eng, Vol. 9, No. 1, February 2019 : 713 - 722 718 Table 1. Bootstrap and Foundation Comparison Bootstrap Foundation Build tools “Bootstrap uses Grunt for its CSS and JavaScript build system and Jekyll for the written documentation. Our Gruntfile includes convenient methods for working with the framework, including compiling code, running tests, and more.” ( To access Sass files, you must install using the command line, the Node.js-powered Foundation CLI, or with its Yeti Launch application (Mac only). “Foundation is available on npm, Bower, Meteor, and Composer. The package includes all of the source SCSS and JavaScript files, as well as compiled CSS and JavaScript, in uncompressed and compressed flavors.” Other versions of Foundation are available as simple downloads without using these tools, but without SCSS files. Table 2. CSS Comparison Bootstrap Foundation Reset reboot.css(_reboot.scss) normalize.css LESS Yes No Sass/Scss Yes Yes Table 3. Grids and Responsiveness Comparison Bootstrap Foundation Base width Fluid (0, 34em, 48em, 62em, 75em) Fluid (max-width 75rem default) Columns 12 1-infinity (12 default) Single column class syntax .col-xs-1 .col-sm-1 .col-md-1 .col-lg-1 .col-xl-1 .small-1.columns .medium-1.columns .large-1.columns .[custom]-1.columns 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 col- sm-6">...</div> <div class="col-xs-4 col- sm-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> </div> </div> </div> Visibility class syntax Viewport-based: .hidden-xs-down .hidden-sm-down .hidden-md-down .hidden-lg-down .hidden-xl-down .hidden-xs-up .hidden-sm-up .hidden-md-up .hidden-lg-up .hidden-xl-up Screen Size: .show-for-medium .show-for-[custom] .show-for-medium-only .show-for-[custom]-only .hide-for-medium .hide-for-[custom] .hide-for-medium-only .hide-for-[custom]-only Generic (CAUTION: hides from
  • 7. Int J Elec & Comp Eng ISSN: 2088-8708  Analyzing bootsrap and foundation font-end frameworks: a comparative study (Majida Laaziri) 719 Table 3. Grids and Responsiveness Comparison Bootstrap Foundation Print-based: .visible-print-block .visible-print-inline .visible-print-inline-block .hidden-print screenreaders): .hide (display: none;) .invisible (visibility: hidden;) Orientation: .show-for-landscape .show-for-portrait .hide-for-landscape .hide-for-portrait Accessibility: .show-for-sr (hides visually only) .show-on-focus (for skip-lin Table 4. User Interface (UI) and Widgets Bootstrap Foundation Alerts Yes Yes — Callout Breadcrumbs Yes Yes Buttons Yes Yes Carousel Yes Yes — Orbit is back Collapse/Accordion Yes — Collapse Yes — Accordion Dropdown Yes Yes — Dropdown, Drilldown, & Accordion menus Forms Yes Yes Form Validation Yes Yes — Abide Grids Yes Yes Icons Yes Yes — with download Labels Yes Yes Pagination Yes Yes Panels Yes — now Cards Yes — Callout Progress bars Yes Yes Responsive media No Yes — Interchange Tables Yes Yes Tooltips Yes Yes 4. 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. Table 5. Results of Comparison CSS Preprocessor Both Foundation 6 and Bootstrap 4 frameworks are based on SASS. They both have a good set of mixins, a separate parameter sheet, reusable components, and so on. JavaScript The Bootstrap 4 and Foundation 6 JavaScript libraries are written on ES6, which means that the devellopper does not need Babel (or any other transpiler) if it wants to individually include each of their JS tools in its development pipeline. However, they both have ES5 transpired versions of each component. Stability 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.
  • 8.  ISSN: 2088-8708 Int J Elec & Comp Eng, Vol. 9, No. 1, February 2019 : 713 - 722 720 Table 5. Results of Comparison (continue) CSS Preprocessor Both Foundation 6 and Bootstrap 4 frameworks are based on SASS. They both have a good set of mixins, a separate parameter sheet, reusable components, and so on. Grid 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. Menus While Bootstrap 4 has the same old drop-down lists, tabs, and basic navigation menus that we learned from version 3, Foundation has dramatically improved their drop-down lists by including other variations that might be useful in some case. Browser support Both frameworks support the following browsers: Chrome (Mac, Windows, iOS and Android), Safari (Mac and iOS only), Firefox (Mac and Windows) and Opera (Mac and Windows). However, there is a slight difference with regard to Internet Explorer - Bootstrap supports IE8 and newer versions, while Foundation starts at IE9 plus newer versions. CSS preprocessors Bootstrap includes SASS and LESS files, which means that it can be used in applications that use one of these CSS preprocessors. On the other hand, Foundation only supports SASS. 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. Figure 6. Bootstrap popular website
  • 9. Int J Elec & Comp Eng ISSN: 2088-8708  Analyzing bootsrap and foundation font-end frameworks: a comparative study (Majida Laaziri) 721 Likewise, we present the advantages of Foundation Framework: a. More than one design approach by the developer: Foundation provides a better environment for customizing the web site. Although it is possible to customize with Bootstrap, it takes a lot of effort for the developer site to look like other Bootstrap sites. With Foundation, the detached CSS design is a lightweight design and the developer does not have to put a lot of effort into customizing it. b. Foundation does not need to add classes to be responsive or have a certain style: If the developer does not add the correct CSS classes with Bootstrap, the effects do not appear. With Foundation, there are built-in basic CSS appearances. Some may prefer this, especially since there will not be as much CSS in its HTML. c. More features of the grid system: Many prefer the Foundation grid system because they find it offers more flexibility. Some additional abilities : 1. The ability to center columns 2. The developer can add a "collapse" class that allows him to easily edit columns and remove gutters. 3. Can use a block grid that allows you to create columns of equal size with minimal markup. d. Other built-in widgets: With regard to additional components and JS extensions, Bootstrap and Foundation are basically equal. Here are some extra that Foundation. 1. Form validation, Abide : HTML5 form validation library 2. Menus off canvas : the developer easily places the navigation of his site on the side of his site 3. Pricing tables : ready-to-use table, designed to display the prices of a product by subscription Responsive media 4. Reactive media, exchange : the website loads different media for different devices / screen sizes, so that the developer can customize the user experience 5. Support from right to left : the developer the direction of the text ; Ideal for sites in other languages 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. Figure 7. Foundation popular website 5. 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.
  • 10.  ISSN: 2088-8708 Int J Elec & Comp Eng, Vol. 9, No. 1, February 2019 : 713 - 722 722 REFERENCES [1] D. R. Lakshmi and S. S. Mallika, “A Review on Web Application Testing and its Current Research Directions,” International Journal of Electrical and Computer Engineering (IJECE), vol. 7, no. 4, p. 2132, 2017. [2] W. D. Cletus, A. Kakandar, and C. N. Paul, “Responsive Web Design Frameworks : A Review,” Int. J. Sci. Res. Comput. Sci. Eng. Inf. Technol., vol. 4, no. 5, pp. 132–136, 2017. [3] W. Computer, “Responsive Web Design With Bootstrap,” vol. 5, no. 4, p. 274, 2016. [4] N. Jain, “Review of Different Responsive CSS Front-End Frameworks,” J. Glob. Res. Comput. Sci., vol. 5, no. 11, pp. 5–10, 2014. [5] “Introduction aux frameworks front-end (Bootstrap, Foundation) – alticreation.” [Online]. Available: https://www.alticreation.com/bootstrap-foundation-frameworks-front-end/. [6] S. Subramaniam, S.-C. Haw, and P. K. Hoong, “Bridging XML and Relational Databases: An Effective Mapping Scheme based on Persistent Labeling,” International Journal of Electrical and Computer Engineering (IJECE), vol. 2, no. 2, pp. 239–246, 2011. [7] S. K. Patel, “Responsive Web Design with AngularJS,” p. 142, 2014. [8] N. Edan, A. Al-sherbaz, and S. Turner, “Design and Implement a Hybrid WebRTC Signalling Mechanism for Unidirectional & Bi-directional Video Conferencing,” vol. 8, no. 1, pp. 390–399, 2018. [9] “Les meilleurs frameworks CSS pour créer un site web professionnel. | Outils-web.fr.” [Online]. Available: http://outils-web.fr/les-meilleurs-frameworks-css-pour-creer-un-site-web-professionnel/. [10] “COMPARAISON ENTRE LES FRAMEWORK FRONT-END BOOTSTRAP ET FONDATION | SUPINFO, École Supérieure d’Informatique.” [Online]. Available: https://www.supinfo.com/articles/single/4903-comparaison- framework-front-end-bootstrap-fondation. [11] “Tutoriel Bootstrap : les premiers pas - 1&amp;1.” [Online]. Available: https://www.1and1.fr/digitalguide/sites- internet/developpement-web/tutoriel-bootstrap-les-premiers-pas/. [12] “Responsive CSS Framework Comparison | Vermilion Design + Digital.” [Online]. Available: https://www.vermilion.com/responsive-comparison/.