Atlassian UI – Thư viện frontend phù hợp cho những webiste hệ thống hay layout admin

Giới thiệu

Trong một project, mình có cơ hội làm quen và sử dụng 1 thử viện front-end khá là mới. Đó là Atlassian

Mình thấy thư viện này khá phù hợp cho việc dùng trong các website hệ thống hoặc dùng làm layout cho phần admin.

Sử dụng

Tại thời điểm sử dụng, mình apply thư viện này vào dự án rails, mình có thử tìm gem để sử dụng, tuy nhiên khá là khó khăn. Vào thời điểm đó, mình có tìm được 1 gem, tuy nhiên khi sử dụng lại thường xuyên bị lỗi CSS.

Cách xử lý, là mình import thư viện bằng tay. Đơn giản là mình download ZIP về, giải nén, và copy vào thư mục app/assets/stylesheets, app/assets/java_scripts và require chúng trong applicaiton.css.scss và application

Nếu như thế, mỗi lần sử dụng, lại 1 lần copy thư viện, mình thấy k tiện lắm, nên mày mò, build gem, để lần sau sử dụng cho tiện

Gem

Gem này rất đơn giản, chỉ là import css và js vào để sử dụng.

Gem mình publish ở đây

Rubygem

Github

Việc sử dụng thì trong document của gem đã mô tả khá kỹ, và việc sử dụng cũng khá đơn giản.

The others

Trong quá trình sử dụng, mình thấy thư viện này có cái message khá là đẹp. Và mình nghĩ dùng cái này để làm flash, message thông báo trong rails app thì rất tuyệt.

Để tránh việc sử dụng 2 thư viện front-end (cái Atlassian này và 1 thư viên khác như bootstrap…) vì có thể bị conflict css. Tuy nhiên mình lại muốn dùng cái message này làm flash trong rails app.

Thế là mình viết ra gem aui_flash, mục đích là dùng css của Atlassian để làm flash. Tuy nhiên mức độ nhỏ hơn, chỉ dùng 1 vài class của thư viện Atlassian.

Gem aui_flash mình publish ở đây

RubyGem

Github

Happy coding

Techtalk via viblo