grid_16_columns

Hallo liebe Contao Experten,

ich bin Contao Neuling und bin gerade dabei, mich einzuarbeiten. Habe auch schon den dicken Schinken von PM durchgekaut bzw. zT durchgearbeitet.

Da ich bisher mit einem prozentualen Grid gearbeitet habe, möchte ich auch bei Contao nicht darauf verzichten. Beim Googlen habe ich das gefunden und installiert:
http://contaogrid.glen-langer.de/home.html

Ich benötige ja ein Modul, welchen mir einen Quelltext in dieser Art produziert, denn ich muss ja mitteilen können, in welchem Viewportbereich ein Element wie breit sein soll:

HTML-Code:

---

<div class="row">
<div class="small-12 medium-6 large-3 columns">
Content
</div>
</div>

---

Wie kann ich das Modul "grid_16_columns" einbinden? Es erscheint nicht in der Auflistung der Module. Ich habe nur bei den Artikeln ein Feld entdeckt, wo ich eine Klasse reinschreiben kann. Ich kann das aber nicht den einzelnen Viewportbereichen zuordnen.

Klar, über das Modul "eigener Quelltext" kann ich mir solchen Quelltext selber schreiben, aber das kann ich ja dem zukünftigen Autor nicht zumuten ;-)

Dann hätte ich bitte noch eine zweite Frage: Wo im Backend kann ich die css Dateien editieren? Ich habe nur gefunden, wie man mit dem internen Editor neues css erstellen kann, aber nach den bestehenden habe ich mich totgesucht....

Man soll ja nicht über FTP gehen (das ist für mich schon mal stark gewöhnungsbedürftig), aber ich habe schon verstanden, dass sonst die Änderungen nicht in der DB landen.

Also: Ich würde gerne das Grid an meine Bedürfnisse anpassen und somit das CSS editieren.

So, ich denke das reicht für den Anfang. Ich würde mich sehr freuen, wenn ihr mir helfen könntet. DANKE!

LG Bea

Hallo Bea,
einen Teil der Fragen hier schon mal in kürze:

Über die Dateiverwaltung kannst Du CSS auch intern von Contao editieren.

Allerdings gibt es KEINEN Grund der dagegen spricht CSS auch weiterhin per FTP hochzuladen.

Ich für meinen Teil arbeite ausschließlich mit externen CSS-Dateien, die ich derzeit bei jedem Speichern automatisch komprimiere und hochlade.

Externe CSS-DAteien landen nicht in der Datenbank.
Sofern man aber nicht den internen Editor oder die internen Variablen benutzen will ist dies auch garnicht nötig.

Wenn Du unbedingt ein zusätzliches div.row brauchst, wirst Du die Templates anfassen müssen.
Das Contao Grid ist so gedacht, dass man die Klasse in das Inhaltselement einträgt.

Wenn Du es dem unerfahrenen Redakteur erleichtern willst kannst Du eine der vielen Griderweiterungen wie zB "simplecolumns" oder "subcolumns" nutzen, auf fertige Erweiterungen für Bootstrap oder Foundation zurückgreifen oder die Erweiterung "_stylepicker4ward" nutzen, die ein Feld bereit stellt mit dem der Redakteur von Dir vorbereitete Klasse in das Feld [ CSS-Klasse ] einfügen kann.

Die Erweiterung "grid_16_columns" hat keine Module. Das sind nur CSS Dateien. Die Anwendung erfolgt dann analog dem original CSS Grid von Contao.
Ist auch auf der Webseite erläutert, das Konzept bei "Contao 3 Grid", Beispiele je nach Pixel oder Prozent bei den beiden vorletzten Links.

Nicht zu verwechseln mit dem neuem "CSS Grid Layout" System von CSS3

Vielen lieben Dank für eure Antworten!

Zitat:

---

Über die Dateiverwaltung kannst Du CSS auch intern von Contao editieren.

---

Mal als Beispiel: Im Standardlayout habe ich das systemseitige Framework "CSS-Reset" eingebunden. Wenn ich nun in die Dateiverwaltung wechsele, dann taucht diese css Datei dort nicht auf.

Zitat:

---

Wenn Du unbedingt ein zusätzliches div.row brauchst, wirst Du die Templates anfassen müssen.

---

Ich kenne es so, dass das Element "row" die clearende Funktion übernimmt. Ich habe eben mal nachgeschaut, das ContaoGrid ist auch float basiert, dann müsste es dort ja auch irgendein clearendes Element geben. Muss ja nicht "row" heissen, ich kann das ja in meinem externen css entsprechend anpassen.

(Leider kann ich das clear im Contao Grid grad mal nicht entdecken...)

Sonst Templates anfassen. Eine Kopie anlegen und dort dann das php editieren, habe ich das richtig verstanden?

Zitat:

---

Das Contao Grid ist so gedacht, dass man die Klasse in das Inhaltselement einträgt.

---

Ah, super, dort kann man auch mehrere Klassen eintragen! Ja fein, dann brauche ich ja nur mein übliches Grid einzubinden und dann dem Autor eine Übersicht mit den Klassen basteln, die er verwenden kann. Hey, das klingt ja gut.

Zitat:

---

Nicht zu verwechseln mit dem neuem "CSS Grid Layout" System von CSS3

---

Welches "neue" Grid meinst du? Gibt es etwa schon ein Flexbox Grid für Contao? Irgendwann muss man ja mal auf die alten IE pfeiffen und das Floaten hinter sich lassen :-)


Nochmals danke für die netten Antworten. Ich muss mich noch mehr einarbeiten. Ist erstmal eine große Umstellung, so viele Masken auszufüllen. Aber ich bin mir sicher, dass wir Freunde werden können, Contao und ich :-)

Wünsche allen noch ein schönes WE. LG Bea

Wenn Du Contaoeigene Files wie das Reset-CSS einbindest, bleiben die weiterhin dort wo Sie im Assets Ordner liegen.
Nur eigene Dateien kannst Du in der Dateiverwaltung bearbeiten.

Wenn Du das Reset-CSS editieren willst, kopier Dir den Inhalt und leg Dir ne eigene Datei mit dem Namen an und nutze diese.

Contao nutzt zum clearen die Klasse .block, die zB auch in jedem Artikel verwendet wird.

Die Klasse .block wird dann so vom Contao Framework vorformatiert:

Code:

---

.block {
  overflow: hidden;
}

---

Damit wird dann ebenfalls gecleart.

Ob eine Klasse zu clearen von floats nun .row, .clear oder .kaesekuchen heißt, ist von der Funktion her komplett egal.
Die Klasse .blau kann Text ja auch rot färben, wenn man es denn so in der CSS-Datei einträgt.
Über die Sinnhaftigkeit läßt sich natürlich streiten :-)

Ja, Du kannst das Template einfach kopieren und um beliebiges HTML erweitern.
Achte aber darauf, dass Du die PHP-Funktionalitäten dabei nicht versehentlich zerlegst.

Hallo Samuell,

natürlich hat der Name einer Klasse keine Auswirkung auf die Funktion. Ich wollte erfragen, welche der Klassen zum Clearen benutzt wird und das ist mir leider immer noch nicht richtig klar geworden: Wenn ich ein float beenden will, dann benutze ich die css Anweisung clear: both; und nicht overflow: hidden;

Nehmen wir mal folgendes Beispiel:

Ich möchte zwei Elemente nebeneinander haben, die beide 4 Spalten breit sind. Ich füge also zwei Module "Text" ein und weise diesem die Klasse grid4 zu. Klappt bis dahin super.
Als nächstes möchte ich wieder ein Element einfügen, welches 4 Spalten breit ist. Dieses soll nun aber nicht NEBEN die beiden anderen Elemente eingefügt werden sondern DARUNTER.

In dem Grid, welches ich bisher benutzt hatte, machte ich dann einfach das Element .row zu (welchem ein clear zugewiesen ist). Dann machte ich eine neue div mit der Klasse .row auf und konnte die nächsten Elemente dann darunter anordnen.

Ausser dem clear fehlt mir in diesen Grid auch noch die Offset-Klassen, mit dem man Einrückungen vornehmen kann.

Zitat:

---

Achte aber darauf, dass Du die PHP-Funktionalitäten dabei nicht versehentlich zerlegst.

---

Grins, ja das sollte man nicht tun...

So, dann heute einen schönen Sonntag. LG Bea

Contao nutzt dieses zum Thema Clear Floats (aus der layout.css)

Code:

---

/**
 * Clear floats
 */
.block {
        overflow:hidden;
}
.clear,#clear {
        height:0.1px;
        font-size:0.1px;
        line-height:0.1px;
        clear:both;
}

---

Welches Grid nutzt du nun? Denn zu deiner Offset Frage, sowohl das Contao Grid (Pixel) als auch meine 16er (Pixel/Prozent) haben Offset Klassen.

Guten Abend BugBuster,

das css macht Sinn, aber welches Modul muss ich einfügen, damit ein Element mit der Klasse clear von Contao generiert wird?

Du fragst, welches Grid ich bisher genutzt habe. Ich kopier dir das mal rein, davor ein Beispiel wie das html dazu aussieht:

HTML-Code:

---

<div class="row">
<div class="xs-4 small-12 medium-6 large-3 columns">
<p>Content</p>
</div>
</div>

---

Code:

---

* {
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
}

.columns {
  padding-left: 16px;
  padding-right: 16px;
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
  width: 100%;
  float: left; }
}

.push {
        float:right;
}

.row {
        width:auto;
}

.row:before,
.row:after {
        content:'';
        display:table;
}

.row:after {
        clear:both;
}

.row .row {
        margin-left:-1em;
        margin-right:-1em;
}

/*XS*/

@media screen and (max-width:499px) {

        .xs-1 {
        width: 25%;}

        .xs-2 {
        width: 50%;}

        .xs-3 {
        width: 75%;}

        .xs-4 {
        width: 100%;}

        .xs-offset-1 {
        margin-left: 25% !important; }
               
        .xs-offset-2 {
        margin-left: 50% !important; }
       
        .xs-offset-3 {
        margin-left: 75% !important; }
}

       
/* Small */

@media screen and (min-width:500px) and (max-width:799px) {
       
  .small-1 {
    width: 8.33333%; }

  .small-2 {
    width: 16.66667%; }

  .small-3 {
    width: 25%; }

  .small-4 {
    width: 33.33333%; }

  .small-5 {
    width: 41.66667%; }

  .small-6 {
    width: 50%; }

  .small-7 {
    width: 58.33333%; }

  .small-8 {
    width: 66.66667%; }

  .small-9 {
    width: 75%; }

  .small-10 {
    width: 83.33333%; }

  .small-11 {
    width: 91.66667%; }

  .small-12 {
    width: 100%; }

  .small-offset-0 {
    margin-left: 0% !important; }

  .small-offset-1 {
    margin-left: 8.33333% !important; }

  .small-offset-2 {
    margin-left: 16.66667% !important; }

  .small-offset-3 {
    margin-left: 25% !important; }

  .small-offset-4 {
    margin-left: 33.33333% !important; }

  .small-offset-5 {
    margin-left: 41.66667% !important; }

  .small-offset-6 {
    margin-left: 50% !important; }

  .small-offset-7 {
    margin-left: 58.33333% !important; }

  .small-offset-8 {
    margin-left: 66.66667% !important; }

  .small-offset-9 {
    margin-left: 75% !important; }

  .small-offset-10 {
    margin-left: 83.33333% !important; }

  .small-offset-11 {
    margin-left: 91.66667% !important; }
       
}

/* Medium */

@media screen and (min-width:800px) and (max-width:1299px) {
       
  .medium-1 {
    width: 8.33333%; }

  .medium-2 {
    width: 16.66667%; }

  .medium-3 {
    width: 25%; }

  .medium-4 {
    width: 33.33333%; }

  .medium-5 {
    width: 41.66667%; }

  .medium-6 {
    width: 50%; }

  .medium-7 {
    width: 58.33333%; }

  .medium-8 {
    width: 66.66667%; }

  .medium-9 {
    width: 75%; }

  .medium-10 {
    width: 83.33333%; }

  .medium-11 {
    width: 91.66667%; }

  .medium-12 {
    width: 100%; }

  .medium-offset-0 {
    margin-left: 0% !important; }

  .medium-offset-1 {
    margin-left: 8.33333% !important; }

  .medium-offset-2 {
    margin-left: 16.66667% !important; }

  .medium-offset-3 {
    margin-left: 25% !important; }

  .medium-offset-4 {
    margin-left: 33.33333% !important; }

  .medium-offset-5 {
    margin-left: 41.66667% !important; }

  .medium-offset-6 {
    margin-left: 50% !important; }

  .medium-offset-7 {
    margin-left: 58.33333% !important; }

  .medium-offset-8 {
    margin-left: 66.66667% !important; }

  .medium-offset-9 {
    margin-left: 75% !important; }

  .medium-offset-10 {
    margin-left: 83.33333% !important; }

  .medium-offset-11 {
    margin-left: 91.66667% !important; }
       
}

/* Large */

@media screen and (min-width:1300px) {
       
  .large-1 {
    width: 8.33333%; }

  .large-2 {
    width: 16.66667%; }

  .large-3 {
    width: 25%; }

  .large-4 {
    width: 33.33333%; }

  .large-5 {
    width: 41.66667%; }

  .large-6 {
    width: 50%; }

  .large-7 {
    width: 58.33333%; }

  .large-8 {
    width: 66.66667%; }

  .large-9 {
    width: 75%; }

  .large-10 {
    width: 83.33333%; }

  .large-11 {
    width: 91.66667%; }

  .large-12 {
    width: 100%; }
       
  .large-offset-0 {
    margin-left: 0% !important; }

  .large-offset-1 {
    margin-left: 8.33333% !important; }

  .large-offset-2 {
    margin-left: 16.66667% !important; }

  .large-offset-3 {
    margin-left: 25% !important; }

  .large-offset-4 {
    margin-left: 33.33333% !important; }

  .large-offset-5 {
    margin-left: 41.66667% !important; }

  .large-offset-6 {
    margin-left: 50% !important; }

  .large-offset-7 {
    margin-left: 58.33333% !important; }

  .large-offset-8 {
    margin-left: 66.66667% !important; }

  .large-offset-9 {
    margin-left: 75% !important; }

  .large-offset-10 {
    margin-left: 83.33333% !important; }

  .large-offset-11 {
    margin-left: 91.66667% !important; }
       
}

---

Zitat:

---

Zitat von BeaB

das css macht Sinn, aber welches Modul muss ich einfügen, damit ein Element mit der Klasse clear von Contao generiert wird?

---

In deiner eigenen CSS Datei, falls du nicht den Layout Builder nutzt (also Contao header,main,footer,left,right definieren lässt), legst du diese Definition an.
Und wenn du nun 2 Artikel-Elemente als Beispiel im Grid nebeneinander packst, dann legst du ein weiteres Element an vom Typ HTML mit dem Inhalt

Code:

---

<span class="clear"></span>

---

Das kann man natürlich auch als Modul definieren und das dann einbinden (nicht getestet, aber sollte gehen)

Zitat:

---

Zitat von BeaB

Du fragst, welches Grid ich bisher genutzt habe. Ich kopier dir das mal rein, davor ein Beispiel wie das html dazu aussieht:

---

Ach herje, so eines kam mir vor kurzem schon mal vor's Gesicht. Ich frage mich dabei immer was diese krummen 5 stellen nach dem Komma sollen.
Vor allem wenn 2 x grid5 + grid2 = 100,00001 % ergeben. Bleibt zu hoffen die Browser runden ab.

Hallo BugBuster,

das ist mir schon klar, wie ich das selber im css definiere und wie ich mit dem Modul "eigener html code" den gewünschten Quelltext ausgegeben bekomme.

Es geht nur darum, wie die Laien damit umgehen sollen, die später den Content bearbeiten werden. Für das Grid kann ich ja selber eine Übersicht basteln. Wollte nur erfragen, ob das System bereits ein Modul im Angebot hat, mit dem man ein Element einfügen kann, dem vom Hause aus bereits ein clear zugewiesen ist.

Zitat:

---

Ich frage mich dabei immer was diese krummen 5 stellen nach dem Komma sollen.

---

Bei einem 12 spaltigen Grid muss man die Gesamtbreite von 100% durch 12 teilen, um die Breite einer Spalte zu erhalten.
100 geteilt durch 12 ist nun mal 8.33333333333%.....

Hmm, vielleicht sollte ich das für 16 Spalten umschreiben, da kommen bequeme 6.25 heraus :-)

Du schriebst weiter oben, du stellst selber ein prozentuales Grid für Contao geschrieben. Hast du mal einen Link für diese Erweiterung? Ich muss ja das Rad nicht neu erfinden ;-)

Zitat:

---

Vor allem wenn 2 x grid5 + grid2 = 100,00001 % ergeben. Bleibt zu hoffen die Browser runden ab.

---

Grins, du hast total Recht. Ich probier diese Konstellation nachher mal aus und berichte. Muss jetzt aber erst mal zum Termin.

LG und nochmals danke für deine Mühe. Bea

Grids haben normalerweise Abstände zu nächsten Spalte. Wenn man die mit einbezieht bei der Definition der Grid Spalten kommt man normalerweise auf glatte Werte, auch bei einem 12er.
Contao zu ganz alten Zeiten hatte auch mal ein Prozent Grid. Mal sehen ob ich das noch finde.
Aja, sehe grad, das alte Contao Prozent Grid hatte nur 10 Spalten, mit links und rechts je 1% margin. Damit kam man auf Grid Prozente sogar ohne Komma Werte.

Die Grids von Contao, und auch mein (grid_16_columns) beziehen sich auf die von Contao generiertem Klassen der Artikel und Elemente, die werden für die Definition mit benutzt. So spart man sich zusätzliche class="row" Zeilen oder sowas. Das erkennt man gut an den Definitionen.

Die Größe der Abstände würde ich im Grid nicht berücksichtigen. Sonst müsste ich das ganze Grid neu rechen, wenn ich die Abstände anpasse oder einzelnen Elementen mal andere Abstände zuweise.

Das erfolgt durch diese Anweisung:

HTML-Code:

---

* {
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
}

---

Wird zB hier erlärt
http://www.drweb.de/magazin/css3-das...der-box-39078/

Zitat:

---

Mit der border-box ist es völlig egal, wie viel padding oder border ein Element bekommt, denn diese Werte werden von der Breite abgezogen und nicht hinzugefügt.

---

Gut, das ist ne andere Herangehensweise. Wenn ich zusätzlichen Abstand brauche, dann gebe ich noch ein padding dazu an passender Stelle.

Alles klar.

Um das Thema mal abzuschliessen: Es gibt kein fertiges Contao Grid (welches auf border-box beruht), daher werde ich das als externes css einbinden und wie dann gewohnt damit arbeiten können.
Das clearende Element werde ich mit eigenem html Code einbinden müssen.

Fazit: Ich selber kann so arbeiten, die Autoren aber nicht.

Lösung: Das grundsätzliche Layout werde ich mit "meinem" Grid aufbauen und im Inhaltsbereich kann dann der Autor mit dem Contao Grid arbeiten.

Ich bin schon gespannt auf das erste Projekt und danke euch nochmals für eure Geduld und die vielen Antworten :-)

LG Bea

Nachtrag:

Die Erweiterung "DMA Simple Grid" hat mein Problem inzwischen gelöst. Nun können auch Redakteure mit dem Grid System arbeiten. Wunderbar!

https://github.com/DMAGmbH/dma_simple_grid