50个CSS和JavaScript工具、框架和代码库

在互联网上,每天都有很多的新的工具、框架和代码库出现,我们没办法做到每天都跟上最新的设计。好消息是今天这篇文章将会给大家总结一个列表给大家。里面包含CSS代码、JavaScript资源,希望能够帮到你。

文章来自大神:speckyboy:50 CSS and JavaScript Tools, Frameworks and Libraries from 2015

CSS Libraries & Toolkits

Fileicon, a collection of pure CSS file icons.
Fileicon, a collection of pure CSS file icons

Marx, the stylish CSS reset with no Javacript or Classes. Just raw CSS.
Marx, the stylish CSS reset with no Javacript or Classes. Just raw CSS

Transformicons – Animated icons, symbols and buttons using SVG and CSS.
Transformicons - Animated icons, symbols and buttons using SVG and CSS

sanitize.css makes browsers render elements consistently and allows you to style with today’s best practices out-of-the-box.
sanitizecss

Loaders.css, a collection of performance-focused pure css loading animations.
Loaders.css, a collection of performance-focused pure css loading animations

SassyFlags is a simple library for adding flags to your websites.
sassyflags

Primer, the CSS toolkit and guidelines that power GitHub.
Primer, the CSS toolkit and guidelines that power GitHub

Flickity, a CSS library that makes galleries & sliders feel lively and effortless.
Flickity, a CSS library that makes galleries & sliders feel lively and effortless

Pushy, a responsive off-canvas navigation menu using CSS transforms & transitions.
Pushy, a responsive off-canvas navigation menu using CSS transforms & transitions

CSS Stats, a tool that will visualize useful stats about your CSS.
CSS Stats, a tool that will visualize useful stats about your CSS

Flexbox Tools

flexbox in 5 minutes, an interactive tour of all the major features of the CSS property: flexbox.
flexbox in 5 minutes, an interactive tour of all the major features of the CSS property: flexbox

Flexbugs, a community-curated list of flexbox issues and cross-browser workarounds
Flexbugs

cssPlus, a robust, fast and cross browser layout scaffolding based on Flexbox.
cssPlus

Responsive Web Frameworks

flexible.gs, a responsive and flexible grid system CSS framework (CSS, Sass, LESS and Stylus).
flexible.gs responsive and flexible grid system CSS framework

Rin, a lean, gulp-based HTML and SASS boilerplate for better front-end coding.
Rin, a lean, gulp-based HTML and SASS boilerplate for better front-end coding

Wee, a lightweight front-end framework for logically building complex, responsive web projects.
Wee, a lightweight front-end framework for logically building complex, responsive web projects

spaceBase, a Sass-based responsive CSS framework.
spaceBase, a Sass-based responsive CSS framework

Decorator, a new HTML, CSS, and JavaScript front-end framework.
Decorator, a new HTML, CSS, and JavaScript front-end framework

Rebar, a new Sass / Stylus grid framework.
Rebar,  a new Sass / Stylus grid framework

Lost, a SCSS or Stylus fractional grid system built with calc().
Lost, a SCSS or Stylus fractional grid system built with calc()

RWDGRID, a responsive grid system based on the 960 grid system.
RWDGRID, a responsive grid system based on the 960 grid system

Manhattan, a clean, lightweight and customisable CSS grid system.
Manhattan

Material Design Frameworks

Material, a HTML5 UI framework based on Material Design.
Material, a HTML5 UI framework based on Material Design

LumX, the first responsive front-end framework based on AngularJS & Material Design specs.
LumX, the first responsive front-end framework based on AngularJS & Material Design specs

MUI, a lightweight Material Design web framework.
MUI, a lightweight Material Design web framework

Random CSS Stuff

icono, a set of pure CSS icons with only one element.
icono, a set of pure CSS icons with only one element

CSS Gradient Animator, a web-based tool for generating animated gradients.
CSS Gradient Animator, a web-based tool for generating animated gradients

localFont, a web app for implementing localStorage web font caching in seconds.
localFont, a web app for implementing localStorage web font caching in seconds

Web Font Load – The easiest way to install all of the Google Web Fonts on OSX.
Web Font Load - The easiest way to install all of the Google Web Fonts on OSX

ai2html, an open-source script for Adobe Illustrator that converts Illustrator documents into HTML and CSS.
ai2html, an open-source script for Adobe Illustrator that converts Illustrator documents into HTML and CSS

JavaScript Libraries & Frameworks

Marx, the stylish CSS reset with no Javacript or Classes. Just raw CSS.
Marx, the stylish CSS reset with no Javacript or Classes. Just raw CSS

Sprint, a tiny, lightning fast jQuery-like library for modern browsers.
Sprint, a tiny, lightning fast jQuery-like library for modern browsers

Svidget.js, a JavaScript framework for building fantastic SVG widgets.
Svidget.js, a JavaScript framework for building fantastic SVG widgets

Challenger.js, a drop-in JS library that adds interactive programming pop-up challenges to any page.
Challenger.js, a drop-in JS library that adds interactive programming pop-up challenges to any page

Vorlon.JS, an open source, extensible, platform-agnostic tool for remotely debugging and testing JS.
Vorlon.JS, an open source, extensible, platform-agnostic tool for remotely debugging and testing JS

Layzr.js, a small, fast, modern, and dependency-free library for lazy loading.
Layzr.js, a small, fast, modern, and dependency-free library for lazy loading

Clusterize.js, a tiny vanilla JS plugin to display large data sets easily.
Clusterize.js a tiny vanilla JS plugin to display large data sets easily

Elevator.js, a “back to top” button that behaves like a real elevator.
back to top" button that behaves like a real elevator

egg.js, a simple javascript library to add easter eggs to web pages.
egg.js, a simple javascript library to add easter eggs to web pages

epicGrid, a pure, lightweight, responsive Javascript solution for building grid systems.
epicGrid, a pure, lightweight, responsive Javascript solution for building grid systems

ramjet.js, a library that morphs DOM elements from one state to another with smooth transitions.
ramjet.js a library that morphs DOM elements

ItemSlide.js, a simple JavaScript touch carousel with support for touch swiping & mousewheel scrolling.
ItemSlide.js a simple JavaScript touch carousel

Plumin.js – Create and manipulate fonts using Javascript.
Plumin.js - Create and manipulate fonts using Javascript

Smiley.js, a script for rotating smiley faces on your site to the correct viewing.
Smiley.js, a script for rotating smiley faces on your site to the correct viewing

vivus.js, a lightweight JavaScript class that allows you to animate SVGs.
vivus.js, a lightweight JavaScript class that allows you to animate SVGs

Rimg – A pure JS responsive image solution for browsers that support mediaqueries.
Rimg - A pure JS responsive image solution for browsers that support mediaqueries

Animsition, a simple and easy jQuery plugin for CSS animated page transitions.
Animsition, a simple and easy jQuery plugin for CSS animated page transitions

Unicoder.js, a JS library that converts text to some of the more artistic unicode alphabets.
Unicoder.js, a JS library that converts text to some of the more artistic unicode alphabets

Space.js, an HTML-driven JavaScript library for narrative 3D-scrolling.
Space.js an HTML-driven JavaScript library for narrative 3D-scrolling

cta.js, a lightweight library for animating your “action-to-effect” paths.
cta.js a lightweight library for animating

Awesomplete, an ultra lightweight, highly customizable and simple autocomplete jQuery plugin.
Awesomplete, an ultra lightweight, highly customizable and simple autocomplete jQuery plugin

Select or Die, a jQuery plugin to style <select> elements.
select-die

Textures.js — a set of SVG elements for data visualization.
texturesjs

datedropper, a jQuery plugin that offers an easy way to manage dates for input fields.
datedropper, a jQuery plugin that offers an easy way to manage dates for input fields

underline.js, a Javascript library that sets out draw and animate the most perfect and playful text underline.
underline.js, a Javascript library that sets out draw and animate the most perfect and playful text underline

lory.js, a touch enabled minimalistic slider written in vanilla JavaScript.
lory.js, a touch enabled minimalistic slider written in vanilla JavaScript

snabbt.js, a minimalistic Javascript animation library that will translate, rotate, scale, skew and resize elements.
snabbt.js, a minimalistic Javascript animation library that will translate, rotate, scale, skew and resize elements

Slideout.js, a touch slideout navigation menu for your mobile web apps.
Slideout.js, a touch slideout navigation menu for your mobile web apps

JavaScript Garden, a collection of docs about the quirkier parts of JavaScript.
JavaScript Garden

Web-Based Apps

Epic Favicon Generator, a tool for generating 20 favicon sizes.
Epic Favicon Generator, a tool for generating 20 favicon sizes

gitgoodies, a collection of shortcuts for the Git commands you use everyday.
gitgoodies, a collection of shortcuts for the Git commands you use everyday

CIRCULUS.SVG, an SVG circular menu generator.
CIRCULUS.SV, an SVG circular menu generator

CSS Ruler, a handy web-based tool for exploring CSS lengths.
CSS Ruler, a handy web-based tool for exploring CSS lengths

Stickshift – A clean & modern SQL data interface.
Stickshift - A clean & modern SQL data interface

T3 JavaScript Framework, a minimalist JavaScript framework that provides core structure to code.
T3 JavaScript Framework, a minimalist JavaScript framework that provides core structure to code

SVGOMG, a web-based app for optimizing and configuring SVGO.
SVGOMG, a web-based app for optimizing and configuring SVGO

HTML Arrows, a clean and colorful place for all HTML symbol codes.
HTML Arrows, a clean and colorful place for all HTML symbol codes

.resizr, a simple app for testing your CSS media queries.
resizr, a simple app for testing your CSS media queries

A super simple Pie Menu Generator.
A super simple Pie Menu Generator


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流