960-Pixel-Grid in TYPOlight

**edian** · 07.07.2009, 22:20

Hallo zusammen,

hat jemand schon Erfahrungen mit dem 960-Pixel-Grid in TYPOlight?
Ich habe schon einige Tutorials durchgelesen aber keinen blassen Schimmer wie das Framework in TYPOlight einzubinden ist

Den Foliensatz von Leo unter: http://de.contaowiki.org/FrankfurtCss habe ich schon durchgelesen.

Für einen Lösungsansatz bin ich sehr dankbar.

Grüße, edian

**martin.mildner** · 08.07.2009, 07:24

Hallo Edian,

Erstell dir am besten ein Stylesheet mit den paar Definitionen aus den Folien.
Anschließend musst du es in deinem Seitenlayout einbinden.

Die breite der Seite musst du auf 960px stellen. Den einzelnen Elementen kannst du jetzt die gewünschten Klassen (z.b. "g4").

mehr ist es nicht...

lg mmm

kleiner tipp: du kannst dir hier (http://gridder.andreehansson.se/) einen 960 gridder in deinen favoriten abspeichern. es wird dann per javascript das grid auf jeder beliebigen seite angezeigt!

**edian** · 08.07.2009, 10:02

Hallo Martin,

vielen Dank für die schnelle Antwort. Das werde ich probieren.
Sind Änderungen im Template (fe_page.tpl) erforderlich?
Ich wusste ja, dass ich mich auf euch Profis verlassen kann

Gruß, edian

**joerg-t** · 08.07.2009, 10:12

Hallo Edian,

Nein Änderungen am Template sind nicht erforderlich.

Gruß Jörg

**edian** · 08.07.2009, 12:01

Vielen Dank Jörg!

**Bobi** · 31.07.2009, 10:31

Da ich mich auch gerade ein wenig mit diesem Thema beschäftige - ich habe hier eine Seite gefunden. welche ich sehr interessant finde:
http://designinfluences.com/fluid960gs/16/fixed/
Hier wurde auch mit Mootools etc. gearbeitet!
Denke ich ist einen Blick wert, was möglich ist

**wiese** · 02.08.2009, 16:48

Zitat von Bobi

Da ich mich auch gerade ein wenig mit diesem Thema beschäftige - ich habe hier eine Seite gefunden. welche ich sehr interessant finde:
http://designinfluences.com/fluid960gs/16/fixed/
Hier wurde auch mit Mootools etc. gearbeitet!
Denke ich ist einen Blick wert, was möglich ist

Gute Sache, aber wie binde ich z.B "MOOTOOLS FX.ELEMENTS" in TL ein? Finde es sehr gut und passt genau in mein Projekt.

**Toflar** · 02.08.2009, 17:01

Hi wiese

Also mootools ist ja schon standardmässig bei TL dabei.

Alles was du brauchst, ist deinen eigenen Javascript-Code, den du z.B. beim Seitenlayout unter "zusätzliche <head>-Tags" (oder so ähnlich) erfassen kannst.

mootools ist auf http://www.mootools.net relativ gut dokumentiert.

**wiese** · 02.08.2009, 17:15

Zitat von Toflar

Hi wiese

Also mootools ist ja schon standardmässig bei TL dabei.

Alles was du brauchst, ist deinen eigenen Javascript-Code, den du z.B. beim Seitenlayout unter "zusätzliche <head>-Tags" (oder so ähnlich) erfassen kannst.

mootools ist auf http://www.mootools.net relativ gut dokumentiert.

Ah, okay. Ich wusste das mootools bei TL dabei ist, jedoch weiß ich nicht, wie man es anspricht. (speziell fürs das 4er Seitenslide) - ich werde mal etwas probieren.

*/EDIT

Wie kann ich eigentlich eigene Javaskripte einbinden? CSS ist mir klar, aber für java habe ich so etwas noch nicht finden können. Ich habe den Quelltext, den ich für den 4er Slide benötige einfach rauskopiert und zu den Mootools eingefügt. Größen angepasst und es klappt soweit sehr gut.

Ein "Extension" gibt es für so etwas nicht oder? Also, ich habe es nun über Modul => eigenen HTML-Quellcode eingebunden, anschließend dorthin geschoben, wo ich es benötige.

*/EDIT 2 - alles geschafft ;-)

**skraddy** · 04.12.2009, 17:34

Hi
Ich habe ich paar Fragen zum Grid:

Bin ich richtig in der Annahme, dass, wenn ich das TL 960er Grid verwende, ich im Seintenlayout nach Möglichkeit nur die Hauptspalte verwende?
Falls nein, bin ich dann richtig in der Annahme dass die Breite der linken und rechten Spalte einer Breite des Grid entsprechen muss?
Wieso benötige ich für Artikel im Grid kein clearing aber für Inhaltselemente?
Muss ich alle Module als Inhaltselement einbinden?

Viele Fragen, da ich keine Zeit zum Probieren habe und ich mir ehrlich gesagt, ein kleines Tutorial wünschen würde. Vielleicht lassen sich die notwendigsten Infos für all in diesem Thread zusammenfassen.

skraddy

**mtpl** · 07.04.2010, 09:30

Es wurde hier geschrieben, dass keine Anpassungen am Template (fe_page) notwendig sind.
Wie bringe ich aber die Klassen in das Template ohne es zu bearbeiten ?
z.B. für Header, Left, Main und Footer
Hoffen wir mal es gibt keine allzu banale Erklärung dafür, sonst habe ich mich geade blamiert

**planepix** · 07.04.2010, 10:54

Hallo mtpl,

um die Grid-CSS zu benutzen, musst Du nicht die Seitenvorlage bearbeiten.

Du fügst die Grid-CSS-Datei im Seitenlayout hinzu.
Dann kannst Du für Inhaltselemente die Grid-Klassen verwenden.

Alles andere "regelst" Du dann durch eine zusätzliche CSS-Datei, in der Du dann Farben etc. festlegen kannst.

**mtpl** · 07.04.2010, 15:42

Hallo planepix

Und wie weise ich z.B Header, Left, Main & Footer die Klassen zu ?
Im Typolight Backend kann ich ja nur in der Seitenstruktur und in den Artikeln Klassen zuweisen.

**Wichteldesign** · 07.04.2010, 17:02

Ich setzte die Layoutbereiche immer so, dass sie auf die Abmessung des Grids passen. Dann kann ich innerhalb der einzelnen Bereiche wieder mit dem Grid arbeiten. Sind dann halt z.B im Hauptbereich 8 Spalten die ich beispielsweise mit 2 4-spaltigen Container füllen kann.

Bin ich da falsch oder machen das Andere auch so?

EDIT:

Im TYPOlight Video2Brain wird das Thema glaube ich auch behandelt.

**mtpl** · 07.04.2010, 17:14

Hallo Wichteldesign

dann definierts du Header, Left, Main und Footer über das Seitenlayout und dann arbeitest du innerhalbe z.B. von Main mit dem 960 Grid System ?

Ich verstehe einfach nicht wie das ohne Anpassung des Templates gehen soll, ich muss doch
z.B. dem Container die Klasse "container_12" und dann Left die Klasse "grid_3" zuweisen usw.

**planepix** · 07.04.2010, 17:40

Hallo mtpl,

die Grid-Klassen fügst Du den Inhaltselemente innerhalb eines Artikel zu.

z.B.:
3 Inhaltselemente Text.
Damit diese dann in 3 Spalten angezeigt werden, fügst Du jedem Inhaltselement eine Grid-Klasse zu.

Bei einer Breite der Hauptspalte von 960 Pixel wäre das die Grid-Klasse "g4" (Breite 4 Spalten x 3 = 12 Spalten).

Wenn Dein Seitenlayout als linker und Hauptspalte besteht, dann wähle für die linke Spalte eine Breite von 3 Spalten (g3; Breite ist dann 240 Pixel) und für die Hauptspalte ergibt sich dann eine Breite von 9 Spalten (Breite ist dann 720 Pixel).

Ansonsten kannst Du auch die Beispielseite meines Buches "untersuchen":
-> TYPOgrid

**mtpl** · 07.04.2010, 18:07

Hallo planepix

aufgrund der Beispielseite ist nun alles klar es werden einfach nur die Inhaltselemente mit dem Grid System definiert.

Danke.

**tinoo** · 06.05.2010, 16:27

Hallo

Also mir ist der Ablauf noch immer nicht klar...

Zitat von planepix

Damit diese dann in 3 Spalten angezeigt werden, fügst Du jedem Inhaltselement eine Grid-Klasse zu.

Was heisst "fügst Du jedem Inhaltselement eine Grid-Klasse zu"? Muss ich immer, wenn ich einen neuen Artikel erstelle, in den Einstellungen die notwendige Klasse eintragen? Oder hast du das irgendwie "automatisiert"?

Jedenfalls scheint mir - wenns wirklich so ist, wie du schreibst - dass die Grid-Variante nicht unbedingt praxis-tauglich ist, wenn mehrere Personen die Website mit Artikel bedienen... Als alleiniger Betrieber, Webmaster und Redakteur schauts vielleicht anders aus.

**planepix** · 06.05.2010, 16:33

Hallo Martin,

als Beispiel:

3 Inhaltselemente Text, die in 3 gleich breiten Spalten angezeigt werden sollen.

Dann trägst Du bei CSS-Klasse die Gridklasse g4 ein:

3 x g4 (Breite von 4 Spalten) = 12 Spalten

2. Beispiel:
3 Inhaltselemente Text, die in 2 Spalten mit einer Eiiinzelbreite von 3 Spalten und einer Spalte von 6 Spalten angezeigt werden sollen.

Dann trägst Du bei CSS-Klasse die Gridklasse g3 für die ersten beiden Texte ein:

2 x g3 (Breite von 3 Spalten) = 6 Spalten
und
1 x g6 (Breite von 6 Spalten) = 6 Spalten
= zusammen 12 Spalten

Zugegeben ist das im Moment so mit der Vergabe der Gridklassen eher etwas für den Webmaster

Alternativ ein Blatt mit der Funktion der Gridklassen, dann kann man gucken.
Was ich noch versuchen werde, ist das Anlegen von Inhaltselementen vom Typ HTML-Code vor und nach den Inhaltselementen, so dass den einzelnen Inhaltselementen dazwischen keine Gridklasse zugewiesen werden muss.

**Bobi** · 06.05.2010, 16:58

Zitat von tinoo

Hallo
Jedenfalls scheint mir - wenns wirklich so ist, wie du schreibst - dass die Grid-Variante nicht unbedingt praxis-tauglich ist, wenn mehrere Personen die Website mit Artikel bedienen... Als alleiniger Betrieber, Webmaster und Redakteur schauts vielleicht anders aus.

So ist es - bis zu der Erkenntnis das es wirklich nicht einfach geht habe ich nen ganzen Tag gebraucht

Das Problem ist schon, gibt ein Redakteur dem Element die falsche Klasse, ist das Layout zerschossen und es ist wirklich extrem lästig, jedem Artikel immer die Klasse mit zu geben.

Deshalb ist das Grid bei mir auch erstmal "gestorben"

**tinoo** · 07.05.2010, 06:38

Zitat von Bobi

Deshalb ist das Grid bei mir auch erstmal "gestorben"

Naja, für mich im Moment irgendwie auch...

Ich mein die Platzierung von Inhaltselementen ist genial! Wie auf planepix's Demoseite sehr schön dargestellt wird, wie man Inhalte zweispaltig darstellen und darunter einspaltig fortfahren kann. Echt toll!!!

Nur wenn das Grid "massentauchglich" werden soll, wird man nicht drum herum kommen, Bereiche namentlich definieren zu können und dem Redakteur zur Auswahl zur Verfügung zu stellen. In dem Sinne ähnlich wie es jetzt schon läuft, wo man weiss dass man seinen Inhalt in der Spalte "main" oder "right" platzieren kann. Bezogen auf planepix's Demoseite wären das dann Bereiche wie z.B. "Spalte gross links", "Halbe Spate rechts Teil 1", "Halbe Spalte rechts Teil 2" und "Spalte rechts". Den Bezeichnungen wären dann die jeweiligen Klassen hinterlegt.

Das würde aber bedingen, dass die Inhaltselemente entsprechend angepasst werden und diese Möglichkeit der Auswahl bei Verwendung eines Grid's anbieten. Bis dahin wird man sich wohl mit g und xy begnügen müssen