High -quality web design requires intuitive and user -friendly interface, and the elements on the screen also play a very important role. Web designers are constantly looking for the collection of excellent code, hoping to improve work efficiency. But it is not always easy to find a suitable tool library. There are too many resources on the Internet, and it is also free, so it is difficult to judge which resources are better. This is why the best library list is carefully searching and writing this best library list.
Whether you want to create a visually attractive and powerful layout, or you need to add rules and verification on the screen and other areas, you will like this collection. The library listed here is created by experts with rich web design experience. These libraries are not only an excellent tool for experienced designers, but also a good tool for beginners. This collection will help you save a lot of time, take a look!
1. Buefy
The lightweight UI framework for the Vue.js project is built with popular FLEXBOX -based CSS library Bulma. It has all components required for typical web apps, including dynamic elements such as modal frames, toasts and notifications, allowing developers to quickly add any user interface to the existing Vue.js project.
2. HR.js
zero -dependent library, which is used in DOM to display and replace the string in a programming manner. The use of hr.js API can no longer be simple — just use the CSS selector to locate the parent HTML element of the target text, select To highlight the displayed words, set the background color, and then complete!
3. React VR
React VR is a framework created for VR applications and runs in the web browser. It combines modern APIs (such as WebGL and WebVR) with the statement capabilities of React and provides experiences suitable for consumers through various devices.
4. Tippy.js
Lightweight pure JavaScript dynamic prompt tool plug -in library. It provides a large number of different suspension effects and more than 20 customized options. Tippy.js is super lightweight and has a very good browser compatibility. When it is not supported, it will automatically return to the conventional title attribute.
5. Barba.js
The JavaScript library without dependence is used to create a smooth transition between the views of a single page application. This logic is built around PJAX (Push State Ajax), which will check all effective URLs, prevent their normal behavior, and load the new page through XMLHTTPREQUEST. Barba also ensures that the state changes can be correctly reflected in the URL of the page by using the Push State API.
6. UIkit
Excellent CSS and JavaScript front -end frameworks, including SVG icon fonts and dozens of components. Whether it is the appearance or as a framework, the design of UIKIT is very good. It has a unified style, an API that is easy to remember, many custom options and useful modifier classes. The document is also very well written.
7. Haul
haul is an command line tool for developing the React Native application. It can directly replace React Native Packager, provide better webpack support, improve error messages, and greatly reduce compile time. HAUL is customized and fully open source, and the documentation is also excellent.
8. AcrossTabs
JavaScript library used to communicate between the browser tabs, so that a web page can open and close other browser tabs. The parent tab can access the useful information about its sub -tabs, including the unique ID and the sub -tabs still open or closed.
9. Stylelint
Stylelint is a modern CSS Linter that helps the team for compulsory use of objective CSS standards in the style table. The library is very powerful and can be disabled or listed in specific attributes, capture errors and identify SCSS syntax. StyleLint is completely customized, you can choose to add new rules or remove your unremitting rules.
10. Iconate
Excellent Vanilla JavaScript library, allowing you to convert one icon in the click to another icon and have various smooth animations. Iconate is used together with all CSS icon fonts -only need to add an icon to HTML, and use simple JavaScript API to choose which one to convert it into. There are more than 15 animations to choose from.
11. React-Datasheet
React components are used to add fully functional Excel data tables to the application. The table unit can edit, group selection, copy, paste, delete, and any other features you expect. There are three useful examples on its GitHub homepage -a basic table, a formula for SPREADSHEET, and a form with nested components.
The
12. Pure CSS
modular CSS framework is very small. After the compression, the entire library is only 3.8KB. You can also reduce the size by removing some unnecessary parts. The module includes basic styles, response network formats, form components, buttons, tables and menus.
13. Simple Icons
Gone a large number of free icons of social networks, APPs, services and other brands. Because all icons are made of SVG, they can be scaled to any size without worrying about turning vague. Based on SVG, they are also very lightweight -most of them are less than 500 bytes, and more details are about 1 or 2KB.
14. Chroma.js
Small JavaScript library used to handle colors. It provides rich APIs, which has more than 50 operations of operational colors. It can switch between color patterns to change brightness and saturation, creating gradient gradients and many other useful methods.
15. Weex
Weex is a framework for building cross -platform mobile applications, similar to React Native, but it is suitable for Vue.js projects. It allows you to use HTML, CSS, and JavaScript to write applications, and then render it into Java or render it into Swift in Android. This framework has many built -in components, APIs and other useful functions.