01/10/2018, 14:00
Cần lắm 1 bài tổng hợp các phương pháp dàn layout web?
Chào các bạn. Mình đang có ý định tự xây dựng 1 blog cá nhân. Vì cấu trúc trang cũng khá đơn giản nên mình muốn tự xây dựng, code thủ công thay vì dùng các công cụ kéo thả, sinh mã tự động hay các framework build sẵn. Mình đang cần dựng layout. Tìm hiểu qua thì mình biết các phương pháp dàn layout như sau:
- sử dụng table
- sử dụng thẻ div trong html + class trong css (both, clear)
- sử dụng grid system của thư viện nào đấy
- sử dụng flex box trong css3
Bạn nào có thể nếu ra các pp khác (nếu có) và ưu nhược điểm của từng pp, nên sử dụng cái nào và cho kèm ví dụ layout đơn giản sử dụng pp đó giúp mừn vứi
Tiện đây mình muốn hỏi luôn về reset css. Mình thấy có khá nhiều bộ reset css và khá là nặng. Không biết có dùng hết không. Vậy có nên sử dụng các bộ reset css có sẵn, hay là tự viết, và nếu tự viết thì cái gì cần normalize
Xin cam ơn
Bài liên quan
cứ boootstrap 3 mà fang, reinvent the wheel làm gì cho khổ. Tự chế phải canh responsive cho tablet, cho phone nữa, thành ra viết 3 cái thay vì 1 cái
…
base template cần có 1 cái navbar, 1 cái side bar, 1 cái banner, 1 cái footer, 1 cái chứa content
template cho
v.v…
ngoài ra còn có thể cần có các plugins như viết công thức toán học, viết code có highlight, v.v…
… tùm lum tá lả ko có đơn giản đâu @_@
https://www.staticgen.com/ chọn 1 cái static site generator rồi phang từ từ, còn hem thích thì wordpress thẳng tiến
mình không định làm cầu kì thế, ý định của mình chỉ làm
về sau có thể có thêm trang quản lý, vì tạm thời mình đang làm web tĩnh, chỉ viết bài rồi generate mã thôi, chưa làm web động
thành phần layout cũng đơn giãn, mấy thứ banner các thứ mình không làm, blog cá nhân mà, mình không định làm bự như các blog bách khoa toàn thư bây giờ, cái gì cũng có
dùng boootstrap thì có vẻ hơi nặng so với layout mình sẽ làm, mà sợ mã thừa nhiều, mình có tìm hiểu thấy mấy hướng dẫn tự tạo 1 hệ thống grid system và reponsive luôn. Nhưng tham khảo ý kiến đã
tạo ra được 1 trang hoàn chỉnh đã rồi tính tới nặng nhẹ sau
1 cái hình vài chục tới vài trăm kb rồi, 1 cái css/js vài trăm kb chả xi nhê gì đâu. Với lại browser còn cache tụi nó nữa nên có nặng 1mb cũng chỉ download có 1 lần xài cho 1 tuần tới 1 tháng ko có nặng đâu
xong xuôi test speed ở đây: https://developers.google.com/speed/pagespeed/insights/ rồi xem cái gì chậm thì optmize sau. Đương nhiên chưa làm xong mà bàn tới tốc độ load nhanh/chậm hay file nặng/nhẹ là bất khả thi.
Dân CSS thuần nè.
Bootstrap hay các CSS Framework có 2 điểm yếu: 1 element đơn giản có quá nhiều DOM, có nhiều UI mà không bao giờ sử dụng.
Mình thấy CSS thuần dễ scale hơn, vì nếu làm Bootstrap phải mất công modify lại default UI của Bootstrap, tốn thêm 1 mớ DOM, CSS, code phình to thêm.
Dạo này cũng đang chơi làm SPA trên VanillaJS (+RxJS)
Bạn nên học thêm SASS để sử dụng các fw build dạng modules nhé, add component vào thôi đỡ vả.
CSS-Tricks
Nếu thực sự muốn CSS thuần toàn bộ để scale cho dễ (nhưng lâu) thì mình khuyên bạn dùng Flexbox để dàn layout. 10 năm trước thì nó không dc hỗ trợ nhiều chứ bây giờ cả Bootstrap cũng chuyển sang dùng Flexbox rồi.
Tham khảo thêm tại đây:
A Complete Guide to Flexbox | CSS-Tricks
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the differnet possible properties for the parent element (the flex container) and the child elements (the flex items). It also...
Framework build trên flexbox và dạng modules cho bạn import sử dụng:
Modularity
An overview of what Bulma as a framework is all about
Hoặc không thích 2 cái trên thì xài cái này copy tay các snippets sử dụng Flexbox cho nhanh:
http://www.flexboxpatterns.com/home