15 Interesting JavaScript and CSS Libraries Details

In November’s front-end technology list, we’ve put together some amazing GitHub projects, including new CSS frameworks, the node.js package manager, and tools for implementing icons, loading effects, and Pure CSS solution for prompts.

So, let’s take a look. Have fun!

1. Wing

Wing is a micro (only 4KB after compression) responsive CSS framework. It provides a 12-column responsive grid and a basic set of style components to build your website. lay a solid foundation. Of course, the cool thing about this project is that the vast majority of its HTML elements are automatically styled without the need for any additional classes. hope you will like it!

HERE: Wing project address

2. Shave

Shave is a zero-dependency, lightweight JavaScript plug-in that can truncate multi-line text to adapt to max-height settings html element and stores the original text string in a hidden <span></span> element so that your text remains intact on the page. Shave does not rely on any libraries, and it provides a standalone version of the plugin in jQuery.

HERE: Shave project address

3. Cerebral

A JavaScript MVC application state manager, and it has a standalone debugger. In Cerebral, application state is stored in a single tree model, which manages all server-side and client-side state.

The debugger has real-time management rights to models, controllers and views.

HERE: Cerebral project address

4. Wenk

Wenk is a lightweight text tooltip library written in pure CSS. Although its compressed version is only 700 bytes, it is still manageable and offers some customization options. Such as the size, position and text alignment of different tooltips.

HERE: Wenk project address

5. CSS Loader

CSS Loader is a very useful loader. It allows developers to quickly create loading indicators using pure CSS files and an empty <p></p> element.

HERE: CSS Loader project address

6. Yarn

I believe that everyone has heard of Yarn, the open source Node.js package manager recently launched by Facebook. It has a powerful caching system that can greatly reduce package installation time, and can maintain the same node module (node_modules) directory structure for all users participating in a project, helping to reduce hard-to-track bugs and replicate on multiple machines. .

Although it has a different background from NPM, using Yarn is almost equivalent to using NPM, and developers need to understand it faster!

HERE: Yarn project address

7. Canvas Gauges

Canvas Gauges is a fully customizable gauge built using pure JavaScript and HTML5 Canvas (canvas) that you can use to create Types of measuring equipment such as motor vehicle speedometers, thermometers, etc.

Because it has a small code size and no dependencies, it is also suitable for IoT devices. You can understand it through the example of the website.

HERE: Canvas Gauges project address

8. CSS Icon

CSS Icon is an icon set website that brings together 500+ pure CSS code implementations. It is also very simple to use. When you click on an icon, the HTML and CSS code corresponding to the icon will pop up. At the same time, you can intuitively understand what part of the CSS code and what elements of the icon are implemented.

Such a great project, does it have to be given full marks? Come and enjoy!

HERE: CSS Icon project address

9. CurrencyFormatter.jsCurrencyFormatter.js is a simple and practical pure JS formatting currency library. It supports currency formats for 155 different countries, and localization settings for over 700 different languages.

In addition, it can also handle some unused currency formats, which is very powerful.

HERE: CurrencyFormatter.js project address

10. KUTE.js

A high-performance native JavaScript animation engine: KUTE.js. Its core library provides all basic animation methods, and you can add many plug-ins to enrich KUTE's functionality. At the same time, it also has separate extensions that can work with jQuery, SVG, CSS properties, etc. at the same time.

HERE: KUTE.js project address

11. Vue Material

Vue Material is a lightweight Vue.js framework built according to the Material Design specification. It aims to provide a set of reusable high-quality components and a series of UI elements to support modern web browsers through Vue2.0 to build applications.

The library is also easy to implement and has no dependencies except Vue.js.

HERE: Vue Material project address

12. Test Cafe

Test Cafe is an end-to-end solution for testing web applications written in pure Node.js. It's based on Node.js and doesn't require installing anything other than NPM packages - no browser plugins or compilers required.

Once you've written your tests, run Test Cafe and it will perform browser testing, collect results, and create reports for you.

HERE: Test Cafe project address

13. Core.css

Core.css is a lightweight framework for building responsive websites. It's only 1.3kb compressed, and it has no preset elements or built-in animations. So it is suitable for building any small web project.

HERE: Core.css project address

14. Flv.js

I believe everyone is familiar with B station, and Flv.js is the HTML5 Flash video (FLV) open sourced by the bilibili website The player is developed purely in native JavaScript (written in ECMAScript 6) and does not use Flash.

Its working principle is that Flv.js parses the flv file stream in JavaScript, and encapsulates it into fmp4 in real time, and feeds it to the browser through Media Source Extensions, realizing the playback of FLV format videos.

HERE: Flv.js project address

15. Next.js

Next.js is a universal JavaScript framework based on React. It provides a convenient way to create new JavaScript web applications. Developers no longer have to spend too much time setting up Webpack or Babel configurations.

HERE: Next.js project address

Translator’s Note: For a detailed introduction to Next.js, you can see here.

The above is all shared in this article. I hope you can find a front-end library suitable for your project.

The above is the detailed content of 15 interesting JavaScript and CSS libraries. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!