Share Thiết kế giao diện website chuyên nghiệp với thư viện Spectrum CSS

[filiallion]

Language

Tiếng Việt

Các bạn thiết kế giao diện website thì chắc chắn đã nghe nói tới Bootstrap với phiên bản hiện tại là Bootstrap 4.x. Phiên bản Bootstrap 4.x với nhiều cải tiến đáng giá giúp cho các bạn thiết kế giao diện sử dụng thuận tiện hơn với nhiều thành phần được nâng cấp. Sự phổ biến của Bootstrap là không thể phủ nhận, tuy nhiên, các bạn còn có nhiều lựa chọn khác và một trong số đó là thư viện Spectrum CSS.

Spectrum CSS là một bộ thư viện dùng để thiết kế giao diện website do Adobe phát triển và hỗ trợ nên chất lượng rất đảm bảo. Hiện tại, thư viện Spectrum CSS hỗ trợ rất nhiều thành phần từ cơ bản đến cao cấp như accordion, action bar, button, card, calendar,...

Việc sử dụng thư viện Spectrum CSS cũng khá giống Bootstrap nên nếu các bạn đã sử dụng qua Bootstrap thì Spectrum CSS cũng sẽ trở nên đơn giản. Để sử dụng thư viện Spectrum CSS, các bạn tải về tại địa chỉ https://github.com/adobe/spectrum-css và tích hợp vào website với nội dung mã lệnh HTML như sau:

<link href="path/to/spectrum-global.css" rel="stylesheet">
<link href="path/to/spectrum-medium.css" rel="stylesheet">
<link href="path/to/spectrum-light.css" rel="stylesheet">

Và các bạn sử dụng thành phần nào của thư viện Spectrum CSS thì khai báo thêm thành phần đó như ví dụ sau:

<link href="path/to/page/index-vars.css" rel="stylesheet">

Bây giờ, các bạn sử dụng như ví dụ sau:

<button class="spectrum-ActionButton spectrum-ActionButton--emphasized spectrum-ActionButton--quiet">
    <span class="spectrum-ActionButton-label">Button</span>
</button>

Các bạn có thể tìm hiểu thêm về thư viện Spectrum CSS tại địa chỉ https://opensource.adobe.com/spectrum-css.