Share Tạo bố cục website với thư viện 60GS

[filiallion]

Language

Tiếng Việt

Hiện nay có nhiều CSS framework giúp các bạn lập trình viên front-end thiết kế giao diện một cách nhanh chóng. Trong các CSS framework đó luôn luôn có một thành phần quan trọng đó là các lưới (Grid) dùng để trình bày bố cục website. Thành phần này được xem là quan trọng bởi bất kỳ website nào cũng cần có một bố cục để trình bày. Ngoài thành phần lưới do các CSS framework cung cấp thì các nhà phát triển còn tạo ra nhiều thư viện lưới độc lập để phục vụ nhu cầu phát triển website của các bạn lập trình viên, một trong số đó phải kể đến đó là thư viện lưới tạo bố cục 60GS.

Thư viện 60GS là một bộ CSS với các class CSS đã được định nghĩa giúp cho các bạn thiết kế bố cục giao diện website một cách linh động và đặc biệt là tương thích hoàn toàn với các thiết bị di động (Khả năng responsive). Việc sử dụng thư viện 60GS cũng rất đơn giản chỉ bằng cách sử dụng các class CSS. Để sử dụng thư viện 60GS, các bạn tải tại địa chỉ https://github.com/vladocar/60gs và tích hợp vào website với dòng mã lệnh HTML như sau:

<link href="path/to/60gs.css" rel="stylesheet">

Bây giờ, các bạn trình bày bố cục website như ví dụ sau:

<div class="grid">
    <div class="col-10">Column 1</div>
    <div class="col-20">Column 2</div>
    <div class="col-30">Column 3</div>
</div>