트위터의 부트 스트랩에 대한 수직 리듬

Question

트위터의 부트 스트랩 프로젝트에 수직 리듬을 유지하기위한 기존 플러그인/확장/메소드가 있습니까?

좋은 세로 형 리듬 템플리트를 만드는 것은 힘든 작업이지만, 미리 굽는 솔루션을 사용하고 싶습니다. 나는 창조적 인 제안에 열려 있습니다, 나는 단지 내 페이지가 멋지게 결국 정렬 싶습니다.

---

편집 :

수직 리듬이 페이지 라인까지의 모든 요소가 수평 그리드에 따른 보장하기 위해 사용하는 기술입니다 ... 난 후 누구인지 명확히하기 위해. 이것은 모든 항목의 높이, 패딩 및 여백을 표준 단위 선 크기에 맞게 설정하여 이루어집니다. 단락의 텍스트 줄이 20px (마진 및 패딩 포함) 인 경우 제목 4는 20px, 제목 1은 40px가 될 수 있습니다. 이렇게하면 열 사이의 텍스트 리듬이 유지됩니다.

이 기술을 부트 스트랩 (트위터)과 함께 사용하고 싶지만 모든 것이 멋지게 보이게하려면 많은 노력이 필요합니다. 예를 들어, 모든 버튼은 단락 텍스트 등과 같은 세로 높이 정의를 준수해야합니다. 부트 스트랩에 사용되는 다른 표준 컨트롤도 있으며 높이를 적절하게 정의하는 규칙이 필요합니다.

나는 수직 리듬을위한 일반적인 솔루션으로 시작할 수 있는데, 이는 내가 원하는 것을 얻기 위해 먼 길을 갈 것이지만, 다른 누군가가 이것을 시작했는지 알기를 원하거나 이것을 이루기위한 다른 방법이있다.

---

편집 :

어쩌면 그냥 좋은 수직 리듬을 기반으로 CSS 템플릿이 좋은 출발점이 될 것입니다 ... 내가 원하는 어디에도없는 가정. 개발이 계속되고있는 무언가는 이미 사용 가능하고, 잘 생각하고, 적응할 수있는 것이 바람직합니다.

Answer 1

는 아무도 당신이 제안 실제 수직 리듬 보일러에 연결하지 않았기 때문에, 나는 그것을 주석, 내가 사용하는 일을했다, 그것은, 추가 정보에서이 말했듯이 여기에 대한 https://github.com/jonschlinkert/vertical-rhythm

을 github의의 REPO를 생성 자신의 프로젝트를위한 출발점입니다.

Answer 2

나는 당신이 겪고있는 일이 이해된다고 생각합니다. 문제는 하나의 차원에서 그리드 스키마를 찾는 것입니다 (예 : 비례선 높이에 따라 설정된 "세로 리듬"... 말하기의 방식으로 특정 페이지의 것들을 측정하고 정렬 함). Y 축) ... 그런 방식으로 일을하는 것은 Bootstrap의 기존 12- 열 그리드 시스템 (페이지의 X 축을 따라 사물을 측정하고 정렬 함)과 잠재적으로 상반 될 수 있습니다. 프레임 워크의 각 "행"의 높이를 "비례 화"하려고합니다. 그러나 Bootstrap의 디자인은 단지 열을 통해 열을 통해 비례뿐만 아니라 페이지를 으로 응답하도록 디자인되었습니다. --ie는 페이지 요소가 서로 "흐르도록"허용합니다. 수직으로, 그리고 유동적으로 둥지를 튼다. 그리고 그 의미에서, Y 축을 따라 측정 된 요소의 높이와 관련된 문제는 이미 고려되었을 것입니다 ... 기본 CSS 파일의 활자 요소 대부분은 비례 em 크기 및/또는 마찬가지로 비례 상단을 가짐을 기억합니다 그리고 바닥 패딩 (bottom padding) 등이 있습니다. 일반적으로 사물이 너무 자의적이어서 프레임 워크가 고려중인 방식으로 추가 스타일을 필요로한다고 비명을 지릅니다.

그럼에도 불구하고 : 부트 스트랩의 기본 CSS 파일은 너무나도 큰 문제없이 다양한 요소 클래스와 ID의 높이를 조정할 수 없을만큼 광범위하지는 않습니다. 어쨌든 모든 스타일 요소를 사용하여 실제로 그렇게 할 필요는 거의 없습니다. 사실, 프레임 워크로서, 부트 스트랩은 프론트 엔드를 디자인하고있는 앱에 포함되지 않은 많은 요소의 스타일링을 포함합니다. (예 : 앱에 드롭 다운 메뉴가 있습니까?) 드롭 다운 메뉴의 "수직 리듬"스타일을 지정할 수 있지만 탐색 모음의 약이나 탭을 사용하고 있습니까?음, 스타일 시트에서 몇백 줄의 코드를 지우고 불필요한 요소에 "수직 리듬"을 적용해야하는 번거 로움을 피할 수 있습니다.) 엘리스틱 마찬가지로, 남아있는 요소에 대해서는 을 수행합니다. 사실 필요에 따라 텍스트 편집기를 사용하여 줄 높이, 위쪽 및 아래쪽 여백, 여백, 글꼴 크기 등의 값을 찾아서 테스트 해보십시오. CSS 프레임 워크로서 부트 스트랩이 어떻게 배치되어 있는지는 분명합니다. 관련 요소는 잘 정렬되고 스타일 시트의 코드 내에서 함께 그룹화됩니다. 기본 CSS 파일을 완성한 후에 수정 된 스타일 시트를 축소하여 기존의 확장 버전을 대체하거나 아니면 최적화하려는 경우 CloudFront에서 제공하는 것일 수 있습니다.

Answer 3

Square Grid CSS 프레임 워크를 보았습니까? 35 동일한 폭 열을 기반으로

http://thesquaregrid.com/

디자이너와 개발자를위한 간단한 CSS 프레임 워크

. 그것은 개발 시간을 줄이고 아름다운 구조의 웹 사이트를 만드는 데 도움이됩니다.

Square Grid는 표준 수평 격자를 제공하지만 28px의 표준 "사각형"을 사용하여 수직 격자를 유지합니다. 실제로는 그리드 뿐이며 부트 스트랩과 같은 완전한 CSS 라이브러리가 아닙니다 (예 : 버튼, 메뉴 등 없음).

저는 하나의 프로젝트에 익숙했지만 꽤 직관적이었습니다. 특히 반응 형 디자인을 생각할 때 특히 수직 및 수평 그리드 모두를 추적하는 것이 너무 어려웠다 고 결정했습니다.

2 개를 결합하거나 최소한 간단한 CSS 인 사각형 격자 소스 코드를 살펴보고 필요에 맞게 부트 스트랩을 적용하는 방법에 대한 아이디어를 얻을 수 있습니다.

Answer 4

Compass CSS Authoring Framework에는 vertical rhythm 기반 인쇄체가 명시 적으로 지원됩니다. 처음에는이 짧은 video tutorial을 확인할 수 있습니다.