Thư viện 50 công cụ CSS and JavaScript, Frameworks cho năm 2016

4638

Để bản thân mình luôn cập nhật với những thiết kế web mới là một điều rất khó khăn. Mỗi ngày có nhiều công cụ, thư viện và các frameworks mới được giới thiệu đến cộng đồng. Chúng tôi sẽ tổng hợp hết tất cả những update mới nhất tại đây cho các bạn.

Về tổng thể chúng tôi sẽ chia thành 2 nhánh là CSS và Javascript, gồm 50 bộ sưu tập nguồn mở. Tất cả các công cụ, thư viện và frameworks sẽ được chia theo các thể loại sau: thư viện CSS và Toolkit, Công cụ Flexbox, Responsive Web Frameworks, Material Design Frameworks, Random CSS, thư viện JavaScript, Frameworks và các Web-Based Apps khác.

Thư viện CSS và Toolkit

pure-banner

Fiileicon, bộ sưu tập những icon của CSS

Marx, bộ CSS phong cách reset, file raw không có Javascript hay Classes

Transformicons, icon động, biểu tượng và các nút bấm sử dụng SVG và CSS

sanitize.css, giúp trình duyệt hiển thị các elements một cách liên tục và cho phép bạn tuỳ chỉnh phong cách website của mình

Loaders.css, bộ sưu tập tổng hợp và tập trung vào các các hình động loading css

SassyFlags, là một thư viện đơn giản giúp bổ sung thêm flag vào website.

Primer, công cụ và hướng dẫn CSS hỗ trợ GitHub

Flickity, một thư viện CSS giúp bạn tạo galleries và sliders rất sống động

Pushy, một menu off-canvas navigation có độ tương tác cao sử dụng CSS transforms và transitions.

CSS Stats, một công cụ giúp theo dõi thông số về CSS của bạn

Các công cụ Flexbox

flexbox in 5 minutes, là một tour tương tác giới thiệu tất cả những tính năng về flexbox

Flexbugs, cộng đồng giúp tổng hợp và tư vấn các vấn đề thường gặp về flexbox và các cách giải quyết qua trình duyệt.

cssPlus, một trình duyệt mạnh mẽ, nhanh chóng dựa trên Flexbox.

Responsive Web Frameworks

free_web_design_resources_21flexible.gs, hệ thống grid CSS framework nhanh nhạy và linh hoạt (CSS, Sass, LESS và Stylus)

Rin, HTML và SASS boilerplate tinh gọn giúp cho front-end code được tốt hơn.

Wee, một hệ thống front-end framework gọn nhẹ giúp xậy dựng các dự án web phức tạp và cần độ phản hồi cao.

spaceBase, hệ thống CSS framework có độ tương tác cao dựa trên Sass

Decorator, một front-end HTML, CSS và JavaScript framework mới.

Rebar, một Sass/Stylus grid framework mới

Lost, SCSS hay Stylus grid system được xây dựng với calc().

RWDGRID, hệ thống grid tương tác được xậy dựng bởi 960 grid system

Manhattan, hệ thống CSS grid tinh gọn có thể chỉnh sửa tuỳ thích

Material Design Frameworks

Material, một HTLM5 UI framework dựa trên Material Design

LumX, một trong những responsive front-end framework dựa trên các thông số của Angular JS và Material Design

MUI, một Material Design web framework tinh gọn

Các công cụ CSS khác

css

icono, tổng hợp các icon CSS với một element duy nhất

CSS Gradient Animator, một công cụ tạo các gradient trên web

localFont, một ứng dụng app có bổ sung LocalStorage web font caching

Web Font Load, cách dễ nhất để cài đặt tất cả các Google Web Fonts trên OSX

ai2html, nguồn mở cho Adobe Illustrator, có thể chuyển file Illustrator thành HTML và CSS

Thư viện Javascript và Framework

Sprint, thư viện jQuery chạy rất nhanh dành cho các browsers mới

Svidget.js, JavaScript framework dùng để xây dựng SVG widgets

Challenger.js, thư viện JS có bổ sung các chương trình tương tác pop-up đến tất cả các trang

Vorlon.JS, nguồn mở/công cụ để debug và test JS từ xa.

Layzr.js, thư viện tinh gọn và hiệu quả dành cho lazy loading

Clusterize.js, JS plugin để hiển thị lượng data set lớn

Elevator.js, nút “back to top” hoạt động mượt như một chiếc thang máy thật sự

egg.js, một thư viện Javascript đơn giản để thêm easter eggs vào các trang.

epicGrid, một giải pháp Javascript tinh gọn giúp xây dựng grid systems

ramjet.js, thư viện giúp các DOM elements chuyển đổi vị trí mượt mà.

ItemSlide.js, JavaScript hỗ trợ hành động lướt và lăn chuột

Plumin.js, tạo và chỉnh fonts bằng Javascript

Smiley.js, script giúp xoay các biểu tượng mặt cười trên site cho đúng với giao diện

vivus.js, JavaScript class giúp tạo SVGs động

Rimg, giải pháp hình ảnh JS cho browser có hỗ trợ mediaqueries

Animsition, jQuery plugin đơn giản cho các trang chuyển CSS

Unicoder.js, thư viện JS giúp chuyển đổi text sang các chữ cái Unicode

Space.js, là một thư viện HTML JavaScript dành cho narrative 3D-scrolling.

cta.js, thư viện hiệu ứng hình ảnh khá nhẹ dành cho website

Awesomplete, plugin jQuery tự động hoàn thành, có khả năng tuỳ chỉnh cao.

Select or Die, jQuery plugin phong cách <select> elements

Textures.js, bộ tổng hợp các SVG element cho hiển thị data

datedropper, plugin jQuery cho phép quản lý ngày trên vùng input

underline.js, thư viện JavaScript – bộ sưu tập các text underline tuyệt đẹp

lory.js, slider với phong cách đơn giản cho JavaScript

snabbt.js, thư viện Javascript ảnh animation phong cách đơn giản, có thể xoay, scale và thay đổi kích của các elements.

Slideout.js, slideout navigation menu dành cho mobile web apps

JavaScript Garden, bộ sưu tập docs về JavaScript.

Web-Based Apps

development-and-testing-of-a-mobile-voip-application-for-a-telecom-giant

Epic Favicon Generator, công cụ tạo ra 20 favicon sizes

gitgoodies, bộ sưu tập shortcut cho Git commands mà bạn dùng hàng ngày

CIRCULUS.SVG, SVG circular menu generator

CSS Ruler, một công cụ tiện ích trên web giúp khám phá các CSS lengths

Stickshift, SQL data interface tinh gọn

T3 JavaScript Framework, JavaScript framework phong cách đơn giản tạo ra các cấu trúc chính cho code

SVGOMG, một ứng dụng dựa trên web để tối ưu hóa và cấu hình SVGO

HTML Arrows,  HTML đầy màu sắc cho tất cả các mã biểu tượng HTML.

.resizr, một ứng dụng app để test CSS media queries

Và cuối cùng là Pie Menu Generator.

CHIA SẺ