Xây dựng hệ thống lưới điện hiện đại

NộI Dung

• 01. Sự phổ biến của hệ thống lưới điện
• 02. Những gì chúng ta cần từ một lưới
• 03. Bắt đầu
• 04. Làm cho nó phản hồi
• 05. Cố lên. Đây không phải là ngữ nghĩa
• 06. Các bước tiếp theo
• Thích cái này? Đọc những thứ này!

• Kiến thức cần thiết: CSS trung gian, HTML trung gian
• Đòi hỏi: Trình chỉnh sửa mã, trình duyệt
• Thời gian dự án: 1 giờ
• Tệp hỗ trợ

Thành thật mà nói, xây dựng trang web là tuyệt vời. Chúng tôi có thể tạo ra những trải nghiệm phong phú, năng động được hàng trăm, hàng nghìn, hàng triệu người trên khắp thế giới nhìn thấy. Chúng tôi được chơi với những món đồ chơi mới, làm việc với tất cả các công ty tốt nhất và tìm hiểu mà không bị coi là mọt sách (bạn biết đó là sự thật). Đó là những điều tốt.

Điều tồi tệ (không sao, thách thức) là chúng ta phải cạnh tranh với ngày càng nhiều loại trình duyệt và thiết bị, đồng thời xây dựng ngày càng nhiều trang web phức tạp và đầy đủ tính năng hơn chúng ta từng có trước đây. Đó là lý do tại sao chúng tôi cần hệ thống lưới. Họ giúp chúng tôi xây dựng mọi thứ nhanh hơn và tốt hơn, đồng thời hướng tới tương lai của ngành công nghiệp của chúng tôi. Hãy xem xét một hệ thống lưới hiện đại cần những gì, sau đó xây dựng nó.

01. Sự phổ biến của hệ thống lưới điện

Lưới không phải là mới. Có rất nhiều hệ thống lưới hoàn hảo khả thi đã có sẵn để giúp bạn hoàn thành công việc. Có những thứ như 960.gs, Blueprint, Bootstrap, 320 trở lên, Golden Grid, semantic.gs ... vv ... vv, ad nauseam. Mỗi thứ mang đến một cái gì đó để bàn, mỗi cái để lại một số thứ cần được mong muốn.

Lý do lưới phổ biến là do chúng hoạt động. Khi bạn đang tạo bố cục cho web, chín lần trong số 10 hệ thống lưới linh hoạt hợp lý sẽ giúp bố cục của bạn hoàn thành 90% cách ở đó và giúp bạn tiết kiệm hàng giờ viết mã tùy chỉnh. Có những lo ngại chính đáng rằng hệ thống lưới hạn chế suy nghĩ của chúng ta và hạn chế chúng ta với những thứ chúng ta nên tránh, nhưng với một chút kỷ luật và quy trình thiết kế vững chắc, chúng ta có thể tránh được điều đó.

02. Những gì chúng ta cần từ một lưới

Chúng ta đang tìm kiếm gì trong một hệ thống lưới? Những gì chúng ta sẽ xem xét ở đây không phải là giải pháp cho mọi vấn đề, mà đó là một cách tư duy tương lai (và khá hay) để tấn công vấn đề.

Đây là những gì chúng tôi cần từ lưới của mình:

• Chúng tôi cần sự linh hoạt cho các bố cục trong thế giới thực. Chúng tôi cần có đủ cột trong một cấu hình cho phép chúng tôi đáp ứng phần lớn các yêu cầu về bố cục có thể có của chúng tôi. Điều đó có nghĩa là thứ gì đó có thể phân chia được trong nhiều nhóm mà không quá chi tiết. Đối với mục đích của chúng tôi ngày hôm nay, chúng tôi sẽ sử dụng 12. Điều này cho phép chúng tôi dễ dàng chia trang thành một nửa, một phần ba và một phần tư.
• Chúng ta cần có thể lồng lưới. Một cấp độ cột duy nhất giúp chúng ta đi được một phần con đường đến đó, nhưng có một số thứ bạn có thể lồng xuống N cấp độ sẽ mang lại cho bạn sự linh hoạt đáng kinh ngạc.
• Chúng tôi cần lưới điện để đáp ứng. Điều này có vẻ giống như nó xuất phát từ trường bên trái, nhưng tôi tin tưởng, đó là một yêu cầu. Theo nghĩa đen, có hàng trăm thiết bị khác nhau mà trang web của bạn cần hỗ trợ và con số đó chỉ đang tăng lên. 960 lưới đã chết, và khả năng xử lý tốt. Lưới của chúng tôi phải linh hoạt (dựa trên tỷ lệ phần trăm) và được định cấu hình để thu nhỏ trên các thiết bị nhỏ hơn.
• Chúng tôi cần lưới có thể sửa đổi được. Một trong những phàn nàn lớn nhất mà bạn sẽ thấy từ những người dùng hệ thống lưới đáp ứng là khó sửa đổi những thứ chẳng hạn như kích thước máng xối. Tính toán lại tỷ lệ phần trăm dựa trên sự thay đổi máng xối từ 4,4% đến 3,6% không phải là một cách thú vị để dành một giờ. Chúng tôi sẽ giải quyết vấn đề này bằng cách sử dụng một thuộc tính CSS tương đối ít được sử dụng mà chúng tôi sẽ thảo luận một chút. Nó khá tuyệt.
• Chúng ta cần lưới tương thích ngược. Đến một điểm. Cả thế giới không sử dụng Chrome hoặc iOS5 Mobile Safari. Như đã nói, mục tiêu của chúng tôi hôm nay sẽ là hỗ trợ cho Android, iOS 4+, các trình duyệt Webkit, Firefox và IE8 +.

03. Bắt đầu

Để bắt đầu, chúng tôi cần một tệp CSS trống có tên grid.css. Chúng tôi sẽ sử dụng tệp này cho lưới của mình, vì vậy, tệp có thể được đưa vào bất kỳ dự án nào. Xin lưu ý thêm, lưới mà chúng ta đang xây dựng ngày hôm nay sẽ chính xác (hoặc rất gần) với lưới được sử dụng trong Nền tảng 3 (hiện tại trên 2.2.1).

Đầu tiên, hãy thiết lập cú pháp cho lưới (rất đơn giản). Về cơ bản, chúng tôi tạo các hàng, giữ các cột. Chúng tôi sẽ sử dụng những từ đó để giúp con người này có thể đọc được.

.hàng { }
.column, .columns {}

.row .one {}
.row .two {}
.row .three {}
.row .four {}
.row .five {}
.row .six {}
.row .seven {}
.row .eight {}
.row .nine {}
.row .ten {}
.row .eleven {}
.row .twelve {}

Với những khai báo trống này, bạn có thể thấy cú pháp của chúng tôi trông như thế nào trong HTML. Để tạo một hàng có ba cột có kích thước bằng nhau, chúng tôi sẽ làm như sau:

div>
div>
...
/ div>
div>
...
/ div>
div>
...
/ div>
/ div>

Mỗi cột đó bây giờ có thể chứa bất kỳ nội dung tùy ý nào mà chúng ta muốn. Bây giờ, chúng ta cần có các cột và hàng đó thực sự hoạt động. Thêm các thuộc tính này vào .hàng và .cột, .cột khai báo:

.row {width: 1000px; chiều rộng tối đa: 100%; chiều rộng tối thiểu: 768px; margin: 0 auto; }
.column, .columns {float: left; chiều cao tối thiểu: 1px; đệm: 0 15px; chức vụ: thân nhân; }

Được rồi, hãy giải thích điều gì đang xảy ra ở đây:

• Chiều rộng hàng: Trên phần tử hàng, chúng tôi đã đặt hàng rộng 1.000px (chiều rộng trang cơ sở của chúng tôi). Tuy nhiên, chúng tôi cũng cho biết chiều rộng tối đa là 100%, có nghĩa là khi trình duyệt thu nhỏ (ví dụ: trên iPad hoặc iPhone), hàng không được vượt quá chiều rộng của cửa sổ. Chiều rộng tối thiểu của chúng tôi sẽ đảm bảo các hàng không nhỏ một cách hài hước trong IE8, vốn không hỗ trợ các truy vấn phương tiện.
• Lề hàng: Bằng cách đặt lề: 0 tự động, chúng tôi đã căn giữa các hàng của mình trên trang.
• Định vị cột: Tất cả các cột của chúng tôi hiện đang trôi sang trái, ngay bây giờ, vì vậy chúng sẽ xếp chồng lên nhau.
• Chiều cao tối thiểu của cột: Thuộc tính min-height đảm bảo cột trống đó vẫn ảnh hưởng đến thứ tự float.
• Phần đệm cột: Thuộc tính đệm này thực sự là máng xối cột của chúng tôi. Bằng cách đặt nó thành 15px, chúng tôi đang đặt 15px ở bên trái và bên phải của mỗi cột, tạo ra các rãnh 30px giữa các cột.

Đây rõ ràng chỉ là một phần của những gì chúng ta cần để lưới điện của chúng ta hoạt động. Rõ ràng, chúng ta cần khai báo độ rộng của các cột của chúng ta. Vì chúng ta có lưới 12 cột, các độ rộng đó là số cột rộng được chia thành 12, theo tỷ lệ phần trăm của 100. Ví dụ: 6/12 = 0,5, 50%. Chiều rộng của chúng tôi trông như thế này:

.row .one {width: 8.33%}
.row .two {width: 16,66%}
.row .three {width: 25%}
.row .four {width: 33,33%}
.row .five {width: 41,66%}
.row .six {width: 50%}
.row .seven {width: 58,33%}
.row .eight {width: 66,66%}
.row .nine {width: 75%}
.row .ten {width: 83,33%}
.row .eleven {width: 91,66%}
.row .twelve {width: 100%}

Tất cả các cột của chúng tôi đều có chiều rộng đại diện cho kích thước được xác định bởi số lượng cột của chúng. Những gì bạn có thể đang nghĩ là, "nếu chúng tôi tạo ra các cột có kích thước đơn giản dựa trên sự phân chia của chúng trên 100, không phải phần đệm mà chúng tôi đặt trên chúng sẽ khiến chúng rộng hơn và làm hỏng lưới của chúng tôi sao?" Bình thường, có. Hãy xem xét một phần quan trọng của điều này mà chúng tôi chưa có và đó là một tuyên bố đơn giản mà bạn sẽ thực hiện cho mọi phần tử trên trang:

* {viền-hộp; box-sizing: border-box; }

Tài sản nhỏ này làm một cái gì đó vừa tuyệt vời vừa mỉa mai cho chúng tôi. Những gì nó nói là các phần tử trên trang không nên thêm phần đệm và đường viền vào chiều rộng của một đối tượng, nhưng nên coi chúng là một phần của chiều rộng.Do đó, một đối tượng có 50% chiều rộng và không có đệm sẽ có cùng chiều rộng với một đối tượng có 50% chiều rộng và 15px đệm bên trong. Khá tuyệt phải không?

Đúng. Nó là mát mẻ. Nó cũng là mô hình hộp IE6. Thật mỉa mai, phải không? Tất cả thời gian này, và tất cả những thứ này trên IE6 (và đúng như vậy) và cuối cùng thì IE6 đã thực sự xử lý mô hình hộp theo cách lành mạnh hơn nhiều so với bất kỳ trình duyệt nào tiếp theo. Cảm ơn W3C vì điều đó. Nếu không có thuộc tính CSS này hoặc không có mô hình hộp IE6, không thể tạo một đối tượng có chiều rộng 50% nhưng với 15px đệm. (Lưu ý: không hoàn toàn đúng. Nhưng ủng hộ cho calc () trong CSS về cơ bản là không tồn tại ngay bây giờ.)

Bây giờ, để điều này thực sự hoạt động, chúng tôi cũng cần một số thuộc tính có tiền tố của nhà cung cấp (iOS 4 không hỗ trợ nếu không có -webkitvà Firefox cần -moz). Khai báo đầy đủ trông như thế này:

* {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

Nếu bạn muốn tìm hiểu sâu hơn về hộp viền, Paul Ailen đã viết một bài đăng tuyệt vời về lợi ích của việc sử dụng hộp viền trên mọi thứ.

Hãy tóm tắt lại trước khi chúng ta đi sâu vào một số phần nhỏ hơn. Lưới của chúng tôi, ngay bây giờ, sẽ trông như thế này:

* {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.row {width: 1000px; chiều rộng tối đa: 100%; chiều rộng tối thiểu: 768px; margin: 0 auto; }

.column, .columns {float: left; chiều cao tối thiểu: 1px; đệm: 0 15px; chức vụ: thân nhân; }

.row .one {width: 8.33%}
.row .two {width: 16,66%}
.row .three {width: 25%}
.row .four {width: 33,33%}
.row .five {width: 41,66%}
.row .six {width: 50%}
.row .seven {width: 58,33%}
.row .eight {width: 66,66%}
.row .nine {width: 75%}
.row .ten {width: 83,33%}
.row .eleven {width: 91,66%}
.row .twelve {width: 100%}

Đang tiến bộ, nhưng nó vẫn chưa thành công. Điều đầu tiên, hãy định cấu hình lưới của chúng tôi để hỗ trợ lồng nhau. Vì chúng tôi đang sử dụng tỷ lệ phần trăm, điều này rất đơn giản. Bất kỳ hàng lồng nhau nào cũng sẽ có một số ghi đè cụ thể, và nếu không sẽ chỉ… hoạt động. Thêm dòng này sau .hàng tờ khai:

.row .row {width: auto; max-width: không có; chiều rộng tối thiểu: 0; lề: 0 -15px; }

Điều khó khăn duy nhất xảy ra ở đây là chúng tôi đang đặt một lề trái và phải âm trên hàng. Chúng tôi làm điều này vì hàng vùng chứa có phần đệm trên đó và các cột lồng nhau cũng vậy - nhưng chúng tôi không muốn tăng gấp đôi trên phần đệm đó nếu không các hàng lồng nhau của chúng tôi sẽ bị thụt vào. Chiều rộng và lề âm: auto có nghĩa là hàng sẽ mở rộng ra các cạnh của hàng vùng chứa, bên ngoài phần đệm của cột chứa.

Đáng chú ý, đó là tất cả những gì chúng ta cần để hỗ trợ lồng ghép. Bây giờ chúng ta có thể có cú pháp trong HTML giống như sau:

div>
div>
div>
div>
...
/ div>
div>
...
/ div>
/ div>
/ div>
div>
...
/ div>
div>
...
/ div>
/ div>

Thay đổi đơn giản đó mở ra một loạt các tùy chọn bố cục cho chúng tôi. Đáng buồn thay, lưới điện của chúng tôi vẫn bị phá vỡ như địa ngục mà không có thêm một vài thay đổi. Tiếp theo, hãy đảm bảo rằng các hàng của chúng ta thực sự xếp chồng chính xác mặc dù chỉ chứa các phần tử nổi (điều này thường có nghĩa là hàng không có chiều cao). Chúng tôi không muốn sử dụng tràn: ẩn trên .hàng, đề phòng trường hợp chúng ta cần những thứ như bóng hộp xuất hiện. Thay vào đó, hãy sử dụng cái này:

/ * Bản sửa lỗi vi mô của Nicolas Gallagher * /
.row: trước, .row: sau, .clearfix: trước, .clearfix: sau {content: ""; hiển thị: bảng; }
.row: sau, .clearfix: sau {clear: cả hai; }
.row, .clearfix {zoom: 1; }

Như bạn có thể thấy, ủng hộ Nicolas Gallagher cho đoạn mã này. Điều này đảm bảo rằng các hàng của chúng ta có chiều cao thực và các hàng xếp chồng lên nhau sẽ không chồng lên các cột của chúng hoặc làm bất kỳ điều gì đáng tiếc khác. Nó dựa vào hành vi của hiển thị bảng, cũng như nội dung: sau khi cung cấp một cái gì đó để xóa số nổi của chúng ta với mỗi hàng.

Với điều này tại chỗ, lưới của chúng tôi thực sự đang hoạt động. Chúng ta có thể tạo các hàng và cột và điền chúng bằng nội dung tùy ý - thậm chí là các hàng khác. Một điều cuối cùng, một tiện ích giúp lưới của chúng ta trông thực sự ngọt ngào. Đặt những dòng này ngay sau .cột, .cột tờ khai:

[class * = "column"] + [class * = "column"]: last-child {float: right; }
[class * = "column"] + [class * = "column"]. end {float: left; }

Nếu bạn chưa sử dụng các bộ chọn như thế này trước đây, điều này có thể trông vô lý. Hãy chia nhỏ nó ra:

• [class * = ”column”] - Đây là một bộ chọn ít được nhìn thấy nhắm mục tiêu giá trị của một thuộc tính HTML. Trong trường hợp này, thuộc tính "class". Về cơ bản, bất kỳ phần tử HTML nào có lớp chứa đựng "Cột" sẽ được khớp ở đây. Bạn phải hết sức cẩn thận với những loại bộ chọn này, vì chúng cũng sẽ khớp với một loại “sidebar-column” hoặc “sidebarcolumn”.
• [class * = ”column”] + [class * = ”column”] - Bộ chọn anh chị em này có nghĩa là chúng tôi chỉ muốn nhắm mục tiêu các cột đến sau cột khác. Về cơ bản, điều này giúp chúng tôi bỏ qua các cột đơn, ví dụ: một cột được căn giữa hoặc khối mười hai cột.
• [class * = ”column”] + [class * = ”column”]: last-child - Cuối cùng, điều này có nghĩa là chúng tôi chỉ muốn Cuối cùng cột đến sau một cột khác. Nếu không, chúng tôi sẽ nhận được mọi cột ngoại trừ cột đầu tiên trong một hàng.
• float: đúng - Điều này giúp chúng tôi giải quyết sự cố với lưới phần trăm chiều rộng: các trình duyệt không làm tròn chúng theo cùng một cách. Nếu không có điều này, bạn sẽ nhận thấy rằng các hàng không phải lúc nào cũng kết thúc ở cùng một vị trí. Nếu chiều rộng 66,66% có nghĩa là 666,6 pixel, một số trình duyệt sẽ đặt giá trị đó mỗi lần (chỉ 666px, Chrome), một số sẽ hoán đổi giá trị sàn và trần để một cái được làm tròn lên, cái tiếp theo xuống, v.v. (Firefox) và một số thì thậm chí sàn tỷ lệ phần trăm đầu tiên. Làm nổi cột cuối cùng bên phải có nghĩa là, trong khi rãnh nước có thể lớn hơn một hoặc hai pixel, cạnh bên phải sẽ luôn bằng nhau.
• [class * = ”column”] + [class * = ”column”]. end - Bạn thực sự có thể không muốn cột cuối cùng luôn đi đúng. Nếu bạn tạo một hàng chỉ có hai .four.column các khối có không gian trống có chủ ý ở bên phải, bạn có thể thêm một lớp .end để đảm bảo rằng nó không trôi qua. Điều này thường ít xảy ra hơn, do đó nó là một trong những bạn phải chọn tham gia.

Chà! Đó là một lời giải thích quan trọng cho một vài dòng, nhưng chúng là bộ chọn CSS thú vị và đáng để phân tích một chút. Và bây giờ chúng ta đã hoàn thành (hiện tại). Hãy tóm tắt lại. Đây là lưới của chúng tôi sẽ trông như thế nào:

* {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.row {width: 1000px; chiều rộng tối đa: 100%; chiều rộng tối thiểu: 768px; margin: 0 auto; }
.row .row {width: auto; max-width: không có; chiều rộng tối thiểu: 0; lề: 0 -15px; }

.column, .columns {float: left; chiều cao tối thiểu: 1px; đệm: 0 15px; chức vụ: thân nhân; }
[class * = "column"] + [class * = "column"]: last-child {float: right; }
[class * = "column"] + [class * = "column"]. end {float: left; }

.row .one {width: 8.33%}
.row .two {width: 16,66%}
.row .three {width: 25%}
.row .four {width: 33,33%}
.row .five {width: 41,66%}
.row .six {width: 50%}
.row .seven {width: 58,33%}
.row .eight {width: 66,66%}
.row .nine {width: 75%}
.row .ten {width: 83,33%}
.row .eleven {width: 91,66%}
.row .twelve {width: 100%}

/ * Bản sửa lỗi vi mô của Nicolas Gallagher * /
.row: trước, .row: sau, .clearfix: trước, .clearfix: sau {content: ""; hiển thị: bảng; }
.row: sau, .clearfix: sau {clear: cả hai; }
.row, .clearfix {zoom: 1; }

Điều này có đáp ứng các tiêu chí của chúng tôi về một lưới điện hiện đại không? Hãy kiểm tra:

• Uyển chuyển: Đúng vậy, chúng ta có đủ cột và lồng nhau để hoàn thành công việc.
• Làm tổ: Kiểm tra, xem ở trên.
• Phản ứng nhanh nhẹn: Chưa. Hừ! Hãy làm điều đó.

04. Làm cho nó phản hồi

Đối với hướng dẫn này, chúng ta sẽ xem xét mức tối thiểu để tạo ra tính năng đáp ứng này: tạo đường thẳng cho lưới trên các thiết bị nhỏ và làm cho mọi cột xếp chồng lên nhau trước đó. Chúng tôi sẽ sử dụng truy vấn phương tiện CSS3 cho điều này, được hỗ trợ trong tất cả các mục tiêu của chúng tôi ngoại trừ IE8:

@media only screen and (max-width: 767px) {
...
}

Chúng tôi sẽ đối sánh truy vấn phương tiện thiết bị nhỏ của mình với nhỏ hơn iPad (báo cáo chiều rộng của nó là 768px, theo bất kỳ hướng nào, trên màn hình thường hoặc màn hình retina). Bên trong truy vấn phương tiện đó, chúng ta cần thực hiện một số ghi đè:

.row {width: auto; chiều rộng tối thiểu: 0; lề trái: 0; margin-right: 0; }

.column, .columns {width: auto! important; float: không có; }
.column: last-child, .columns: last-child {float: none; }
[class * = "column"] + [class * = "column"]: last-child {float: none; }

.column: trước, .columns: trước, .column: sau, .columns: sau {content: ""; hiển thị: bảng; }
.column: sau, .columns: sau {clear: cả hai; }

Ở đây không có gì nhiều mà chúng tôi cần giải thích quá chi tiết: về cơ bản chúng tôi đang nói với trình duyệt rằng, trên một màn hình nhỏ, không thả nổi các cột, không cung cấp cho chúng chiều rộng tối thiểu, đừng đặt chúng vào lề . Chúng tôi dựa vào đệm tương tự như trên để tạo khoảng cách giữa nội dung và cạnh của màn hình, và chúng tôi xóa phần nổi trên mỗi cột khi chúng tôi thực hiện các biện pháp tốt. Nó xếp chồng lên lưới của chúng tôi và thiết kế dựa trên% của chúng tôi sẽ lo phần còn lại cho chúng tôi.

Được rồi, bây giờ chúng ta đang làm như thế nào trong danh sách kiểm tra:

• Uyển chuyển: Vẫn tốt.
• Làm tổ: Rock ‘n roll.
• Phản ứng nhanh nhẹn: Đúng vậy. Chúng tôi có thể làm nhiều việc hơn nữa (và trong lưới Foundation 3, trên Github, chúng tôi làm) nhưng điều này mới hoàn thành công việc bây giờ.
• Có thể sửa đổi: Vâng, dễ dàng. Bằng cách thay đổi khoảng đệm trên các cột và lề âm trên các hàng, chúng ta có thể sửa đổi kích thước rãnh nước của mình với hai giá trị. Nếu chúng ta muốn có lưới 24 cột, thì phép toán đơn giản là chia 1, 2, 3 thành 24 thay vì mười hai. Ngọt.
• Sự tương thích ngược: Đúng. box-sizing thực sự hoạt động từ xa như IE8 (xem hình). Có một tệp hành vi mà bạn có thể sử dụng để bật thuộc tính kích thước hộp trong IE7, nhưng tệp này có một số vấn đề nghiêm trọng với chiều rộng tự động. Hy vọng rằng điều đó sẽ sớm được giải quyết - nếu đúng như vậy, lưới của chúng tôi đã sẵn sàng để đưa vào IE7.

Và đó là jenga. Đi ra và tạo ra các bố cục ngọt ngào.

05. Cố lên. Đây không phải là ngữ nghĩa

Vâng, không phải vậy. Bạn đã có chúng tôi. Đây là vấn đề: bạn có thể tạo lưới ngữ nghĩa (tách biệt rõ ràng dữ liệu và hiển thị), như semantic.gs, nhưng nó yêu cầu một bộ xử lý trước như Sass. Ngoài nhu cầu về một công cụ khác (và thực sự, Sass và các công cụ như nó khá tuyệt), CSS đầu ra của một lưới ngữ nghĩa, khá thẳng thắn, điên rồ. Bạn kết thúc với các bộ chọn được phân tách bằng dấu phẩy vượt quá khả năng đọc và sửa đổi chúng, hoặc với các thuộc tính lặp đi lặp lại nhiều lần. Ngữ nghĩa thực sự tuyệt vời và trong tương lai, điều này sẽ bắt đầu trở nên quan trọng, nhưng bây giờ chúng ta không có ở đó. Xây dựng một trang web tốt hơn cho khách hàng có nghĩa là xây dựng nhanh chóng và lặp đi lặp lại, và bạn có thể xây dựng nhanh hơn bằng cách không phải lo lắng về điều này (quá nhiều).

06. Các bước tiếp theo

Một hệ thống lưới hoàn chỉnh, mạnh mẽ cần có những thứ như bù trừ, sắp xếp nguồn, lưới N đối tượng như lưới khối ba-up, v.v. Bạn có thể xem phiên bản đầy đủ của lưới này (và xem nó phát triển khi cần) trên Github. Vì Foundation là mã nguồn mở, hãy thử với lưới này, kiểm tra toàn bộ và sau đó giúp chúng tôi làm cho nó tốt hơn nữa. Ngành công nghiệp của chúng tôi đang phát triển hàng ngày và các công cụ cũng vậy.

Jonathan đã là một người rất ham chơi miễn là anh có thể nhớ được, kể từ khi chơi trò chơi mê cung trực tuyến cũ đó trên Prodigy cho đến khi bắt đầu sự nghiệp thiết kế phương tiện kỹ thuật số. Anh ấy đã làm việc trong phần mềm dịch vụ tài chính ở Alabama một thời gian trước khi đến bờ biển phía tây cho ZURB: www.zurb.com

Thích cái này? Đọc những thứ này!

• Cách tạo ứng dụng
• Phần mềm thiết kế đồ họa miễn phí có sẵn cho bạn ngay bây giờ!
• Lựa chọn hướng dẫn Wordpress rực rỡ
• Phông chữ web yêu thích của chúng tôi - và chúng không tốn một xu