Submodule 3.1: Front-end frameworks

What are front-end frameworks?

Let's start by explaining what front-end frameworks are.

Imagine that you want to build a website and you already have a good knowledge of HTML, CSS and JavaScript. What will you do?

Well, you will start from scratch and develop your own CSS and JavaScript interactions that will serve your goals for the website. During the process, you will realize that you will be using the same style and interactions in multiple parts.
In the end, you will have a group of style and Javascript rules.
Next time that you will have to build a website, instead of writing everything from the beginning you will realize that it will be quicker to just take the groups you have already created and modify them for your needs.

Front-end frameworks are based on the above logic.

They are here to make the website implementation faster. They have built-in HTML, CSS and JavaScript components.
Through these frameworks, developers have access to ready-made Typography, Forms, Buttons, Tables, Navigations, Dropdowns, Alerts, Modals, Tabs, Accordion, Carousel etc. and many other JavaScript, HTML and CSS components.
In summary, Front-end frameworks are a collection of HTML, CSS and JavaScript features.

There are numerous front-end frameworks. As we will explain later, in this course we will discuss the Bootstrap framework.

Why to use Front-end frameworks?

As we explained Front-end frameworks enable as to build websites quickly.
However, the above is not the only reason why we use them.

Front-end frameworks provide us with what is called “responsive web design”.

Responsive web design is what enables users to effectively access your website from various devices and screen sizes ( e.g. mobiles, ipads, laptops, desktops).
When using a framework, the site is automatically arranged to fit the screen without additional code.

Also, frameworks take care of the cross-browser compatibility.

You may have noticed that no two browsers show the same page with exactly the same way. Sometimes the changes are small, but there are times where something may be completely different or not working on one browser.
Frameworks, minimize this effect and makes content appear to multiple browsers almost identical.

To summarize, we use Front-end frameworks because they provide us with:

• ready-made features that minimize our time
• responsive web design
• cross-browser compatibility

Bootstrap Framework

Bootstrap is the most widely used framework across the world, it was invented in 2011 by Mark Otto and Jacob Thornton.

• Bootstrap provides us with a variety of CSS classes that help us with the design implementation of our website.
• Also, it offers ready-made web components ( e.g. carousel, navigation bar, accordion) which help us create functional, interactive and modern websites.
• Bootstrap also supports “consistent typography”, which is the consistent structure of the text in the website.
• Of Course, in addition to the above, bootstrap is designed to provide responsive, mobile-first websites!

Javascript frameworks

Bootstrap uses two main libraries for its components. These libraries are Tether and jQuery.

Tether is a JavaScript library which is focused on the positioning of different elements in a web page. Bootstrap uses this library to define the position of the different components. ( In the new version tether has been replaced by Popper.js).

jQuery is a very powerful library. Using this, you can do with a few lines of code, things that otherwise need a lot of time and lines. Bootstrap uses this library to create the different JavaScript plugins ( modals, Popover etc).

Conclusion - Further reading

Bootstrap Official Resources

• Bootstrap 4 Home Page

• Popular front-end UI frameworks