960 grid system

Hi ,

I saw thye presentation 'The Typolight CSS framework'. I want to use the 960 grid system inside typolight.
DO I understand this correct: you add a class like for example 'g9' to an CE and 'g3' to an other CE. But how do you add the div-container with the class clear?

Rgds,
Frederick

Quote:

---

Originally Posted by freeyland

I saw thye presentation 'The Typolight CSS framework'. I want to use the 960 grid system inside typolight.
DO I understand this correct: you add a class like for example 'g9' to an CE and 'g3' to an other CE. But how do you add the div-container with the class clear?

---

I made site based on 960 grid but I did't use any additionals classes for any CE elements. And it's wotks fine.
Just into template find div for main section and for e.g. right sidebar and put there in rights divs:

Code:

---

<?php echo $this->main; ?>

---

and

Code:

---

<?php echo $this->right; ?>

---

and when your content appear on your page probably you will have to little adjust your css files and that's all, I think.

Thx for the reply.

Isn't the point of the 960 grid system that you can have different columns with text.
How did you put you content elements (eg text element) into different columns?

Rgds,
Frederick

Quote:

---

Originally Posted by freeyland

How did you put you content elements (eg text element) into different columns?

---

Exactly like I write in my first post. It's mean if you have three column you can use these:

Code:

---

<?php echo $this->left; ?>
<?php echo $this->main; ?>
<?php echo $this->right; ?>

---

and next when you create article you have to choose where (to which colunm) this atricle should be assign. If you have more then three column you can create additional "Custom layout sections" in main Settings and then:

Code:

---

<?php if ($this->sections['mysection']): ?>
<?php echo $this->sections['mysection']; ?>
<?php endif; ?>

---

or you can put CE or module directly into template via inserttags like {{insert_article::*}}, {{insert_content::*}}, {{insert_module::*}} (replace * with the article/content/module ID).
That's all.

p.s. if you still don't know how to do it, send me static template and describe what you need and I'll try to help you.

Quote:

---

Originally Posted by freeyland

I saw thye presentation 'The Typolight CSS framework'. I want to use the 960 grid system inside typolight.
DO I understand this correct: you add a class like for example 'g9' to an CE and 'g3' to an other CE. But how do you add the div-container with the class clear?

---

I think you understand this correct. To insert the class clear, just add a custom html module with the code:

Code:

---

<div class="clear"></div>

---

What qrczak says, is just a way do implement the 960 grid system directly into the template file. And that will also work. But typolight.org uses the grid system by adding the classnames into the Content Elements, just as you described in the first post.

Thx!!!!

Quote:

---

and next when you create article you have to choose where (to which colunm) this atricle should be assign.

---

How exactly is this done? Do I need to assign a column to each article I create?
I have added the basic.css and gridpx.css stylesheets, but after that I do not know what to do.

Maybe I am confused by my interpretation: what I understand is that grid positioning is for selecting a column for a Module, not for content. A Module renders content (like an article), so it is the Module that needs to be assigned to a column. The Module is assigned a "vertical position" in the Page layout (under Included Modules), and it is also assigned a column position. But I can only assign Modules to column "Header", "Main column" and "Footer", there is no other columns!

This is my mental image of how it works, but it is certainly wrong. Please help me understand it correctly!

You can apply the cols with the classes g1,g2,g3,....
You can apply those classes to content elements, modules, articles
The grid system is pure CSS
If you want your content element to take 3 columns, you assign the class g3. If you then assign the next content element g4, your CE will take 4 colums just beside previous CE. This will happen with each CE untill you reach 12 cols. If you reach more than 12 cols, the rest of the cols will be displayed on the next row.
If you want to have for example 4 cols CE+3 cols CE, you will need to assign the class clear to the 3rd CE:


Hope this is a little bit clear.

Rgds,
F

Thank you very much. Now I understand. I am now able to position modules on a page by adding g1,g2,... class names to modules.

I still think positioning should be done entirely in Page Layout, but since it is currently implemented in the Modules (and other content elements), and since it works the way it is... I can't really complain.