40 thư viện, frameworks và tools cho CSS

Cập nhật: Lượt xem: 904 [ Css ]

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ạ.

40 thư viện, frameworks và tools cho CSS

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-1

 

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

diffee-checker

 

CSS Image Filters – Tập hợp nhiều hướng dẫn, thư viện và công cụ.
css-image-filters

 

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

 

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

 

Tootik – Thư viện CSS Tooltip.
tootik

 

Hamburgers – Tập hợp icons hamburger CSS động “ngon lành” bởi Jonathan Suh.
hamburgers

 

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

 

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

 

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

 

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

 

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

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

 

CSS Purge – Tiếp kiệm bộ nhớ web.
css-purge

 

cssnano – modular minifier dựa theo PostCSS ecosystem.
cssnano

 

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

 

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

 

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).
brand-colors

 

A Practical CSS Cheat Sheet Bởi Toptal Developers.
a-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

 

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

atomic-docs

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


styleguide-toolbox

Responsive Email & Newsletter Frameworks

Foundation for Emails 2.


foundation-for-emails-2

 

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

Flexbox Tools & Frameworks

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

 

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

 

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

 

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

 

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

 

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

 

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

CSS Web Layout Frameworks

Driveway – CSS masonry layout aid.
driveway

 

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

 

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

 

BlazeCSS – CSS framework theo module, nguồn mở giúp xây dựng website nhanh hơn.
blazecss

Vital CSS Framework – Minimally invasive CSS framework cho nhiều ứng dụng web hiện nay.
vital-css-framework

 

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

 

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

 

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

 

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

 

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