Trong bài viết này, chúng ta sẽ nói về việc sử dụng framework để tăng tốc độ xây dựng
trang web mà chúng ta ấp ủ. Bên cạnh đó, chúng ta cũng sẽ nói về việc sử dụng các
biểu tượng để hỗ trợ tạo ra giao diện người dùng trực quan hơn. Những công cụ mới
này sẽ thay đổi cách mà bạn viết code rất nhiều đấy.
Framework là cái gì?
Ngay từ những bài viết đầu tiên, chúng ta đã được gặp rất nhiều công cụ miễn phí và
hữu ích tuyệt vời như: Trình soạn thảo code Atom của Github Inc., Nền tảng blog
miễn phí host Github Pages, Host ảnh miễn phí PostImage, Host audio, video, như
SoundCloud và YouTube v.v.... Và bây giờ thì chúng ta sẽ bổ sung thêm một vài thứ
nữa vào danh sách. 
Một framework là một bộ code miễn phí (thực ra cũng có những framework tính phí
nhưng mình không sử dụng nên không giới thiệu ở đây ) được phát triển và chia sẻ
bởi các nhà phát triển phần mềm có kinh nghiệm để giúp mọi người thực hiện công việc
xây dựng trang web hay phần mềm thuận lợi hơn.
Hãy thử tưởng tượng là bạn là một code star (một nhà phát triển phần mềm rất rất giỏi)
và bạn đã xây dựng xong cũng như tối ưu code cho các thành phần phổ biến thường thấy
trong các trang web như: Thanh điều hướng navbar, Các danh sách đóng/mở dropdown,
Slide ảnh, v.v... Và bây giờ thì bạn muốn chia sẻ bộ code của bạn với mọi người bằng cách
cho phép tải về tệp CSS mà bạn đã viết xong và một tài liệu về các đoạn mã HTML ví dụ.
Như vậy lúc này mình sẽ có thể tải về tệp CSS của bạn và nhúng vào trong các văn bản HTML mà mình đang xây dựng và copy/paste một vài đoạn mã HTML từ các ví dụ trong tài liệu mà bạn cung cấp. Lúc này mình đã ngay lập tức có được các thành phần mà mình muốn xây dựng cho trang web của mình và chỉ việc bổ sung thêm một tệp CSS thứ hai để ghi đè một số thuộc tính để điều chỉnh phong cách hiển thị cho phù hợp với thiết kế mà mình đã nghĩ ra. Kết quả là trang web của mình trông vẫn rất khác so với trang web của bạn.
framework.html
<!doctype html>
<html> <head> <meta charset="utf-8"> <title>Framework</title> <link rel="stylesheet" href="framework.css"> <link rel="stylesheet" href="override.css"> </head> <body> <nav class="navbar"> <!-- một vài liên kết --> </nav> </body>
</html>
Trong đoạn mã HTML phía trên, hãy giả định rằng .navbar là một thành phần đã được code CSS
xong trong framework.css với padding tốt, đã responsive, và có màu nền sáng. Bây giờ thì
mình muốn ghi đè màu nền thành tone màu tối để phù hợp với thiết kế của mình. Việc mình cần
làm lúc này chỉ đơn giản là viết 1 dòng code trong tệp override.css.
override.css
.navbar { background-color: Black;
}
Đó chính là lý do vì sao mọi người đang chia sẻ và sử dụng các framework. Nó khá dễ hiểu phải không?
Nên bắt đầu với framework nào?
Có tới hàng tá các framework CSS ở ngoài đó, mà có khi là vào khoảng vài ngàn bộ nếu bạn
Google một cách nghiêm túc. Tuy nhiên, bạn có thể bắt đầu với cái phổ biến nhất có tên là
Bootstrap. Framework này cung cấp đầy đủ các thành phần phổ
biến giúp bạn có thể xây dựng một trang web responsive rất nhanh chóng. Sau khi đã quen
với việc sử dụng tài liệu và áp dụng một framework để tạo ra vài trang web, bạn có thể thử
những bộ framework khác để tìm ra chính xác thứ thực sự được tạo ra dành cho bạn.
Từ phong cách code, phong cách trang trí mặc định, phong cách lập tài liệu, và cả thần tượng
code tạo ra framework đó v.v....
Bạn có thể tự học Bootstrap bằng cách sử dụng trang web chính thức của framework
này - http://getbootstrap.com/. Ở đây chúng ta cũng sẽ thực hiện
một vài bài viết về Bootstrap, tuy nhiên thì mình không có ý định tạo ra một bộ tài liệu Bootstrap
tiếng VIệt. Mục đích của các bài viết về Bootstrap sắp tới chỉ là để chúng ta làm quen với việc
sử dụng tài liệu của Bootstrap và áp dụng một cách đơn giản nhất vào việc xây dựng một
trang web. Hy vọng rằng bạn sẽ tiếp tục tham gia cùng mình trong hành trình tự học cách
sử dụng Bootstrap đơn giản nhất.
Bạn có thể bắt đầu đọc các bài viết về Bootstrap ngay ở thời điểm này mặc dù Series CSS của chúng ta vẫn còn một vài bài viết nữa mới kết thúc. Tính cho tới thời điểm hiện tại thì lộ trình tự học CSS cơ bản của chúng ta chỉ còn một chút kiến thức cơ bản nữa về việc tạo ra các hiệu ứng chuyển đổi dành cho các thành phần tương tác với người dùng và các hoạt ảnh.
(Sắp đăng tải) [Bootstrap] Bài 1 - Giới Thiệu Framwork Bootstrap
Sử dụng các biểu tượng
Cộng đồng các nhà phát triển web cũng rất yêu thích Font Awesome,
một framework CSS và tập font biểu tượng. Framework này có thể giúp chúng ta nhanh chóng
chèn thêm các biểu tượng vào các thành phần xây dựng giao diện người dùng như các nút nhấn,
các liên kết mạng xã hội, v.v....
Việc sử dụng Font Awesome cũng rất đơn giản và dễ hiểu vì vậy nên chúng ta có thể thực hiện
một ví dụ ngay bây giờ.
Đầu tiên thì chúng ta cần nhúng tệp CSS của Font Awesome vào văn bản HTML với dòng code này:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
Sau đó thì trong code HTML, ở bất kỳ vị trí nào mà bạn muốn chèn một biểu tượng vào thì bạn
chỉ cần tạo một phần tử <i class="tên-biểu-tượng"></i> với tên class của được cung cấp tại
trang web chính thức của framework - https://fontawesome.com/icons
<i class="fa-brands fa-youtube"></i>
Bây giờ chúng ta sẽ thử tạo ra một phần chân trang web với các liên kết tới các mạng xã hội để sử dụng cho trang web của bạn.
footer.html
<!doctype html>
<html> <head> <meta charset="utf-8"> <title>A simple footer</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="footer.css"> </head> <body> <footer> <a href="#"> <i class="fa-brands fa-linkedin"></i> </a> <a href="#"> <i class="fa-brands fa-twitter-square"></i> </a> <a href="#"> <i class="fa-brands fa-github-square"></i> </a> <a href="#"> <i class="fa-brands fa-facebook-square"></i> </a> <a href="#"> <i class="fa-brands fa-youtube-square"></i> </a> </footer> </body>
</html>
footer.css
* { margin: 0; padding: 0; box-sizing: border-box;
} footer { font-size: 30px; text-align: center; padding: 60px 0; background: Black;
} footer > a { text-decoration: none; display: inline-block; padding: 15px; color: White;
}
Bài viết giới thiệu về việc sử dụng framwork và icons của chúng ta đến đây là kết thúc.
Trong bài tiếp theo, chúng ta sẽ thảo luận về việc sử dụng các hiệu ứng chuyển đổi cho
các thành phần tương tác với người dùng.