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.
<!doctypehtml><html><head><metacharset="utf-8"><title>Framework</title><linkrel="stylesheet"href="framework.css"><linkrel="stylesheet"href="override.css"></head><body><navclass="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.
.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 thân mình thì đặc biệt ưa thích Foundation của Zurb về khả năng tùy biến và Pure CSS của Yahoo về thiết kế tối giản và cực nhẹ. Tuy nhiên thì cũng như đa số mọi người tự học code web, mình đã khởi đầu với Bootstrap bởi sự phổ biến và thông dụng của nó.
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 – 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 khác bằng 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:
[Bootstrap] Bài 1 – Làm Thế Nào Để Bootstrap Một Trang Web?
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ù Sub-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ử 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:
`<linkrel="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 – fontawesome.com
<iclass="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.
<!doctypehtml><html><head><metacharset="utf-8"><title>A simple footer</title><linkrel="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"/><linkrel="stylesheet"href="footer.css"></head><body><footer><ahref="#"><iclass="fa-brands fa-linkedin"></i></a><ahref="#"><iclass="fa-brands fa-twitter-square"></i></a><ahref="#"><iclass="fa-brands fa-github-square"></i></a><ahref="#"><iclass="fa-brands fa-facebook-square"></i></a><ahref="#"><iclass="fa-brands fa-youtube-square"></i></a></footer></body></html>*{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.
Nguồn: viblo.asia