Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge of "what are the practical frameworks and tools for CSS developers". Many people will encounter this dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

SMACSS

SMACSS's only focus is on efficiency, especially for users in a team environment. Have you ever found yourself in a passive state where you need to constantly write and rewrite CSS code to make everything work? SMACSS is for people who want to write simple code in large projects, but don't want to rely solely on generating a lot of code to accomplish the task. If you are interested, please click here to view an introduction from the Envato website, which is the most suitable guide to getting started with SMACSS.

Unsemantic

Unsemantic is a fluid grid system that is a succession solution for 960 Grid System. It works in the same way as its predecessors, but abandons the original large number of columns and turns to a percentage-based basis. Unsemantic seems to focus part of its attention on search engine functionality, as well as on how to use it to improve the readability of the overall code to the robot mechanism.

Susy

For now, most of the CSS frameworks on the market are still immature, and most of them still require us to write code in a specific way, which naturally leads to an additional learning and integration difficulty curve. Susy is an excellent grid system that allows people to write code in the way they are most familiar with, without having to learn much of the knowledge necessary to ensure the smooth implementation of development tasks. Interested friends can click here to view the article on the Zell-Weekeat.com website to see how Susy can help you build better Web design results.

Primer

Do you belong to regular guests who need to visit GitHub frequently? I guess the answer is mostly yes. But you may not realize that GitHub actually uses one of its own internal CSS toolkits to support the entire site. This means that almost everything we see follows a specific style, including layout, button style, font selection, and so on. Just this year, this toolkit has come to us as an open source: Primer. Interested friends can click here to view an introduction to the new toolkit on the Markdotto.com website.

Loaders

Today, Web has become a rich machine, and we can produce dazzling results by relying solely on all kinds of Web development languages. In this respect, we have Loaders.css support, a small library that offers 28 unique loaders and allows you to use them directly.

Jeet

Jeet is not only the best site I've seen for a long time, but it's also the ideal grid system I've ever encountered in my entire work experience-and I'm sure I'm not the only user to make that claim. Jeet is actually a CSS preprocessing tool. With its help, we are no longer limited by classes such as .col-6; instead, you can add any fraction, decimal, or combination of both to create a fully customized grid scheme.

Transformicons

I believe you will fall in love with Transformicons, because it fully shows how amazing results can be created by the combination of JavaScript and CSS. Transformicons is a set of libraries designed to help you convert SCG and CSS icons into different shapes.

Hover

This set of CSS3 Collection can help you introduce the hover function to all kinds of links, buttons, logos, SVG and even characteristic images. With its support, we can easily apply our own elements, modify or directly use our own ideas and inspiration. Hover is available for CSS, Sass, and LESS. It can also achieve a variety of hovering effects that we often see in iPhone applications, which further proves that we will be able to develop mobile applications directly in Web in the near future.

Bourbon

Bourboun was originally given many different names, but whatever the name, its most striking feature is its important role as a reliable alternative to Bootstrap. For its part, Bourbon is a lightweight framework; but when combined with other interesting software packages, it can also be transformed into a powerful and concise framework that helps you create and write independent code.

Spritebox

Spritebox is a solution for all Sprites users, and it's also a WYSIWYG tool-so there's no need to dwell on its functionality. It is important to emphasize that it is probably one of the most convenient solutions we can find to generate CSS from a single sprite image.

Font Awesome

The reason why Font Awesome is included in this list is very simple: it is currently the most popular font resource for the CSS developer community. No project can be successfully completed without ideal font attributes, and this set of resources is the best choice available to everyone. Not long ago, we just released a list of SVG icon resources (click here to see the original English text), which contains a large number of interesting solutions. In addition, you may also be interested in the Font Awesome to PNG service, which is used to easily and quickly convert Font Awesome icons into stand-alone images.

Stitches

Stitches is a HTML 5 sprite table generation tool. We don't have much to say about it, you can easily get the sprite table after uploading the image-it's as simple as that.

Sass

If you are going to write CSS like a professional, then Sass is definitely your best choice-or at least one of the best choices. Overall, it revolutionizes our CSS coding and gives you a sense of how to write in a real programming language. Here, we highly recommend that you click here to view the Sass user guide-it will save you a lot of time to explore!

Less

Less is another excellent CSS preprocessing tool, and there has been a discussion in the community over the past few months about whether Less can continue to grow. Some technicians think it's time to be fully embraced by Sass, but others take a different view. It is worth mentioning that Chris Coyer also joined the heated discussion, interested friends can click here to view the relevant content (English text).

Turbine

PHP has amazing strength in preprocessing stylesheets. PHP also has the ability to handle its own internal variables and collaborate with code during stylesheet processing in real time. This dynamic environment allows you to complete all kinds of in-depth and complex designs. Turbine CSS is similar to Sass in that it can take advantage of various independent PHP plug-ins to achieve a variety of functions, including browser positioning and advanced design variables, and so on. Interested friends can click here (English text) to learn about the role and ability of Turbine through this article.

Myth

We focus on various preprocessing solutions in today's article, but all the tools on the list are trying to provide different implementation perspectives in a unique way, and Myth is no exception. The biggest difference of Myth is that it cannot really use a unique syntax mechanism, but gives different solutions to each browser according to their respective supporting capabilities, effective specifications, and reference suggestions. For now, with the continuous development of various specifications, our ultimate goal will be to bring all kinds of browsers into a unified category without the power of Myth. It's a bit like writing CSS code in a way that hasn't really arrived yet.

Stylus

Stylus is a revolutionary new language that allows users to generate CSS code in an efficient and dynamic way of expression. In addition, it supports both indentation syntax and regular CSS styles.

This is the end of the content of "what are the practical frameworks and tools for CSS developers?" Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.