Full-featured (Bootstrap, Foundation, Semantic UI, etc.),
Material Design Oriented: (Materialize and Material Design Lite) and
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).
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.
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.
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.
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:
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.