Most Popular CSS Frameworks

Full-featured (Bootstrap, Foundation, Semantic UI, etc.),

Material Design Oriented: (Materialize and Material Design Lite) and

Light (Pure).

We will not describe them all, instead we will give a comparative table:

Most Popular CSS Frameworks

To learn more about these CSS frameworks, check out the Most Popular Responsive CSS Frameworks article.

Preprocessors – Sass and LESS. Writing CSS is a chore, and small tasks like finding color values, closing tags, or any other repetitive operation take up a lot of time. This is where the preprocessor comes in handy. The CSS preprocessor is a scripting language that extends the capabilities of CSS.

The most common preprocessors are Sass and LESS. They have some basics in common:

  • Syntactic elements and
  • Backward compatible with regular CSS files.
  • However, there are also differences between them.

Sass stands for Syntactically Awesome Style Sheets. Sass runs on Ruby and is processed on the server side. Since the roots of its origin go back to the Ruby language, installation is carried out through the so-called gems (several Ruby / Rails libraries).

LESS stands for Leaner Style Sheets (“Compact Style Sheet”). At the moment, it can be called more of a JavaScript library that is processed on the client side in the browser. Developers are much more likely to choose LESS when using JavaScript with style sheets. This technology allows you to reuse CSS code snippets in LESS files.

DOM: the structure of a web page

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It interprets the page so that programs can modify the structure, style, and content of the document. The DOM renders the document in the form of nodes and objects, allowing programming languages to connect to the page.

Tree of HTML DOM objects.

How it works. We will assume that a web page is a document that can be presented either in a browser window or as HTML source code. The DOM is a representation of this document, so it can be changed. The DOM is an object-oriented representation of a web page that can be modified using a scripting language such as JavaScript.

The DOM must comply with the standards of the W3C and WHATWG specifications, which are implemented in most modern browsers. The modern DOM is built using several APIs working together. The DOM defines objects that fully describe a document and the objects in it.

JavaScript: bringing the web to life

JavaScript (JS) is one of the most popular scripting languages. It is mainly known for its applicability to both front-end and back-end development. In the frontend, it is used to give web pages dynamics.

How JavaScript works. JS enhances the overall interactivity of the site. It allows you to model animated UI components such as sliders, popups, advanced site navigation menus, and more. With the help of JavaScript, a website can be endowed with different functionality, which is not achievable only with HTML and CSS. Web pages developed with JavaScript respond to user actions and update dynamically. Thanks to JavaScript, this process does not require page reloads to reflect the changes.

JavaScript frameworks and libraries and why we need them

For those new to the field, it may seem like frameworks and libraries do the same thing, making different visual elements interact with each other. Let’s be honest: it’s not that far from the truth. However, there are several distinguishing features. So let’s define what a JS framework is, what a JS library is, and what purpose they both serve.

Frameworks are templates for building a website or web application. They provide a structure (such as scaffolding) on which to place the entire project. While the framework sets up page templates, they create a structure with defined dedicated areas for embedding the framework code.

So, JavaScript frameworks are complete sets of tools for building and customizing a website or web application.

Libraries are collections of pre-written pieces of code that are reused to implement core JavaScript functionality. If necessary, the code snippet can be easily integrated into the existing code of the project.

Thus, the library is a specialized tool for specific narrow needs, and not a universal machine for preparing the entire project.

Core frameworks and libraries

Let’s start with frameworks:

Angular is a JavaScript framework from Google that is compatible with most common code editors. Angular is designed for building dynamic Single Page Applications (SPA) and progressive web applications. Ever since the initial release, this framework has been most appreciated for its ability to transform HTML-based documents into dynamic content. Angular is one of the most popular frontend frameworks. You can read more about it in our article on the pros and cons of developing with Angular.

Vue.js is another open source single page application framework that requires knowledge of HTML and CSS. It uses a component-based development model and allows you to attach components to a project. Vue.js is an example of a library that is more like a framework, so we categorized it as a framework. It offers a whole bunch of templates and patterns to use in development. Vue is primarily known for its small document size and HTML-based syntax. To learn more about the advantages and disadvantages of Vue.js, follow the link.

Ember.js is a framework for developing single page, mobile and desktop applications. It uses the Model-View-ViewModel (MVVM) design pattern. Ember’s tools allow you to design your development environment, and its command line interface provides tools for automating scripts.

Maria Fassi

Leave a Reply