Quote:
|
Originally Posted by tattvajit
Is there an update on when the grid system may make its way into Atahualpa or ThemeFrame? In Atahualpa 4.0 perhaps? Flynn mentions here that he is working on a "completely new backend for Atahualpa 4.0". |
I am at it right now - to be released within Feb 2012 for both ThemeFrame and Atahualpa
Atahualpa 4 and ThemeFrame-created themes will be using the same layout techniques among other things. I am putting Atahualpa 4 things into ThemeFrame and vice versa
I examined existing techniques such as Twitter Bootstrap, Zurb Foundation, Skeleton, 960.gs and a couple others very closely and made my own tests with floated DIV's, equal height columns, source ordering, auto resizing of images and videos and responsiveness. I wasn't fully satisfied with any of those even though I wanted to leverage an existing one "as is" so I wouldn't have to document the technique.
The aforementioned were still helpful for testing.
The new layout for both Atahualpa 4 and ThemeFrame will have:
-
Floated DIV's only - no tables, not even display:table-cell. This includes dropping IE6 support for the most part, at least where it differs from IE7
-
Source ordering, including vertically (Content even before header)
-
Responsiveness, at least in stages (layout "jumps" into 3-4 different widths) as done in Skeleton, perhaps fully fluid as in Foundation. The Skeleton approach allows for pixel perfect styling across browsers but isn't fluid and has no source ordering built in. The Foundation approach is both responsive and fluid but this requires %-width for columns which causes slight differences (1-pixel gap) across browsers due to different rounding of %-values between i.e. Webkit, Firefox and IE.
-
Optionally border-box box model instead of the awkward, apparently print-oriented W3C box model. "box-sizing:border-box" makes column width calculation much more intuitive and removes the need for all those "inner DIV's for border and padding" - making the source code cleaner, easier to maintain and probably better for SEO, too. Unfortunately both the existing (.htc, IE8.js...) as well as my own JS attempts cannot remove a visible re-arrangement of the layout at page load, for 0.5-1 seconds, in IE7.
On a good note, once IE7 can be ignored (I plan to make it an option to ignore it right now) things are looking quite good in terms of floated DIV layouts.
Except for equal height columns. The hack I am going to apply won't let you have a padding-bottom on the column's parent, the "row". This could be simulated with a border though. or you just don't use equal height columns. None of the above mentioned CSS layouts has that feature.
Code:
/* Equal height columns with floated DIV's
Note: This requires JS fix, i.e. "IE8.js" for "first-child" support in IE7.
Alternatively give first column an individual class such as "first-col" and use
.first-col { margin-left: 0 } */
.row {
position: relative;
width: 960px;
margin: 0 auto; /* centered */
}
.col {
float: left;
position: relative;
margin-left: 20px; /* Use margin-left. IE8 know first-child but not last-child */
}
.col:first-child {
margin-left: 0;
}
.ehc {
position: relative; /* for IE6/7 */
overflow: hidden;
}
.ehc .col {
padding-bottom: 10000px;
margin-bottom: -10000px;
}
.col1,
.col3 {
width: 200px;
}
.col2 {
width: 520px; /* 960 - (2 x 200) - (2 x 20) = 520 */
}
HTML:
<div class="row ehc">
<div class="col col1">...col 1 ...</div>
<div class="col col2">...col 2 ...</div>
<div class="col col3">...col 3 ...</div>
</div>