TNTWeb-the full name of Tencent News front-end team, the small partners in the group have practiced and accumulated in the front-end fields such as Web front-end, NodeJS development, UI design, and mobile APP.
At present, the team mainly supports the front-end development of Tencent News's various businesses. In addition to business development, it has also accumulated some front-end infrastructure to empower business efficiency and product innovation.
The team advocates open source and co-construction, and has a variety of technical experts. The team’s Github address: https://github.com/tnfe
The author of this article zhangzheyi1 , my blog address: https://www.zhangzheyi1.com
A good css framework can make development faster, no longer worry about compatibility, and generally have a reasonable layout, as a development can reduce UI design thinking. Recently, we have compiled some CSS frameworks for developers to choose and use, and they are ranked in no particular order.
One, tailwind
The Tailwind CSS is a function of Priority CSS framework, which incorporates such Flex , Pt-. 4 , text-Center and Rotate-90 such a class, they can be combined directly in the script markup language Get up and build any design.
Main features:
- Componentization
- Small size, high performance
- Responsive
Portal: https://tailwindcss.com/
Two, Tachyons
Tachyons has the advantages of the current popular CSS framework, without the need to write a lot of CSS yourself. Lightweight, customizable and expandable, etc. Tachyons has an extremely detailed atomic class, just add a new style of attribute to the class name. There is no need to worry about naming conflicts, and no need to worry about style coverage, so that you can see the specific content of the style more intuitively.
Portal: https://tachyons.io/
Three, Skeleton
If you are working on a smaller project or just feel that you don't need all the utilities of a large framework, you should use Skeleton.
In the official website of Skeleton css, three advantages of Skeleton are introduced:
- Light as a feather at ~400 lines & built with mobile in mind. (ultra-lightweight, built for mobile)
- Styles designed to be a starting point, not a UI framework.
- Quick to start with zero compiling or installing necessary.
(Quick start, zero compilation or installation is necessary)
According to the characteristics and advantages of Skeleton, its typical application scenarios can be summarized as follows:
- css learning and demo exercises;
- Create a small responsive mobile phone application;
Portal: http://getskeleton.com/
Four, Foundation
Foundation is an adaptive front-end framework made by the product design company ZURB.
Compared with other tools of the same type, Foundation's mobile solution is even better. Drawing lessons from the ideas and methods of responsive Web design, Foundation has made corresponding presets for the presentation of content structure in different types of devices.
Portal: https://get.foundation/
Five, bootstrap
Bootstrap is still one of the most popular CSS frameworks. They provide a large number of documents, examples and demonstrations that can help you quickly develop responsive Web. The current version of the framework is Bootstrap 5. Compared with V4, some changes have been made:
- Has its own SVG icon library
- No longer supports jquery
- No longer supports IE
- Added css custom attributes
- Enhanced grid system
- Forms can be updated
Portal: https://getbootstrap.com/
Six, UIkit
Compared with other general css frameworks, UIkit has some components that these frameworks do not have, such as
- Lightbox (using modal dialogs to create a unique lightbox for pictures and videos)
- Parallax (dynamic CSS feature that depends on the position of the scroll bar on the page)
- Nestable (create a nestable list that can be sorted by drag and drop)
- Sortable (create a sortable grid and list to rearrange the order of elements)
Portal: https://getuikit.com/
Seven, Semantic UI
Semantic means semantics. Because the Semantic UI classes are clear and easy to understand, developers not only save learning time, but also make the development of the project at hand faster and more intuitive. In addition, the variety of layouts is another advantage of Semantic UI. With different themes, you can easily find the necessary components for various projects.
Semantic UI has some shortcomings, the update frequency is lower than other popular frameworks, and the responsiveness of running on some devices is average.
Portal: https://semantic-ui.com/
Eight, Bulma
Bulma is a modern CSS framework based on Flexbox. It provides ready-to-use front-end components, and you can easily combine these components to build a responsive web interface.
Compared with bootstrap, the biggest difference between the two is that bulma is pure css, no js, and bootstrap has JS. Here is an example of column layout :
- Add
columnscontainer - Add any number of
columnelements
No matter how much the number of columns, each column width are equal .
<div class="columns">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
<div class="column">5</div>
</div>Portal: https://bulma.io/
Nine, Picnic
Picnic is a lightweight CSS framework, the compressed size is less than 10kb. The biggest feature of the framework is that it has multiple interactive components, including grids, forms, tabs, tool tips, etc., which can help developers quickly create responsive websites and web applications.
Picnic CSS is a Sass , it can more easily edit and customize variables, such as color and length. It also has some nice UI components written in pure CSS, such as modal windows and content sliders.
Portal: https://picnicss.com/
Ten, NES.css
NES.css imitates the 8-bit Nintendo Entertainment System graphics to create a retro game appearance:
NES.css only requires CSS and does not rely on any JavaScript. As every game enthusiast, I will shout: I love it!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。