- Messages
- 585
- Points
- 10
- 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:
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:
Bây giờ, các bạn sử dụng như ví dụ sau:
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.
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:
HTML:
<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">
HTML:
<link href="path/to/page/index-vars.css" rel="stylesheet">
HTML:
<button class="spectrum-ActionButton spectrum-ActionButton--emphasized spectrum-ActionButton--quiet">
<span class="spectrum-ActionButton-label">Button</span>
</button>