4
Drupal, Omega 4 테마를 사용하여 반응 형 디자인 기법에 착수하기 시작했으며 특이점 그리드 시스템을 사용하고 싶습니다. CSS (기본 원리 예, 미묘함)를 잘 모릅니다. 그리고 SASS는 좀 더 비밀스러운 기능을 빠져 나오기위한 좋은 방법으로 보입니다. jQuery와 같은 점은 Javscript를 피하는 데 도움이됩니다. 저는 처음부터 초보자 였기 때문에 가능한 한 단순한 페이지로 시작한다고 생각했습니다. 그래서, 여기에 HTML입니다 :특이점 gs를 사용하여 div가 격자로 나란히 표시되도록하려고 시도합니다.
<html>
<head>
<title>Singularity HTML Demo</title>
<link rel="stylesheet" href="stylesheets/test-grid_1.css">
</head>
<body>
<div id="page">
<h1>Page tests_1</h1>
<div id="foo">
<h2>Foo</h2>
<p><p>Aliquam nulla metus, laoreet non felis ut, commodo laoreet nulla. </p></p>
</div>
<div id="bar">
<h2>Bar</h2>
<p>Morbi volutpat justo ante, et laoreet est porttitor id. Nullam rhoncus ipsum leo, sed tincidunt ante consequat in.</p>
<p>Quisque porttitor tincidunt hendrerit. Nulla et urna nisi. Fusce vulputate aliquet posuere. Cras tempor ante vel turpis scelerisque mollis. In bibendum augue in tincidunt vulputate. Donec accumsan sapien et molestie sodales. Maecenas ut arcu et arcu congue rhoncus. Suspendisse potenti. Nulla vehicula est ut ante semper lobortis. Maecenas sit amet porta mi, nec mattis dui. Curabitur tempus, magna a volutpat auctor, tellus diam pretium sapien, a accumsan augue lectus et est. Quisque sollicitudin metus tincidunt massa fermentum; non varius libero bibendum.</p>
</div>
<div id="baz">
<h2>Baz</h2>
<div>
<p>Baz</p>
<p>Vestibulum quis tristique arcu. Cras nec est aliquet, vehicula dolor sed, fermentum eros. Maecenas et commodo diam. Aenean egestas nulla a dolor aliquet pellentesque. Nunc enim tellus, sagittis sit amet ipsum nec, bibendum dictum nisl. Nam sollicitudin quis orci sed consequat. Nam et imperdiet ipsum, aliquam cursus nulla. Morbi erat magna, rhoncus vel velit vel, sollicitudin imperdiet orci. Quisque posuere at leo in pellentesque. Vestibulum ornare nulla odio, id mollis lorem blandit eget. Donec est sem, adipiscing eu ligula at, blandit lobortis magna. Nam tempus, risus vitae lacinia consectetur, leo orci fringilla arcu, facilisis blandit metus leo eget eros. Donec pellentesque est eget nulla ultricies, nec placerat risus sagittis. Nulla elementum metus nisi, eget sagittis risus commodo vitae. Pellentesque imperdiet porta vestibulum!</p>
</div>
</div>
<div id="qux"><p>Qux</p></div>
<div id="waldo"><p>Waldo</p></div>
<div id="garfield"><p>Garfield</p></div>
<div id="dilbert"><p>Dilbert</p></div>
</div>
</body>
</html>
난 그냥 하나의 열 다른 미만의 모든 div의 표시 오프 시작했다 말대꾸 스타일 시트를했고, 그 일 (어려운 일이 아니다!). 내 의미를 보여주기 위해 이미지를 게시하고 싶었지만 분명히 할 수 없다!
그런 다음 중단 점을 추가하고 새 코드를 수정하여 각 열이 왼쪽 및 오른쪽으로 번갈아 표시되는 2 열 그리드에 표시되도록했습니다. 여기 내 말대꾸 코드를 사용하여 특이점이다 중단 점에서 쫓겨
@import "singularitygs";
$include-border-box: true;
$break: 500px;
$break2: 800px;
$break3: 1200px;
$include-clearfix: true;
$grids: add-grid(1);
$grids: add-grid(2 at $break);
$grids: add-grid(2 8 2 1 at $break2);
$grids: add-grid(12 at $break3);
$gutters: add-gutter(1/6);
body {
margin: 0;
padding: 0;
@include background-grid;
}
#foo {
background-color: red;
color: yellow;
@include grid-span(1, 1);
@include breakpoint($break) {
@include grid-span(1, 1);
}
}
#bar {
background-color: green;
color: yellow;
@include grid-span(1, 1);
@include breakpoint($break) {
@include grid-span(1, 2);
}
}
#baz {
background-color: purple;
color: whitesmoke;
@include grid-span(1, 1);
@include breakpoint($break) {
@include grid-span(1, 1);
}
}
#qux {
background: yellow;
@include grid-span(1, 1);
@include breakpoint($break) {
@include grid-span(1, 2);
}
}
#waldo {
background: blue;
color: whitesmoke;
@include grid-span(1, 1);
@include breakpoint($break) {
@include grid-span(1, 1);
}
}
#garfield {
background: orange;
@include grid-span(1, 1);
@include breakpoint($break) {
@include grid-span(1, 2);
}
}
#dilbert {
background: cyan;
@include grid-span(1, 1);
@include breakpoint($break) {
@include grid-span(2, 1);
}
}
, 왈도 가필드와 Qux 모든 바로 화면 상단까지 이동했다 - 푸 완전히 보이지 않게했고 덮어. 나는 "맑은 : 양쪽/왼쪽/오른쪽"으로 주변을 둘러보고 내가 원하는 것에 접근하려고 노력했지만, 그것은 절망적으로 경험적이었고 나는 튼튼하지 않다는 것을 확신했다. 나는 분명히 뭔가를 놓쳐 버려야 만합니다. 누군가가 저에게 무엇을 말할 수 있다면 매우 감사 할 것입니다!
시간을내어 주셔서 감사합니다. 나는 "float"이 어떻게 작동 하는지를 이해하려고 반복적으로 시도했지만 그것을 반 직관적이라고 완전히 고백했다. 나는 단지 $ output : 'float';을 덧붙여서 같은 결과를 얻었습니다. 그러나 이것은 내가 원하는 것만은 아니다. Baz가 Foo에서 바로 시작하도록 정말 바뀌겠습니다. 마찬가지로 Garfield가 위로 올라가서 Qux에서 직접 시작됩니다. 그러나 이것도 가능합니까? –
귀하의 의견을 반영하여 답변을 업데이트했습니다. –
다시 업데이트하여 관련 특이성 문제에 대한 링크를 추가했습니다. Snugug의 답변을 참조하십시오. –