Share Sử dụng CSS framework ModestaCSS để thiết kế giao diện website

[filiallion]

Language

Tiếng Việt

Với sự phổ biến của các CSS framework hiện nay, công việc thiết kế các giao diện website bằng HTML với CSS ngày càng trở nên nhẹ nhàng và nhanh chóng hơn rất nhiều. Mỗi một CSS framework có một đặc điểm, giao diện riêng, tuỳ vào yêu cầu thiết kế mà các bạn chọn cho mình một CSS framework phù hợp. Bài viết này tôi giới thiệu với các bạn một CSS framework có thiết kế đơn giản nhưng tiện lợi trong việc thiết kế đó là ModestaCSS.

Điểm mạnh của ModestaCSS đó chính là hỗ trợ đầy đủ các thành phần thường được sử dụng trên website và một số thành phần mới như paper, fullscreen, emojis. Ngoài ra, với cấu trúc HTML đơn giản, không lồng nhau quá nhiều lớp cũng giúp ích rất nhiều cho việc thiết kế cũng như làm đơn giản hoá việc lập trình.

Các bạn có thể xem qua giao diện thiết kế của CSS framework ModestaCSS tại địa chỉ https://modesta.alexflipnote.dev và tải nó tại địa chỉ https://github.com/AlexFlipnote/ModestaCSS.

Để sử dụng thư viện ModestaCSS, các bạn tạo một trang HTML cơ bản có nạp các tập tin CSS và JavaScript với mã lệnh như sau:

<link href="path/to/modesta.min.css" rel="stylesheet">
<script src="path/to/effects.js"></script>
<script src="path/to/modal.js"></script>
<script src="path/to/navbar.js"></script>

Ngoài ra, các bạn còn phải khai báo thẻ meta sau:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">

Bây giờ, các bạn có thể bắt đầu sử dụng CSS framework ModestaCSS như ví dụ sau:

<button type="button" class="btn COLOUR-flat">Flat button</button>

Các bạn có thể tìm hiểu tất cả các thành phần của CSS framework ModestaCSS tại địa chỉ https://modesta.alexflipnote.dev.