Responsive Webdesign mit Contao und YAML 4

**dtptiger** · 09.12.2012, 14:49

Hallo,
ich will jetzt lernen mit YAMLFRONT in contao 3 umzugehen.
Lizensiert habe ich mutig

Jetzt muss ich an die fe_page ran, habe das noch nie gemacht.

Für yaml und Contao 2x finde ich ja genügend Information, was ändert sich mit YAMLFRONT 3 in Contao 3 ?

Oder, wo finde ich Information wie ich das fe_page.html5 von Contao 3 für YAMLFRONT vorbereite?

Gruss dtptiger

**k.kutschera** · 09.12.2012, 16:13

Nächste Woche werde ich ein Theme als "sehr umfangreiche Vorlage" mit vielen nützlichen Funktionen veröffentlichen. Das Theme ist bereits fertig - Ich arbeite derzeit nur noch an der Dokumentation und warte auf Dirk Jesse bzgl. der Lizenz. Sollte nächste Woche Mo - Di fertig werden

yamltheme.png

**dtptiger** · 09.12.2012, 18:16

Hallo,

ein Theme hat aber doch keine andere fe_page, oder täusche ich mich?

Hm, ich würde ja gerne verstehen was an der fe_page angepasst werden muss.

Ist das möglicherweise so, das ich nicht mehr im Seitenlayout (mit den hübschen Auswahlkästchen) die Kopfzeile, Fusszeile, Seitenspalten und eventuelle zusätzliche Layoutbereiche definiere, sondern per verschieden fe_pages?

Gruss dtptiger

**MacKP** · 10.12.2012, 08:59

Hallo dtptiger,
eigentlich sind die Anleitungen von Contao 2.x immer noch genau so brauchbar. In der Regel wird dort erläutert, warum man welche Teile in einer eigenen fe_page ersetzt und wo man nachschauen kann was sich geändert hat (eben in der Originalen fe_page).
Schau dir also die Anleitungen genau an und versuch zu verstehen was da passiet. Ansonsten wirst du auch mit einer Anleitung für die 3.x nicht glücklich, wenn du einfach nur stumpf das kopierst, was da steht... beim nächsten Update könnte es ja schon wieder anders sein.

Die Bereiche legt man an sich in der fe_page an. Das stimmt. Die höhen und breiten gibt man nicht mehr im Seitenlayout an. Aber es ist immer ein Zusammenspiel aus fe_page und Seitenlayout. D.h. willst du verschiedene Varianten, wirst du eher beides anlegen pro Variante.

Hier ist übrigens eine kleine Einführung von mir -> http://www.mediendepot-ruhr.de/blog/...nd-contao.html
Jap, die ist auch schon 'alt' *g*

Viele Grüße

**dtptiger** · 13.12.2012, 16:16

Hallo,

das ist jetzt meine tatsächlich seit eben funktionsfähige fe_yamlpage mit einem simplem layout.
(Contao 3 mit YAMLFRONT-Contao_und_YAML)

Habe ich die Syntax richtig gemacht? .. wegen des html5:

PHP-Code:


<headerbild>

<div class="headerbild">

<div class="ym-wrapper">

<div class="ym-wbox">

...

Beim main habe ich den extra tag <main> weggelassen, ist das egal oder nicht?

PHP-Code:


<footer>

<div class="footer>

Hier meine fe_yaml mit header, custom, main, footer:

PHP-Code:


<!DOCTYPE html>

<html lang="<?php echo $this->language; ?>">

<head>

<meta charset="<?php echo $this->charset; ?>">

<title><?php echo $this->pageTitle; ?> - <?php echo $this->mainTitle; ?></title>

<base href="<?php echo $this->base; ?>">

<meta name="robots" content="<?php echo $this->robots; ?>">

<meta name="description" content="<?php echo $this->description; ?>">

<meta name="keywords" content="<?php echo $this->keywords; ?>">

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

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

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

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



<!-- mobile viewport optimisation -->

  <meta name="viewport" content="width=device-width, initial-scale=1.0">



<!--[if lte IE 7]>

    <link href="files/theme/css/yaml/core/iehacks.css" rel="stylesheet" type="text/css" />

    <![endif]-->



    <!--[if lt IE 9]>

    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

    <![endif]-->

</head>



<body>

<ul class="ym-skiplinks">

    <li><a class="ym-skip" href="#nav">Skip to navigation (Press Enter)</a></li>

    <li><a class="ym-skip" href="#main">Skip to main content (Press Enter)</a></li>

</ul>



<header>

    <div class="ym-wrapper">

        <div class="ym-wbox">

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

        </div>

    </div>

</header>



<headerbild>

<div class="headerbild">

<div class="ym-wrapper">

        <div class="ym-wbox">

            <?php echo $this->sections['headerbild']; ?>

        </div>

    </div>

</div>

</headerbild>



<div class="main">

    <div class="ym-wrapper">

        <div class="ym-wbox">

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

        </div>

    </div>

</div>



<footer>

<div class="footer>

    <div class="ym-wrapper">

        <div class="ym-wbox">

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

        </div>

    </div>

</div>

</footer>



<!-- full skip link functionality in webkit browsers -->

<script src="files/theme/css/yaml/core/js/yaml-focusfix.js"></script>



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

<?php if (!$this->disableCron): ?>



<script src="<?php echo TL_ASSETS_URL; ?>assets/contao/js/scheduler.js?t=<?php echo $this->cronTimeout; ?>" id="cron"></script>

<?php endif; ?>



</body>

</html>

Gruss dtptiger

Nachtrag:
Die base.css (das Yaml Basis-Stylesheet) ist mit dem Contao 3 feature "Zusätzliche Stylesheets" eingebunden.

**k.kutschera** · 14.12.2012, 10:50

Hier gehts zum YAMLTHEME: https://web-seo-cms.de/de/content-ma...iterungen.html

Hier gehts zu sonstigen YAML-Ressourcen: http://www.yaml.de/resources.html

@dtptiger: Schau dir am besten mal ein Tutorial zu HTML5 an z.B. dieses.

Ansonsten kann ich dir nur empfehlen dir einfach den Quelltext der YAML-Demos anzusehen

**dtptiger** · 14.12.2012, 11:21

Zitat von k.kutschera

Hier gehts zu sonstigen YAML-Ressourcen: http://www.yaml.de/resources.html
..
Ansonsten kann ich dir nur empfehlen dir einfach den Quelltext der YAML-Demos anzusehen

Hallo,
vielen Dank für deine Unterstützung! Dazu direkt eine Frage, verstehst Du warum in den yaml dokus für yaml 4 geradezu als feature heraus gestellt wird das die namespaces in Y4 keine ID´s mehr sind, nur noch classen.

Aber in den Demodateien (yaml402-121023) gibt es <nav id="nav"> und <div id="main>.

@dtptiger: Schau dir am besten mal ein Tutorial zu HTML5 an z.B. dieses.

Danke, das schaut für einen DAU-coder wie mich gut erklärt zu sein

**k.kutschera** · 14.12.2012, 11:39

Ich denke, damit ist gemeint, das jetzt ein Namespace vor jeder Klasse ist(ym-...). Dadurch kommt YAML nicht mit anderen CSS-Dateien in die Quere. Oft heißen die Klassen ja zumindest bei Anfängern in diesem Bereich einfach z.B. header, nav usw. - durch den Namespace wird verhindert, dass sich die YAML-nav-Klasse mit einer evtl. vorher durch einen Entwickler erstellten nav-Klasse nicht in die Quere kommen, weil diese eben nun ym-nav heißt, was kaum ein Entwickler zufällig verwendet haben sollte.

Im YAMLTHEME wird das auch genutzt. Wenn du dir den Quelltext ansiehst wirst du feststellen, dass es dort z.B. kk-col1 und ym-col1 gibt. Damit ist mein zusätzliches CSS nicht auf die YAML-Klassen angewiesen und wenn ich die Klasse aus dem Quelltext entferne, gelten nur noch die YAML-CSS-Klassen.

Was die ID's angeht ist es sehr wichtig, dass du immer im Hinterkopf behältst, dass ID's nur einmal im selben Quelltext stehen dürfen. Darum haben meistens die ersten DIVs z.B. Header, nav eine ID. Die darunter z.B. ym-wrapper kommen mehrfach in allen möglichen DIVs vor und sind daher Klassen. Das ist übrigens eine Vorschrift vom W3C. Daher merke: Eine ID kommt in einem Quelltext maximal einmal vor

LG

**dtptiger** · 14.12.2012, 12:04

Zitat von k.kutschera

Ich denke, damit ist gemeint, das jetzt ein Namespace vor jeder Klasse ist(ym-...). Dadurch kommt YAML nicht mit anderen CSS-Dateien in die Quere. Oft heißen die Klassen ja zumindest bei Anfängern in diesem Bereich einfach z.B. header, nav usw. - durch den Namespace wird verhindert, dass sich die YAML-nav-Klasse mit einer evtl. vorher durch einen Entwickler erstellten nav-Klasse nicht in die Quere kommen, weil diese eben nun ym-nav heißt, was kaum ein Entwickler zufällig verwendet haben sollte.

Habe die Dokus überflogen gelesen und ist gut so, gegebenfalls viel Arbeit

Im YAMLTHEME wird das auch genutzt. Wenn du dir den Quelltext ansiehst wirst du feststellen, dass es dort z.B. kk-col1 und ym-col1 gibt. Damit ist mein zusätzliches CSS nicht auf die YAML-Klassen angewiesen und wenn ich die Klasse aus dem Quelltext entferne, gelten nur noch die YAML-CSS-Klassen.

Guter Hinweis, noch nicht ganz klar, bis jetzt ...

Was die ID's angeht ist es sehr wichtig, dass du immer im Hinterkopf behältst, dass ID's nur einmal im selben Quelltext stehen dürfen. Darum haben meistens die ersten DIVs z.B. Header, nav eine ID. Die darunter z.B. ym-wrapper kommen mehrfach in allen möglichen DIVs vor und sind daher Klassen. Das ist übrigens eine Vorschrift vom W3C. Daher merke: Eine ID kommt in einem Quelltext maximal einmal vor

Aber klar doch.
Hatte nur geglaubt mich zu erinnern das ich in den "unterschiedsdokus" yaml 3 ->yaml 4 irgendwo gelesen hätte das es nur noch classen gäbe.
Nicht so wichtig.

Gruss dtptiger

**Daniel_** · 07.03.2013, 22:28

Hallo, und erst einmal vielen Dank für die tolle Erweiterung.

Bei der Erstellung eines Kontaktformulars sind mir ein paar Sachen aufgefallen, die nicht ganz nach YAML umgesetzt werden.

YAMLFRONT

HTML-Code:

<div class="widget ym-fbox-text">
   <label class="mandatory" for="ctrl_email">
      <span class="invisible">Pflichtfeld</span>
      E-Mail
      <span class="mandatory"> * </span>
   </label>
   <input id="ctrl_email" class="text mandatory" type="text" maxlength="128" required="" value="" name="email"></input>
</div>

YAML4

HTML-Code:

<div class="ym-fbox-text">
   <label for="email">
      E-Mail 
      <sup class="ym-required" title="This field is mandatory."> * </sup>
   </label>
   <input id="email" type="text" aria-required="true" size="20" name="email"></input>
</div>

Der Unterschied ist das Tag und die Klasse des Sternchens, somit wird es nicht farblich hervorgerufen. Gut, diese eine Klasse kann man auch in der CSS-Datei ändern, aber der das folgende Beispiel lässt sich leider nicht so leicht mittels CSS beheben.

YAMLFRONT

HTML-Code:

<div class="widget ym-fbox-text">
   <label for="ctrl_name" class="mandatory error">
      <span class="invisible">Pflichtfeld</span> 
      Name
      <span class="mandatory"> * </span>
   </label>
   <p class="error">Bitte füllen Sie das Feld "Name" aus!</p>
   <input type="text" name="name" id="ctrl_name" class="text mandatory error" value="" required maxlength="64"> 
</div>

YAML4

HTML-Code:

<div class="ym-fbox-text ym-error" aria-live="assertive" role="alert">
   <p class="ym-message">Field «Last name» not properly filled.</p>
   <label for="lastname">
      Last name 
      <sup class="ym-required" title="This field is mandatory."> * </sup>
   </label>
   <input id="lastname" type="text" aria-required="true" size="20" name="lastname"></input>
</div>

Dadurch, dass das <p> nicht von einem <div class="ym-error"> umschlossen ist und nicht die Klasse "ym-message" erhält, zerschießt es das Formular im IE, in den anderen modernen Browsern wird die Errormessage durch ein Infotext interpretiert. Des Weiteren kann man nicht das ganze div hervorheben und umranden, weil eben die Klasse fehlt. Wäre schön, wenn man da noch etwas machen könnte.

LG
Daniel

**MacKP** · 02.04.2013, 14:36

Bei den Formularen ist mir noch ein Problemchen aufgefallen.
In Zusammenhanb mit dem EFG habe ich ein mehrseitiges formular erstellt. Soweit kein Problem und alles geht super. Bis auf die Tatsache, das man nicht von Seite 1 auf Seite 2 kommt etc.
Es fehlt in der form.html5 Zeile 15 das hier:

Code:

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

Einfügen und alles ist gut. Ich hab jetzt allerdings noch die Version für Contao 2.11.x, da ich noch nicht zu 3 wechsel... weiß also nicht, ob das inzwischen behoben wurde oder nicht.

Viele Grüße

PS: Die Links aus dem ER gehen alle nur noch auf die Entwicklerseite.. wäre schön, wenn das mal angepasst werden würde.

Edit: Da fehte dann anscheinend noch was...
Wenn man aber die Zeilen für das form selber und das div danach so ersetzt gehts:

Code:

<form<?php if ($this->action): ?> action="<?php echo $this->action; ?>"<?php endif; ?> class="ym-form" id="<?php echo $this->formId; ?>" method="<?php echo $this->method; ?>" enctype="<?php echo $this->enctype; ?>">
<div <?php echo $this->attributes; ?>>

Wie gesagt alles Contao 2.11.x weiß nicht ob das in 3 dann anders ist und schon passt.

**mike_mcfly** · 28.04.2013, 12:39

Ahoi,

also ich habe gerade auf die Links Handbuch, Forum und Shop aus dem Repository geklickt. Diese führen alle zu der Internetseite des Entwicklers - kaufen kann ich die Erweiterung aber dann nirgends...

**planepix** · 28.04.2013, 12:46

So?
https://web-seo-cms.de/de/content-ma...iterungen.html

**k.kutschera** · 28.04.2013, 13:14

@planepix - Danke

An dieser Stelle noch ein Hinweis bzgl. der in den vergangenen Posts gewünschten Features. Die Features sind in der mir vorliegenden Version bereits integriert. Da demnächst YAML 4.1 ansteht, würde ich gern mit dem release noch warten und alle Neuerungen mit einbeziehen. Es wird außerdem ein sehr umfassendes "Feature" direkt in YAMLFRONT integriert, dass das YAMLTHEME in Zukunft ablösen wird. Mehr möchte ich an dieser Stelle noch nicht verraten

Ich denke das ganze wird in ca. 14 Tagen bereit stehen.

LG,
K

**k.kutschera** · 20.05.2013, 18:29

Vorab gibts ein Update das Daniel_'s Probleme lösen sollte. Der Rest kommt in den nächsten Tagen

Seit Ihr damit einverstanden, wenn ich für die nächste Version einen neuen Threat aufmache? Dieser könnte YAML-Einsteiger ein wenig verwirren

LG,
K

**Lego2013** · 20.05.2013, 18:38

Seit Ihr damit einverstanden, wenn ich für die nächste Version einen neuen Threat aufmache? Dieser könnte YAML-Einsteiger ein wenig verwirren

Macht aus meiner Sicht Sinn, weil die neue Version sich ja wahrscheinlich auch deutlich von der jetzigen Version unterscheidet - bin schon ganz gespannt.

**dtptiger** · 20.05.2013, 18:58

Seit Ihr damit einverstanden, wenn ich für die nächste Version einen neuen Threat aufmache? Dieser könnte YAML-Einsteiger ein wenig verwirren

Wenns Sinn macht, klar ein neuer Thread.
Wäre schön von diesem dann auf den neuen verwiesen zu werden.

Gruss dtptiger

**k.kutschera** · 23.05.2013, 14:48

Hi Ihr Lieben,

ich denke das ist eindeutig und dann wird es auch so gemacht - aber erst bei der Version für YAML 4.1

Vorab habe ich eine aktuelle Version für Contao 3.1 ins Repository geladen, damit ihr gleich das nächste Projekt mit Contao 3.1 starten könnt. Ich habe ihr erstmal nur den Alpha-Status gegeben weil sich doch einiges in Contao 3.1 getan hat. Sie ist aber bereits rudimentär getestet und es sollte alles laufen. Nebenbei habe ich noch einiges optimiert, damit dem Upgrade von dieser Version zur YAML 4.1 Version einfach "nachgeupdated" werden kann.

PS: Es wäre nett wenn ihr, falls ihr die Alpha getestet habt hier kurz schreibt ob alles läuft. Danke

LG,
K

**k.kutschera** · 23.05.2013, 18:58

Bezüglich der geplanten Schritte in Sachen Theme habe ich mich entschieden, dass ganze frei zu veröffentlichen um möglichst schnell viele Ideen einzusammeln. Daher geht es in dieser Sache nun in folgendem Threat weiter: https://community.contao.org/de/show...L-Contao-Theme

Für euch bedeutet das nichts weiter, als das zusätzlich zu YAMLFRONT nun auch noch ein YAMLTHEME als Erweiterung installiert werden kann. Wer lieber von Anfang an selbst "themed" hat so die Möglichkeit direkt auf YAMLFRONT zu setzen. Wer es lieber bequem mag, kann YAMLTHEME als Schnelleinstieg in neue Projekte nutzen.

Ich hoffe Ihr findet den Ansatz gut. Alternative Ideen sind natürlich trotzdem willkommen

LG,
K