Nhịp điệu theo chiều dọc cho Bootstrap của Twitter

Question

Có bất kỳ plugin/tiện ích/phương pháp hiện có nào để duy trì nhịp điệu theo chiều dọc cho dự án Bootstrap của Twitter không?

Đó là một nhiệm vụ khá mất thời gian để tạo các mẫu nhịp điệu thẳng đứng tốt, tôi thà sử dụng giải pháp đã được nướng trước. Tôi mở cửa cho các đề xuất sáng tạo, tôi chỉ muốn các trang của mình được sắp xếp hợp lý vào cuối.

---

Chỉnh sửa: Để làm rõ những gì tôi sau ...

nhịp Vertical là một kỹ thuật sử dụng để đảm bảo rằng tất cả các yếu tố trên một dòng trang lên theo một lưới ngang. Điều này đạt được bằng cách thiết lập chiều cao, đệm và lề của mỗi mục để phù hợp với kích thước đơn vị tiêu chuẩn. Nếu một dòng văn bản trong một đoạn cao 20px (bao gồm lề và đệm) thì có thể một tiêu đề 4 cũng sẽ cao 20px và tiêu đề 1 có thể cao 40px. Điều này duy trì nhịp điệu của văn bản trên các cột.

Tôi muốn sử dụng kỹ thuật này kết hợp với bootstrap (từ twitter), nhưng sẽ khá nhiều công việc để mọi thứ trông đẹp mắt. Ví dụ, tất cả các nút sẽ cần phải phù hợp với định nghĩa chiều cao dọc giống như văn bản đoạn vv ... Có các điều khiển tiêu chuẩn khác được sử dụng trong bootstrap mà cũng cần tất cả các quy tắc để xác định chiều cao của chúng một cách thích hợp.

Tôi có thể bắt đầu với một giải pháp chung cho nhịp điệu thẳng đứng, một cách dài để đạt được những gì tôi muốn, nhưng tôi muốn biết liệu có ai khác bắt đầu điều này hay không.

---

Chỉnh sửa: Giả sử không có gì giống như những gì tôi muốn là ...

Có lẽ chỉ là một dọc nhịp điệu tốt dựa css template sẽ là một điểm khởi đầu tốt. Tốt hơn là một cái gì đó đang tiếp tục được phát triển, đã có thể sử dụng được, cũng được suy nghĩ và thích nghi.

Answer 1

Vì không ai có thể liên kết với một soạn sẵn nhịp điệu thẳng đứng thực tế như bạn đề nghị, tôi mất người tôi sử dụng, nhận xét nó, và tạo ra một repo github cho nó ở đây https://github.com/jonschlinkert/vertical-rhythm

Vì nó nói trong readme, đây là điểm khởi đầu cho dự án của riêng bạn.

Answer 2

Tôi nghĩ rằng những gì bạn đang theo đuổi được hiểu. Vấn đề là: bạn đang tìm một giản đồ lưới trong một chiều (một "nhịp điệu thẳng đứng" được thiết lập phù hợp với, ví dụ, chiều cao đường tỷ lệ ... theo cách nói, đo lường và căn chỉnh mọi thứ dọc theo một trang nhất định Trục Y) ... nhưng thực hiện mọi thứ theo cách đó có thể có khả năng là tỷ lệ cược với hệ thống lưới 12 cột sẵn có của Bootstrap (ngược lại, các biện pháp và căn chỉnh mọi thứ dọc theo trục X của trang). Bạn muốn "tỷ lệ thuận" chiều cao của mỗi "hàng" trong khuôn khổ. NHƯNG: hãy nhớ rằng, thiết kế của Bootstrap được thiết kế để quảng bá không chỉ tỷ lệ thông qua các cột chỉ vì mục đích đẹp, mà còn làm cho các trang phản hồi --ie, để cho phép các phần tử trang "chảy" xung quanh nhau theo chiều dọc, và để làm tổ trôi chảy. Và, theo nghĩa đó, các vấn đề liên quan đến chiều cao của các phần tử đo dọc theo trục Y có thể đã được tính toán ... Tôi nhớ rằng hầu hết các phần tử typographic trong tệp CSS cơ sở đều có kích thước tỷ lệ và/hoặc tỷ lệ tương tự và đệm đáy, v.v. Nói chung, mọi thứ không tùy ý đến mức khuôn khổ đó sẽ hét lên một nhu cầu về kiểu dáng bổ sung theo cách bạn đang cân nhắc.

Mặc dù vậy: Tệp CSS cơ bản của Bootstrap không quá rộng lớn đến mức bạn không thể chỉnh sửa chiều cao của các lớp phần tử và ID khác nhau mà không gặp quá nhiều rắc rối. Trong mọi trường hợp, nó rất khó bạn thực sự sẽ cần phải làm điều đó với mọi yếu tố theo kiểu, phải không? Trong thực tế, như một khuôn khổ, Bootstrap bao gồm phong cách cho nhiều yếu tố mà thậm chí có thể không có trong ứng dụng mà bạn đang thiết kế giao diện người dùng. (Ví dụ: Ứng dụng của bạn có trình đơn thả xuống không? Tuyệt vời. Bạn có thể tạo kiểu "trình đơn dọc" của trình đơn thả xuống NHƯNG: bạn cũng đang sử dụng thuốc hoặc tab trong thanh điều hướng của mình?Vâng, bạn có thể chỉ cần xóa một vài trăm dòng mã trong bảng định kiểu và tiết kiệm cho mình những nỗ lực của việc phải áp dụng "nhịp điệu thẳng đứng" của bạn cho những yếu tố không cần thiết.) Ngược lại, đối với các yếu tố còn lại và bạn làm trên thực tế cần, chỉ cần sử dụng một trình soạn thảo văn bản để tìm thay thế các giá trị cho chiều cao dòng, đệm trên và dưới, lề, cỡ phông, vv ... và kiểm tra nó. Như một khuôn khổ CSS, nó khá rõ ràng như thế nào Bootstrap được đặt ra; các yếu tố liên quan được sắp xếp tốt và được nhóm lại với nhau trong mã của biểu định kiểu cho hầu hết các phần. Khi bạn hoàn thành việc chỉnh sửa tệp CSS cơ sở, chỉ cần rút gọn bản định kiểu đã sửa đổi của bạn ... để thay thế phiên bản đã được rút gọn trước đó ... hoặc, có thể, chỉ phân phối nó từ CloudFront nếu bạn muốn tối ưu hóa.

Answer 3

Bạn đã xem khung CSS Square Grid chưa?

http://thesquaregrid.com/

Một khung CSS đơn giản cho các nhà thiết kế và các nhà phát triển, dựa trên 35 cột bằng chiều rộng. Nó nhằm mục đích cắt giảm thời gian phát triển và giúp bạn tạo các trang web có cấu trúc đẹp mắt.

Lưới vuông cung cấp lưới ngang chuẩn, nhưng nó cũng duy trì lưới dọc, sử dụng "hình vuông" chuẩn là 28px. Nó thực sự chỉ là một mạng lưới, không phải là một thư viện CSS đầy đủ như Bootstrap (tức là không có nút, menu, v.v.).

Tôi đã từng sử dụng cho một dự án và thấy nó khá trực quan, mặc dù cuối cùng tôi đã quyết định rằng tôi quá khó để theo dõi cả lưới dọc và ngang, đặc biệt khi suy nghĩ về thiết kế đáp ứng.

Bạn có thể kết hợp hai hoặc ít nhất hãy xem mã nguồn lưới vuông là CSS khá đơn giản để có được một số ý tưởng về cách điều chỉnh Bootstrap để đáp ứng nhu cầu của bạn.

Answer 4

Compass CSS Authoring Framework có hỗ trợ rõ ràng cho vertical rhythm kiểu chữ cơ bản. Để bắt đầu, bạn có thể xem đoạn mã ngắn video tutorial này.