// Trends
7 Popular CSS Frameworks to Learn for 2021
// Trends
If you set yourself the goal of quickly prototyping applications, then there is no more logical step than simplifying your task with a convenient CSS framework. This will help to solve the problem of choosing styles.
Using a CSS framework to write custom CSS code is more than justified by the limitations of today's most valuable resource - time. It is this factor that determines the appropriateness of spending this resource on the creation of functionality. Certainly, you can create CSS from scratch. This will certainly help improve performance and aesthetics. The only thing that should be understood and accepted is the fact that not everyone has a talent and ability for creativity in the field of rendering, as well as colossal experience with working with CSS. Perhaps it makes sense to entrust this work to a real professional or use a well-developed framework to create a trending user interface. There are a lot of similar programs, they are in some way superior to one another, in some ways they lose to one another.
Bootstrap
This CSS framework became popular quite unexpectedly, since it was originally developed for Twitter, but at the moment it has successfully left this social network and entered into service with a lot of projects, including Landing Page layout, WordPress trend themes, templates for various CMS, and so on. Now the 4th version of the system is the most popular, but so far it has not surpassed the previous one in terms of recognition. The difference between the two is that the old version's markup was based on the float property, while the new version uses the Flexbox model. Rumor has it that grid-based version is coming soon, but it’s only rumors so far.
It is necessary to highlight good documentation among the advantages of Bootstrap, which is present not only in English, but also in Russian. The framework under consideration contains a lot of classes for building elements based on the grid-system (12-column grid). We must not forget that the framework also includes many components that will allow the user to create and format cards, menus, backgrounds, buttons, accordions, modal windows, tables, and more.
It is also important to mention the presence of additional sites whose themes are based on this particular framework (for example, bootswatch.com). They are also available on CDN, not to mention a ton of add-ons and a large site entirely dedicated to snippets and templates. To work correctly, you only need to check the Bootstrap version and make adjustments if required. All of the above explains the love of programmers for this system: after all, you don't need to think about layout, styles - you just need to use the framework classes when writing code in Vue, React or Angular. If a programmer wants to use Material Design for Bootstrap, then you should use the site mdbootstrap.com and just download the appropriate set of styles. Ready-made assemblies are already present there for the above frameworks.
Talking about the merits, one should not be silent about the disadvantages. The first and perhaps most significant disadvantage is the heavy CSS file containing the styles. It weighs as much as 153kb in version 4.3.1 and 57kb of js-file in minified version (tabs, modal windows, carousel and drop-down menus will not work without it).
There is also a controversial point. While some users treat Bootstrap like dirt for redundancy of styles and classes, others argue that it is possible to compile the grid and the required classes, and not the whole set at once (the only hindrance is that you need to know the SAAS preprocessor). Another option is to use CDN instead of a local file to connect. In this case, the possibility remains that this file remained in the browser cache after the user downloaded this file earlier.
Foundation
According to the official website of this project, Foundation is not one, but a whole family of innovative responsive front-end frameworks. Its purpose is usually to accelerate the transition from prototyping to manufacturing at any scale. With the help of this framework, the creators assure, you can create a website or application that can work on any device and e-mail newsletters will be equally well displayed in all email clients, without exception, including Outlook.
It is not uncommon for users to compare Foundation with Bootstrap, since at the moment these frameworks officially compete directly.
Despite the fact that Foundation is already 9 years old, the system still has a very impressive number of those who would prefer it to others anyway. The reason is that the framework provides its user with ready-made starter templates that allow you to create web projects within the minimum period of time. At the moment, this framework is used by websites like eBay, Mozilla, Amazon, EA and many others, which might be called recognition.
A pleasant solution is the ability to download not the complete set of components, but the "cut-version", the set of which can be defined in the "Customize Foundation" block, the download page of which provides a choice among all the components. In addition, such a version can be installed through both npm and yarn, and downloaded from the CDN.
The sixth version of Foundation is based on the Flexbox model, which is similar to Bootstrap-4, and the approach to classes is very similar, the only difference is in the names. In particular, this framework uses grid-container classes instead of container, grid-x grid-padding-x instead of row, and inside contains <div class="large-4 medium-4 small-4"> elements similar to <div class="col-lg-4 col-md-4 col-sm-4">. The only difference is that frameworks use different units of measurement: if px was chosen for Bootstrap, then the creators of Foundation settled on rem.
There are also fundamental differences in such an issue as design. In the case of Foundation, you can observe the provision of color classes, classes for managing padding, classes for displaying elements exclusively on certain devices, styles for forms and buttons, not to mention other useful utilities. This is an absolute advantage, which at the same time becomes the reason for a small drawback - greater number of angles, rather than those of competitors, who mitigated this problem with border-radius.
The solid file size in this case has become a problem, moreover, a more significant one, since the weight of the minified CSS file is 142kb, and the js file is as much as 479kb, which, when compared with the figures for Bootstrap, indicated above, the scales seem to be inexorable reaching for the floor. Nevertheless, Foundation's documentation is at a more than decent level, and when you connect jQuery and the foundation.js file, you will be able to use a variety of components and plugins (scrollboxes-sliders, drop-down and overflow menus, screen tips, Orbit for creating a slideshow, etc.).
Ant Design
The most popular and very effective framework of those that are known to many users is Ant Design. As the official website of the company informs, its purpose was originally to simplify design, as well as facilitate prototyping for all project participants in order to increase the efficiency of developing background proposals and products. The creators of this design language for background applications are constantly improving it, striving for maximum unification of specifics, reducing the cost of design differences, as well as freeing up resources that are usually spent on design and external development.
For advanced users, it is important to highlight the features of this framework against the background of similar ones. First of all, Ant Design is a full-fledged design system, a visual language for developing the user interface of enterprise classes for web applications. Do not forget that a fairly large number of high-quality components are available, as they say, "out of the box", that is, initially. It's also quite nice that this framework is written in TypeScript with predefined types. And finally, the most complete package of design and development tools, about two of which - tables and forms - a couple of words should be said separately.
Ant Design tables have several nice features, including:
The next problematic point is the table styles inherent in the framework. For example, for languages that are based on hieroglyphics, the word-break: break-word property (breaking words when exceeding the bounds of a block in random places in the absence of a suitable place for a line break) is quite applicable, but when working with the alphabetic, problems begin, since the structure of developer languages and user languages are most often different in nature. There is no hyphen in Chinese, for this reason the framework begins to conflict with the user in performing its functions.
Nevertheless, this problem is solved at the software level quite simply.
The last problem can also be called vertical alignment of text in cells in the middle, which ruins the appearance of the project with a large amount of content in the cell. This issue is not fundamental for everyone, but perfectionism in work is rather a positive phenomenon, which means that it is never too late to strive for excellence. However, Ant Design tables have been and remain an excellent tool, with almost no analogues in the React ecosystem.
It would be appropriate to mention Materialize first.
It is a relatively classic framework based on the principles of material design, which was developed and successfully applied in its own services and on the Android operating system by Google. Programmers have the ability to simply install the framework files by downloading, use the SASS version for compilation with their own variable values, connect files via CDN or use npm and bower to install; css and js file and Roboto font are at their disposal.
Materialize demonstrates trending in 2021 website color schemes, which is a full-fledged advantage over other frameworks, moreover, the colors come in the form of a full-fledged palette with soft transitions. The grid is as simple as possible: inside the container block, first of all, lines of the format <div class="row"> are placed, and in the second are placed columns with markup like <div class="col s6">. Responsive grid classes start with .s, .m, .l, .xl, depending solely on display size. The grid, surprisingly, is based on the float property, which, unlike more popular frameworks, allows it to work even in older browsers. The set of classes contains options for both directions - horizontal and vertical - text alignment, displaying content on specific screens, click and hover effects, pulsations, tables, buttons and many other components that are very pleasant even from a visual point of view. In general, a lot of attention is paid to the visual in this framework, due to which it has, if not huge, but more than worthy audience. This is also shown by very interesting design options for JS components with stylized Material Design, which favorably distinguishes Materialize from seemingly similar frameworks, for example, FeatureDiscovery, Sidenav or Pushpin. The eye also delights in forms and their elements such as checkboxes or radio buttons, drop-down lists (select) and range-sliders (range). Of the pleasant moments, you can also recall the option of displaying a mobile menu, the themes for which are already paid on the official website.
Developers are different, tolerance in this direction dictates the following: each type of programmer has its own most convenient frameworks. For example, a specific Material-UI was created for React developers, which contains a sufficient number of components based on the principles of material design. It is currently available for installation on npm.
Another worthy project is the Agile CSS Framework. As the name implies, this program was conceived as a fast CSS-framework containing, according to the developers, "a small CSS file that works wonders". Already the home page, without further ado, offers a developer to get a lot of user interface elements for quick and free creation of simple HTML pages. This framework is downloaded from the git repository. It also contains a solid list of components that compete with Foundation and Bootstrap. It includes: promo blocks, alerts, parallax, accordions, switches, tabs, carousels, sliders and much more. The class names are completely copied from Bootstrap, so users who are accustomed to the more popular framework do not have to relearn.
Their detailed description with examples is contained in the documentation. In general, many consider this program to be just a nicer-looking copy of Bootstrap. Nevertheless, it has its own advantages, among which, first of all, the size of the css file is only 6kb, which caused fast loading of both the main classes and UI elements without JavaScript or jQuery. The documentation also contains a lot of examples with the markup of a huge range of pages: a blog, a store, a travel or corporate website, where you can’t think about creating a layout, just taking a ready-made example.
The disadvantages, albeit tolerable, are the availability exclusively via the http protocol, which is why, for example, codepen.io does not load the CSS file remotely, as well as rather rough and slightly unfinished styling of elements compared to the "big brother" of Bootstrap.
The last framework impossible not to mention is Pure CSS.
Yahoo's framework with a minimal file weight (3.8kb of css-code) is adapted primarily for mobile phones to facilitate the code, primarily for mobile.
The Pure CSS grid is adapted for both 12 and 24 column layouts. Grid works on Flexbox model. Container sizes are customizable, pure-u classes are used within it. Building more complex grids for different screens requires the use of classes such as pure-u-md-1-2 or pure-u-lg-1-3.
Pure CSS includes forms, tables, vertical and horizontal menus, and buttons with classes very similar to Bootstrap. You can use ready-made solutions in terms of layout in the Layouts section on the offsite.
Good luck with mastering CSS frameworks!
Web Design Gallery
our works
