[HOT] 40 thư viện, frameworks và tools cho CSS năm 2016

Với những thay đổi và bước tiến nhanh chóng của CSS trong vài năm qua, không hề ngạc nhiên khi số lượng tài nguyên và công cụ cho nền tảng này xuất hiện ngày càng nhiều. Những libraries, frameworks và tools này không những giúp chúng ta thực hiện công việc dê dàng hơn, mà còn mở ra cơ hội tìm hiểu những CSS properties mà trước đây vẫn còn khá xa lạ.

Chúng tôi đã tổng hợp 40 libraries, frameworks, và tools được ưa chuộng nhất cho CSS trong năm 2016 này.

Tất cả tools và libraries này được phân thành: CSS Libraries, CSS Tools, Styleguide Tools, Styleguide Tools, Responsive Newsletter Frameworks, Flexbox Tools & Frameworks, và CSS Web Layout Frameworks

CSS Libraries

Imagehover.css – Thư viện CSS image hover, nhẹ nhàng, mở rộng được
Imagehover.css scaleable lighweight image hover CSS library

Diffee Checker – Đối chiếu đồ họa nhanh chóng với CSS blend modes.
Diffee Checker Instant visual diffing with CSS blend modes

CSS Image Filters – Tập hợp nhiều hướng dẫn, thư viện và công cụ.
CSS Image Filters - A collection of tutorials, libraries and tools

StarWarsIntro.css – Thư viện CSS dùng để tái hiện Intro Crawl của Star Wars.
StarWarsIntro.css CSS Library Recreating tar Wars Intro Crawl

EQCSS – CSS extension cho element queries và hơn thế nữa.

Tootik – Thư viện CSS Tooltip.
Tootik pure CSS Tooltip library

Hamburgers – Tập hợp icons hamburger CSS động “ngon lành” bởi Jonathan Suh.
Hamburgers A collection of tasty CSS-animated hamburger icons

Balloon.css – tooltips đơn giản hoàn toàn bằng CSS bởi Claudio Holanda.
Balloon.css Simple tooltips made of pure CSS

CSSGram – Thư viện nhỏ gọn, mô phỏng Instagram filter bằng CSS filters & blend modes.
CSSGram library recreating Instagram filters CSS filters blend modes

CSSCO – Màng lọc ảnh làm từ CSS, lấy ý tưởng từ VSCO và CSSgram.
CSSCO Photographic filters made with CSS

PostCSS.parts – catalog PostCSS plugins, tìm kiếm được.
PostCSS.parts searchable catalog of PostCSS plugins

voxel.css – voxel library CSS 3D, mới và nhẹ.
voxel lightweight 3D CSS voxel library

CSS Tools

stylelint –CSS linter hiện đại, mạnh mẽ, giúp bạn thực thi các quy ước chung và tránh lỗi.
stylelint mighty modern CSS linter enforce consistent conventions avoid errors

CSS Purge – Tiếp kiệm bộ nhớ web.
"cssnano – modular minifier dựa theo PostCSS ecosystem.

WAIT! Animate – Cách tính toán phần trăm CSS animation keyframe thật đơn giản.
WAIT Animate calculate CSS animation keyframe percentages

MaintainableCSS – Phương tiện dùng để viết CSS theo module, mở rộng được, dễ bảo dưỡng.
MaintainableCSS approach writing modular scalable maintainable CSS

Responsive Image Breakpoints Generator Bởi Cloudinary.
Responsive Image Breakpoints Generator

Brand-Colors – Tập hợp hơn 400 Brand Colors (SCSS, Less, Sass, Stylus & CSS).

A Practical CSS Cheat Sheet Bởi Toptal Developers.
Practical CSS Cheat Sheet

Styleguide Tools & Resources

Styleguide – Tài nguyên giúp tạo styleguides sống động, dễ dàng hơn.
Styleguide resource that makes creating living styleguides much easier

Atomic Docs – Front-end style guide generator và SASS component manager.Atomic Docs front-end style guide generator SASS component manager

Styleguide Toolbox – Tập hợp templates, UI kits, tools & generators.
Styleguide Toolbox A collection of templates UI kits tools generators

Responsive Email & Newsletter Frameworks

Foundation for Emails 2.
Foundation for Emails 2 was released last week

MJML – framework duy nhất đơn giản hóa quá trình tạo respnsive email.
MJML framework that makes responsive-email easy

Flexbox Tools & Frameworks

Flex Layout Attribute (FLA) – CSS Flexbox layout helper.
Flex Layout Attribute FLA CSS Flexbox layout helper

Grd – CSS grid framework gọn nhẹ (chỉ 512 bytes) sử dụng Flexbox.
Grd lightweight 512 bytes CSS grid framework using Flexbox

Flexbox Grid – Grid System Based dựa trên Display Property flex.
Flexbox Grid Grid System Based flex Display Property

Bulma – CSS framework hiện đại, dựa trên Flexbox.
Bulma modern CSS framework Flexbox

Flexbox Playground – Công cụ hữu ích giúp tìm hiểu và xây dựng Flexbox layouts.

Flexbox Patterns – Xây dựng user interfaces tuyệt đẹp với CSS flexbox.
Flexbox Patterns Build awesome user interfaces with CSS

Flexbox Editor – Web-based editor tạo flexbox layouts.
Flexbox Editor web-based generating layouts

CSS Web Layout Frameworks

Driveway – CSS masonry layout aid.
Driveway pure CSS masonry layout aid

Bricklayer – Thư viện grid layout phân tầng tương tự Pinterest, gọn nhẹ và độc lập.
Bricklayer lightweight independent Pinterest-like cascading grid layout library

Simple Grid – CSS grid cho website, đơn giản, gọn nhẹ, tương tác cao.
Simple Grid responsive light imple CSS grid website

BlazeCSS – CSS framework theo module, nguồn mở giúp xây dựng website nhanh hơn.
BlazeCSS Open source modular CSS framework building websites quickly

Vital CSS Framework – Minimally invasive CSS framework cho nhiều ứng dụng web hiện nay.
Vital CSS Framework minimally invasive CSS framework for modern web apps

Aleut.css – web framework mạnh mẽ, chú trọng vào hiệu năng và khả năng mở rộng.
Aleut css powerful web framework designed with scalability and performance

Picnic CSS – Thư viện CSS cho project một khởi đầu thuận lợi.

Wing – CSS Framework mới, gọn nhẹ.

RichCSS Framework – “Beautiful, DRY, Clean and Reusable CSS”.
RichCSS Framework Beautiful DRY Clean Reusable CSS

 

Materialize – CSS Framework dựa trên Material Design.
Materialize CSS Framework Material Design

ITZone via hongkiat

Chia sẻ bài viết ngay