tìm hiểu CSS framework Môn Lập Trình Web 1

CSS FRAMEWORK I. CSS Framework là gì? Hiểu theo từ framework thì nó là bộ công cụ giúp design trang web bằng css nhanh hơn. Nghĩa là là nó được trừu tượng hóa lên một mức cao hơn. Thay vì bạn phải hiểu rõ về các bộ chọn, các thuộc tính và giá trị trong CSS để style cho trang web của mình, thì bạn chỉ cần biết các thành phần có trên trang web như form, navbar, tooltip, dropdown-menu, modal, button,… và add nó vào trang HTML của mình một cách thích hợp.  LỢI ÍCH THIẾT KẾ • Tính đồng nhất và tính nhất quán trong vị trí phần tử HTML , do đó làm giảm CSS lỗi mã hóa . • Dễ dàng hơn để áp dụng "quy tắc một phần ba " và " phần vàng " để thiết kế. • Giảm nhu cầu sử dụng bảng HTML lồng nhau. • Lồng các lưới phụ cho thiết kế rất phức tạp. • Dễ dàng tạo bố trí không đối xứng. • Hỗ trợ trình duyệt. • Giảm nỗ lực để tạo ra bố trí trang web ‘mượt’ hơn, so với mã hóa CSS cần thiết từ đầu. • Giảm nỗ lực trong tương lai nếu bạn cần phải đặt lại vị trí các yếu tố hoặc thay đổi đặc tính cho các yếu tố với lượng lớn.  Một số CSS Framework thông dụng: • Blueprint CSS Grid Framework • Twitter Booststrap • PureCSS • Skeleton • YAML, YAML Builder • 960 CSS Grid System • CSS Boilerplate • Sparkl II. Một số CSS Framework Có bao giờ bạn phải viết HTML/CSS rồi ngồi suy nghỉ “Tại sao mình phải viết đi viết lại nhưng class giống nhau như thế này ?” hay “Mình sẽ làm 1 css framework để về sau sử dụng lại.” Rồi chợt nhận ra là mọi chuyện không đơn giản như vậy class bạn viết ra ở web này rùi lại hì hục sửa ở web khác , nhiều lúc ngồi sửa còn lâu hơn là viết mới. Hôm nay mình sẽ giới thiệu cho các bạn cách để giải quyết vấn đề trên. Đó là sử dụng Twitter Bootstrap, PureCSS, Skeleton,… 1. Twitter Booststrap a. Giới thiệu Bootstrap là một CSS Framework phổ biến nhất hiện nay do Twitter phát triển. Twitter Bootstrap bao gồm các mã CSS + HTML cơ bản cho typography, forms, buttons, tables, grids, navigation, và nhiều thành phần khác của website. Twitter Bootstrap cung cấp lưới cố định (fixed) rộng 940px và 12 cột. Tất nhiên là cũng có giải pháp cho việc dùng layout dạng động (fluid). Style của các phần tử HTML trong Twitter Bootstrap khá đơn giản và thanh lịch. Ví dụ như phần đổ bóng trong input, highlight của bảng biểu, các mã CSS hiển thị cảnh báo, tabs, phân trang… b. Tại sao lại sử dụng Twitter Booststrap? Như đã giới thiệu ở trên , Twitter Bootstrap giúp chúng ta giảm thiểu thời gian thiết kết HTML và CSS. Twitter Bootstrap định nghĩa sẳn các class CSS công việc của chúng ta chỉ là sử dụng các class đó vào mục đích của mình.Twitter Bootstrap còn hổ trợ Responsive design một cách làm giao diện đa thiết bị rất được ưu chuộng trong thời gian gần đây. Ưu điểm của bootstrap: • Hỗ trợ khả năng Responsive: tức là trang web sẽ tự động co giãn theo kích thước của cửa sổ trình duyệt. • Tương thích tốt với thiết bị cỡ nhỏ: với sự phổ biến của smartphone hiện nay, đây là một yếu tố quan trọng. Không cần phải design một bản riêng cho mobile, với bootstrap bạn chỉ cần thiết kế một lần cho mọi thiết bị. • Được tích hợp với thư viện jQuery và tương tác tốt với chuẩn HTML5 và CSS3. Ngoài ra Bootstrap còn được cập nhật phiên bản thường xuyên, hệ thống tài liệu hướng dẫn chi tiết, thân thiện với các công cụ tìm kiếm, tương thích trên nhiều trình duyệt, nhiều theme khác nhau. c. Sử dụng Twitter Booststrap. Cài đặt, đưa bootstrap vào HTML Đầu tiên ta cần một bản Bootstrap. Tải Bootstrap từ địa chỉ sau: http://getbootstrap.com/ File .zip bạn vừa tải về sẽ giống như sau, gồm 3 thư mục css, js, và fonts. Tạo một thư mục mới, và giải nén file .zip vừa tải về vào thư mục này. Tạo một file test.html với nội dung như sau: Mở thư index.html này bằng trình duyệt. Và bạn sẽ thấy được thành quả ban đầu khi dùng Bootstrap.  Các lựa chọn cho Grid Bảng sau sẽ cho thấy hệ Grid của Bootstrap hoạt động trên các thiết bị khác nhau. Tài liệu tham khảo về Bootstrap: http://getbootstrap.com/css/ 2. PureCSS a. Giới thiệu PureCSS là tập hợp các mo đun có thể sử dụng trong tất cả các dự án web bao gồm các mô đun: o Grids o Forms o Buttons o Tables o Menus b. Cài đặt - Để sử dụng các bạn tải bộ công cụ Purecss tại web: http://purecss.io/start/ hoặc thêm link sau vào phần <head> của trang web. <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css"> - Bạn có thể thêm thẻ Viewport Meta vào phần <head> của trang web để có thể tự chỉnh độ rộng và dài cho phù hợp với màn hnhf trình duyệt trên mobile hoặc laptop… - < meta name= "viewport" content= "width=device-width, initial-scale=1" > c. Các mô đun: • Grids: Pure Grids rất dễ sử dụng và rất mạnh. Có 1 và khái niệm về Grids cần phải nhớ: + Grid classes vs. unit classes + độ rộng của mỗi grids là những nhóm riêng + những tập hợp con của 1 lưới phải là những unit + Nội dung cần được thêm vào bên trong grid unit  VD: đây là 1 grid với 3 cột <div class="pure-g"> <div class="pure-u-1-3"><p>Thirds</p></div> <div class="pure-u-1-3"><p>Thirds</p></div> <div class="pure-u-1-3"><p>Thirds</p></div> </div> Kích thước Grid Unit Pure CSS cung cấp cả nền lưới 5 tầng và 24 tầng Link tham khảo thêm: http://purecss.io/grids/ Ngoài ra còn có Pure Grids Rework Plugin đang được sử dụng ngày nay. Công cụ này cho phép người sử dụng có thể tùy chỉnh kích thước của Grid Unit Pure Responsive Grids Pure có hệ thống Responsive Grid đầu tiên trên điện thoại. Nó chính là 1 loại grids có tính linh hoạt và thiết thực được xây dựng dựa trên Grid gốc ban đầu. Grid trong trang của bạn Do media queries không thể bị viết trùng nên chúng tôi không gộp hệ thống grid trong thành phần của pure.css. Bạn cần phải gọi chúng thành từng file riêng biệt. Bạn có thể làm bằng cách thêm link sau vào trang của bạn: <! [if lte IE 8]> <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-old- ie-min.css"> <![endif] > <! [if gt IE 8]><! > <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive- min.css"> <! <![endif] > Pure's Regular Grid vs. Responsive Grid Cách tốt nhất để hiểu sự khác biệt giữa 2 loại Grids này là thông qua ví dụ: + Đoạn mã sau cho thấy cách viết của Regular Grid <div class="pure-g"> <div class="pure-u-1-3"> </div> <div class="pure-u-1-3"> </div> <div class="pure-u-1-3"> </div> </div>  Chúng luông hiển thị width = 33.33% trên bất cứ thiết bị nào + Kế tiếp là Responsive Grids <div class="pure-g"> [...]...  Hiển thị 10 0% width trên màn hình nhỏ - tuy nhiên là 33.33% trên màn hình vừa và lớn • Form: Form mặc định Stacked Form Code: . Blueprint CSS Grid Framework • Twitter Booststrap • PureCSS • Skeleton • YAML, YAML Builder • 960 CSS Grid System • CSS Boilerplate • Sparkl II. Một số CSS Framework Có bao giờ bạn phải viết HTML /CSS. CSS FRAMEWORK I. CSS Framework là gì? Hiểu theo từ framework thì nó là bộ công cụ giúp design trang web bằng css nhanh hơn. Nghĩa là là nó được trừu tượng. Bootstrap, PureCSS, Skeleton,… 1. Twitter Booststrap a. Giới thiệu Bootstrap là một CSS Framework phổ biến nhất hiện nay do Twitter phát triển. Twitter Bootstrap bao gồm các mã CSS + HTML cơ bản