I'm just beginning to get into responsive design techniques using Drupal, Omega 4 theme, and would like to use the singularity grid system. I don't know CSS very well (the basic principles yes, the subtleties no), and SASS seemed a good way to go as a means of escaping some of the more arcane features (a bit like jQuery helps you avoid Javscript). Since I'm really a beginner I thought I would start with a dummy page as simple as possible. So, here is the HTML:
<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>
I did a sass stylesheet which started off just displaying all the divs in a single column one under the other, and that worked (not difficult!). I wanted to post an image to show my meaning, but apparently I can't!
Then, I tried adding a breakpoint and tried to modify the sass code so that it would display on a 2-column grid, each div being displayed alternately to the left and the right. Here is my sass code using singularity:
@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);
}
}
When the breakpoint kicked in, Waldo Garfield and Qux had all moved right up to the top of the display - Foo had become completely invisible and been overwritten. I managed, by fiddling around with the "clear: both / left / right" to get something approaching what I want, but it is hopelessly empirical and I'm quite sure not robust. I must certainly be missing something, but I would be very grateful if somebody could tell me what!
