Foundation von Zurb Framework – Erweiterungen und Templates

Zitat:

---

Zitat von Merlin

Was genau brauchst du ? Ich setzt diese Erweiterung selbst auf einer Contao 4 Installation ein. Wo genau hängt es bei dir ?

---

Hallo Merlin,

danke für die Nachfrage.
Eigentlich hakt es an allem. Leider erschließt sich mir die Erweiterung auch nach etlichem Rumprobieren nicht wirklich. Immer wenn ich glaube, ich habe etwas verstanden, dann klappte es doch nicht in Hinblick auf Response Design, und genau dafür habe ich sie installiert.

Ein paar Beispiele:

• Ich kann nirgends finden, wie groß ich die Website haben möchte. Ich hätte gerne eine Breite von 1280 px eingestellt, kann aber im Layout keine Maske mehr finden.
• Es hat sehr lange gedauert, bis ich herausbekommen habe, dass ich für die Hauptnavigation drei Module erstellen muss, die erweiterte Topbar Section Start, dann Topbar Section, dann Tipbar Section Stop. OffCanvas habe ich auch mit sehr viel Mühe hinbekommen, allerdings beide nicht nebeneinander, sondern nur untereinander...
• Ich würde gerne eine horizontale Navigation bei Large und größeren Screens haben, eine OffCanvas-Navigation bei Small und Medium Screens. Mit dem Klassen Visible und Hidden, wie bei Zurb Foundation angegeben (z.B. "visible-for-large-up" oder einfach "large-hidden") geht da nix...
• Typografie: Weder auf dem iPad noch meinem iPhone 5 bekomme ich es hin, dass die Typo lesbar(er) wird. Hier wird die Schrift einfach verkleinert. Ich habe schon als CSS 100% für Body eingeben. Somit sollte sich doch irgendetwas verändern auf kleinen Geräten. Fehlanzeige. Dann habe ich unter den FW-Einstellungen unter Typografie bei einigen Variablen die Doppel-Slash entfernt, so dass diese dann Geltung haben sollten (z.B. "$small-font-size: 500%;"). Keine Veränderung.
  Ebenso übrigens die Typo in den Navigationen...

Das sind jetzt einfach mal ein paar Dinge, die ich einfach nicht verstehe und nicht beeinflussen kann. Und ich stehe noch voll am Anfang. Und mit den Bilder habe ich noch gar nicht angefangen...
Ich würde gerne eine Seite bauen, die ich scrollen kann und im Hintergrund Bilder liegen sollen, bei der sich die Bilder aber bei kleinen Screens anders verhalten sollen und über die Text steht. Als Beispiel soll es etwa wie diese Site aussehen: http://www.masterdynamic.eu/
Ich habe mir gedacht, dass ich für jeden Artikel ein Bild erstellen kann, dass dann dort in den Hintergrund gelegt wird. Aber leider werden die Bilder dann auf großen Screens nicht über die gesamte Seite gezeigt. Es kann doch nicht sein, dass ich ein Bild für die gesamte Page erstelle (2560 x 12000px oder so) und das dann immer in den Hintergrund über body geladen werden muss, oder?. Außerdem würde ich gerne, wie geschrieben, einen anderen Ausschnitt auf kleinen Screens ausgeben, dass soll ja seit Contao 3.4 möglich sein. Aber damit konnte ich mich noch nicht mal beschäftigen...

Insgesamt hänge ich an so vielen Positionen in der Luft (von denen ich nicht mal weiß, ob sie was mit Foundation zu tun haben) und weiß echt keinen Rat.
Daher die Frage, ob es eine gute Dokumentation für die Erweiterung gibt? Für Hilfe mit dem Hintergrundbildern bin ich auch dankbar, werde aber noch woanders im Forum gezielter fragen...

Vielleicht weiß jemand Rat und kann mir den Tag etwas retten ...

Danke
Jan-Dirk

Zitat:

---

Zitat von chrischnian

Contao4 welche Version genau und wie installiert?

Von Hand oder Composer?

---

Von Hand, da die Version sich über Composer auf einer Contao 4.3 nicht installieren lässt.

Hallo Jan-Dirk,

also ich kenne keine Doku für contao die die aktuelle V6.3 von zurb Foundation betrifft.

Wenn du aber Einstellungen in den FW-Einstellungen vornimmst, musst du die erstellten Dateien in dein Layout einbinden. Erst dann zeigen die auch Wirkung und natürlich deine Einstellungen auch im Layout auswählen.
Du solltest als erstes einmal Grid festlegen und entscheiden was Standard sein soll.

Du muss auch etwas aufpassen, wie du ja schon bemerkt hast, hackt die Erweiterung hier und da ein wenig.

Ok gabs bzw gibts irgendwelche Probleme? Weil dann würde ich das auch machen!

Habe zwar noch nie von Hand installiert muss man was bestimmtes beachten?

@chrischnian

Bis auf die oben angesprochene Anpassung gab es keine Probleme es zum laufen zu bekommen.

Das einzige was im Moment nicht klappt, ist die erzeugte scss Datei, die nicht funktioniert, was mich aber nicht stört, da ich foundation extern einbinde bzw. gerade am testen der composer Installation bin. Dieses Problem ist aber hier auch bereits erwähnt worden.

Bei der Installation von Hand musst du auf die Reihenfolge der Abhängigkeiten achten

Kann es sein, dass ich bei installierter Fundation-Erweiterung keine eigenen internen CSS-Stylesheets mehr sehen und einbinden kann?
Ich bekomme es nicht hin, nur wenn ich es als externes CSS-Stylesheet einbaue und dann in SCSS umbenennte, dann geht es. Aber mit SCSS habe ich noch nix gemacht und kenne mich gar nicht aus...
Sind mit der Erweiterung die internen Stylesheets ausgeschlossen?

Hallo Jan-Dirk,

davon ist mir nichts bekannt.

Das einzige was mir auf Anhieb einfällt wäre die Reihenfolge. Im Layout kannst du sagen was zuerst geladen wird Interne oder Externe.

Ich selbst setze weitere CSS Dateien ein ohne Probleme. Nur benutze ich keine Internen, aber ich glaub das ist Geschmacksache.

Zitat:

---

Zitat von Merlin

Hallo Jan-Dirk,

davon ist mir nichts bekannt.

Das einzige was mir auf Anhieb einfällt wäre die Reihenfolge. Im Layout kannst du sagen was zuerst geladen wird Interne oder Externe.

Ich selbst setze weitere CSS Dateien ein ohne Probleme. Nur benutze ich keine Internen, aber ich glaub das ist Geschmacksache.

---

Leider nein, die Reihenfolge hat leider keine Auswirkungen.

Ich glaube, ich lasse das mit dieser Erweiterung. Seit einer Woche probiere ich mit Try-and-Error an den Teil rum und komme überhaupt nicht rein geschweige denn weiter.
Ich werde nun probieren, wie ich die Seiten anders responsive bekomme.
Aber Euch vielen Dank und weiter viel Spaß damit.
Jan-Dirk

Alternativ könntest du dir die contao-bootstrap Erweiterung ansehen.

Da bin ich wieder!

Nachdem ich nun mit einigen Grids herumgespielt habe bin ich schlußendlich doch wieder bei Foundation gelandet, da hier einige Dinge sehr schön gelöst sind.
Ich habe eine komplette Neuinstallation durchgeführt und nun kamen auch keine Fehlermeldungen mehr und nun läuft es – meiner Meinung nach – auch besser. (Übrigens installiert über die Erweiterungsverwaltung. Ich habe über den Composer echte Probleme mit der Installation gehabt. Hier sollte ich Memory von über einen GB bereitstellen (so habe ich das jedenfalls verstanden). Das ist ja irre...)
Aber Fragen tauchen trotzdem immer wieder mal auf.

Zum Beipiel versuche ich es hinzubekommen, dass Bilder (Hintergrundbilder) über die gesamte Breite des Bildschirms laufen. Bei mir werden sie aber – gerade auf großen Bildschirmen – links und rechts beschnitten und laufen nicht breiter als die Navigation. Mit einigen Erweiterungen kann man hier Hintergrundbilder definieren, aber die sind fixiert und der Vordergrund wird darüber gescrollt. Das möchte ich nicht, sie sollen sich also mit dem Inhalt bewegen.
Ich habe nun zusätzlich mit der Erweiterung OnePageWebsite probiert, aber auch hier werden zwar bei den Einzelseiten die Hintergrundbilder über die gesamte Bildschirmbreite angezeigt, aber wenn sie "zusammenmontiert" sind, dann ist links und rechts ein mehr oder weniger großer Rand.

Auf dem iPhone und dem iPad funktioniert es (soweit ich beurteilen kann) prima.

Kann ich z.B. definieren, dass bei großen Bildschirmen immer die gesamte Breite des Bildschirms genommen werden soll? Dann sollte ich doch mit den Pullangaben die Artikel bzw. Texte nur auf die mittleren 4 Spalten konzentrieren können und auf kleinen und mittleren Screens ohne Push die "normale" Anmutung bekommen, oder? Wie verhält sich das mit der Navigation, hat das Auswirkungen?
Gibt es eigentlich zu Foundation Erweiterungen und wäre da was dabei?

Noch eine Frage: In den (leider etwas rudimentären) Erklärungen zur Foundation Erweiterung werden für das Grid kleine Icons verwendet, auf denen man sehen kann, wie das Grid in diesem Fall aufgebaut ist. Kann man diese Icons irgendwo herunterladen oder muss ich mir die selbst basten?

Viele Grüße
Jan-Dirk

Übrigens: Gerade ist mir doch ein Fehler aufgefallen, der mir bei der ersten Installation schon aufgefallen ist: Ich kann keine internen Stylesheets aktivieren, sie werden überhaupt nicht angezeigt. Bei der Neuinstallation ging es noch, denn ein Stylesheet ist eingebunden und kann bearbeitet werden. Weitere dann leider nicht mehr... Anhang 18745. Was kann das sein?

Zitat:

---

Zitat von Jan-Dirk

Da bin ich wieder!


Übrigens: Gerade ist mir doch ein Fehler aufgefallen, der mir bei der ersten Installation schon aufgefallen ist: Ich kann keine internen Stylesheets aktivieren, sie werden überhaupt nicht angezeigt. Bei der Neuinstallation ging es noch, denn ein Stylesheet ist eingebunden und kann bearbeitet werden. Weitere dann leider nicht mehr... Anhang 18745. Was kann das sein?

---

Hallo Jan-Dir,

das kann ich nicht sagen, auf meiner Contao4 installation ist das alles ganz normal.. (siehe Screen)
Auf welcher version bist du unterwegs ?

Zitat:

---

Zitat von Merlin

Hallo Jan-Dir,

das kann ich nicht sagen, auf meiner Contao4 installation ist das alles ganz normal.. (siehe Screen)
Auf welcher version bist du unterwegs ?

---

3.5.21 mit diesen Erweiterungen.

Ich nutze die V2 von GitHub mit der bereits erwähnten Anpassung damit diese unter PHP 7 läuft.

Zitat:

---

Zitat von Merlin

Ich nutze die V2 von GitHub mit der bereits erwähnten Anpassung damit diese unter PHP 7 läuft.

---

Na ja, nun habe ich ebenfalls diese Version heruntergeladen und dann werden die internen Styles wieder angezeigt.
Allerdings fehlen dann alle Vorgaben in den FW-Einstellungen. Ich gehe lieber wieder auf die alte Version.
Warum werden eigentlich nie die Themen, die ja wichtig sind, mit installiert? Ich kann diese auch weder in der Version auf GitHub noch sonstwo finden. Einzig bei dem Download auf der Seite von Monique werden diese mit heruntergeladen. Gibt es denn keine neuere Version dieser CSS-Dateien? Wo kann man die herunterladen?

Bis dann
Jan-Dirk

Zitat:

---

Zitat von Jan-Dirk

Warum werden eigentlich nie die Themen, die ja wichtig sind, mit installiert? Ich kann diese auch weder in der Version auf GitHub noch sonstwo finden. Einzig bei dem Download auf der Seite von Monique werden diese mit heruntergeladen. Gibt es denn keine neuere Version dieser CSS-Dateien? Wo kann man die herunterladen?

---

Hallöchen,

Welche CSS-Dateien meinst du genau? in der V2 ist das Foundation Framework bereits enthalten. und alle anderen werden eigentlich (funktioniert nicht zu 100%) erstellt.

Zitat:

---

Zitat von Merlin

Hallöchen,

Welche CSS-Dateien meinst du genau? in der V2 ist das Foundation Framework bereits enthalten. und alle anderen werden eigentlich (funktioniert nicht zu 100%) erstellt.

---

Ich lade die Dateien aus dem GitHub herunter und lade sie manuell auf meinen Webspace.
Dann gehe ich auf ... contao/install.php und lasse die Datenbank aktualisieren. In der ER wird dann nichts angezeigt und auch in den Foundation Erweiterungen.

Muss ich dann nciht mehr im Layout die Externen Dateien einbinden?

Hallo

also ich mach das wie folgt:

1. Extension installieren (das sollten sie sein)
   
   1. designs2/codeowl_fw_foundation
   2. designs2/codeowl_design_presets
   3. designs2/codeowl_grid_control
   4. menatwork/contao-multicolumnwizard
   
   
2. ?Datenbank aktualisieren
3. Designvorgaben anlegen
4. FW-Einstellungen machen (Achtung!!! das erstellte SASS funktioniert nicht zu 100%) <<-- ich verzichte auf diese Einstellungen
5. Layout Einbinden der externen Foundation CSS/JS (Lade dir Foundation von zurb.com runter und kopier die nach files und bin diese ein)

Hallo,

warum kann ich mit der Version von Foundation über den Composer keinerlei Veränderungen an den Fondation-Elementen hinbekommen?

Wenn ich in den FW Einstellungen die Doppelslash bei den Elementen herausnehme, die ich ändern möchte, dann passiert bei mir gar nichts.
Ich habe versucht, z.B. die Farben und Typo der Topbar zu ändern:
Ursprungscode

Code:

---

// TOP BAR
// $include-html-top-bar-classes: $include-html-classes;

// Background color for the top bar
// $topbar-bg-color: #333;
// $topbar-bg: $topbar-bg-color;

// Height and margin
// $topbar-height: 45px;
// $topbar-margin-bottom: 0;

// $topbar-button-font-size: 2rem;

---

So habe ich es verändert (nur zum Test)

Code:

---

// TOP BAR
// $include-html-top-bar-classes: $include-html-classes;

// Background color for the top bar
$topbar-bg-color: #ff000ß;
// $topbar-bg: $topbar-bg-color;

// Height and margin
$topbar-height: 150px;
$topbar-margin-bottom: 10px;
$topbar-button-font-size: 2rem;

---

Ich habe diese Änderungen in den FW Einstellungen »aktiviert« und dann die beiden entstandenen SCSS Dateien über das Layout eingebunden als Externe Stylesheet.
Hier tut sich nicht.

Kann mir jemand helfen, wie ich die Vorgaben ändern kann?
Jan-Dirk

Zitat:

---

Zitat von Jan-Dirk

Hallo,

warum kann ich mit der Version von Foundation über den Composer keinerlei Veränderungen an den Fondation-Elementen hinbekommen?

Wenn ich in den FW Einstellungen die Doppelslash bei den Elementen herausnehme, die ich ändern möchte, dann passiert bei mir gar nichts.
Ich habe versucht, z.B. die Farben und Typo der Topbar zu ändern:
Ursprungscode

Code:

---

// TOP BAR
// $include-html-top-bar-classes: $include-html-classes;

// Background color for the top bar
// $topbar-bg-color: #333;
// $topbar-bg: $topbar-bg-color;

// Height and margin
// $topbar-height: 45px;
// $topbar-margin-bottom: 0;

// $topbar-button-font-size: 2rem;

---

So habe ich es verändert (nur zum Test)

Code:

---

// TOP BAR
// $include-html-top-bar-classes: $include-html-classes;

// Background color for the top bar
$topbar-bg-color: #ff000ß;
// $topbar-bg: $topbar-bg-color;

// Height and margin
$topbar-height: 150px;
$topbar-margin-bottom: 10px;
$topbar-button-font-size: 2rem;

---

Ich habe diese Änderungen in den FW Einstellungen »aktiviert« und dann die beiden entstandenen SCSS Dateien über das Layout eingebunden als Externe Stylesheet.
Hier tut sich nicht.

Kann mir jemand helfen, wie ich die Vorgaben ändern kann?
Jan-Dirk

---

wenn du das nutzen möchtest, musst du die die erstellten SASS Dateien im Layout auch einbinden, sonst haben sie keinerlei Wirkung

Zitat:

---

Zitat von Merlin

wenn du das nutzen möchtest, musst du die die erstellten SASS Dateien im Layout auch einbinden, sonst haben sie keinerlei Wirkung

---

Jetzt haben wir die Lösung (Danke Jens!!).

Wichtig ist, dass die eigenen Einstellungen, die man unter FW Einstellungen macht, in dem Verzeichnis "files/themes/style-all" liegen, damit sie eingebunden werden.
Anhang 18779

@Merlin

ich habe nun die managed Edition installiert und über Composer den menatwork/contao-multicolumnwizard installiert.

Nun habe ich in system/modules/

1. designs2/codeowl_fw_foundation
2. designs2/codeowl_design_presets
3. designs2/codeowl_grid_control

hochgeladen. Wie muss ich die 3 Module nun noch passend installieren?

Kann man später wenn designs2 neue Versionen bringt diese einfach über Composer updaten?

Zitat:

---

Zitat von chrischnian

@Merlin

ich habe nun die managed Edition installiert und über Composer den menatwork/contao-multicolumnwizard installiert.

Nun habe ich in system/modules/

1. designs2/codeowl_fw_foundation
2. designs2/codeowl_design_presets
3. designs2/codeowl_grid_control

hochgeladen. Wie muss ich die 3 Module nun noch passend installieren?

Kann man später wenn designs2 neue Versionen bringt diese einfach über Composer updaten?

---

hallöchen,

die 3 module dürfen nicht in einen Ordner "designs2" in system/modules liegen sondern direkt da drinnen. Die managed Edition habe ich mir noch nicht angesehen, in der anderen war es immer wie folgt

AppKernel.php im Ordner App

Code:

---

...
use Contao\CoreBundle\HttpKernel\Bundle\ContaoModuleBundle;


class AppKernel extends Kernel
{
    /**
    * {@inheritdoc}
    */
    public function registerBundles()
    {
        $bundles = [
            ...
            new ContaoModuleBundle('multicolumnwizard', $this->getRootDir()),
            new ContaoModuleBundle('codeowl_fw_foundation', $this->getRootDir()),
            new ContaoModuleBundle('codeowl_design_presets', $this->getRootDir()),
            new ContaoModuleBundle('codeowl_grid_control', $this->getRootDir()),

---

Als Composer Version gibt es bereits eine neuere Version (2.0.2), bei der es aber zu einigen Problemen mit der erzeugten SASS kommt.
Was ein späteres Update betrifft, kann ich keine Aussage machen, das müsste dir Monique beantworten.

Nee habe es hinbekommen.

Die Ordner unter system/modules reinkopiert und 2x Cache gelöscht dann wurde im Install das mit den DB update angezeigt. Nun habe ich alles im Backend. Mal schauen wie es klappt.