• Druckvorgaben sind in der base.css integriert, damit Wegfall eines Requests
• Subtemplates wurden erweitert mit Klassen für 20%, 40%, 60% und 80% Breite
• Überarbeitung der Forms-Bausteine, neue Klasse full
• Skiplinks wurden überarbeitet
• Add-ons: 2 neue jQuery Plugins – SyncHeight und Accessible-Tabs
• zahlreiche neue Beispiele

Alle Details zur neuen Version 3.2 könnt ihr in der Changelog nachlesen.

• Projekt mit WordPress und YAML
• YAML 3.1 released
• YAML Builder Preview
• YAML 3.0.5 veröffentlicht
• YAML Coffee Theme neue Version

1. einspaltig
2. 2-spaltig, Sidebar rechts, Breite der Sidebar in %, em oder px
3. 2-spaltig, Sidebar links, Breite der Sidebar in %, em oder px
4. 3-spaltig, Sidebar rechts und links , Breite der Sidebar in %, em oder px
5. 3-spaltig, 2 Sidebars rechts, Breite der Sidebars in %, em oder px
6. 3-spaltig, 2 Sidebars links, Breite der Sidebar in %, em oder px

Bei Variante 4 ist Einheiten-Mix möglich, zB. rechte Sidebar 200px und linke Sidebar 25%. Bei Variante 5 und 6 müssen die Sidebars die gleiche Einheit besitzen, also zB. 150px und 213px oder 25em und 29.25em.

Und nach diesem Prinzip kann man  jeden Container (Header, Teaser, Contentarea, Prolog und Footer), den man benutzen möchte, einzeln einstellen.

YAML ist sooooo geil!

• Nächste Woche Xtreme One 1.2
• Xtreme One Version 1.0.1 und internationaler Launch
• Xtreme One Betatester gesucht!
• Making of xtreme-theme.com
• Xtreme One – es geht weiter

via Ajaxian

Anhand von einigen Beispielen werde ich die verschiedenen Layouts gegenüberstellen. Fangen wir bei einem einfachen, zentrierten Layout an.

Einfachverwendung von page_margins/page

Die beiden Container page_margins und page umschließen die anderen Container und steuern so die minimale und maximale Breite der gesamten Seite. Hier der HTML Code:

1
2
3
4
5
6
7
8
9
10
11
12

<div class="page_margins">
  <div class="page">
    <div id="header">...</div>
    <div id="nav">...</div>
    <div id="main">
      <div id="col1">...</div>
      <div id="col2">...</div>
      <div id="col3">...</div>
    </div>
    <div id="footer">...</div>
  </div>
</div>

Das CSS sieht folgendermaßen aus:

.page_margins { min-width: 740px; max-width: 80em; }
.page { padding: 10px; }

Der Patch für die Internet Explorer (auf die ellenlange JS-Expression verzichte ich hier, die kann jeder bei den YAML Beispielen nachlesen):

* html .page_margins {
  /* Fallback if JavaScript is disabled */
  width: 80em;
  /* JS-Expression */
}

Mehrfachverwendung von page_margins/page

Hier sitzen die Container page_margins und page innerhalb der Elemente, die sich über das ganze Browserfenster erstrecken sollen und steuern auch wieder die minimale und maximale Breite des Inhalts. In diesem Fall innerhalb von #header, #nav, #main und #footer.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<div id="header">
  <div class="page_margins">
    <div class="page">...</div>
  </div>
</div>
<div id="nav">
  <div class="page_margins">
    <div class="page">...</div>
  </div>
</div>
<div id="main">
  <div class="page_margins">
    <div class="page">
      <div id="col1">...</div>
      <div id="col2">...</div>
      <div id="col3">...</div>
    </div>
  </div>
</div>
<div id="footer">
  <div class="page_margins">
    <div class="page">...</div>
  </div>
</div>

Im Gegensatz zum 1. Beispiel ist hier der Container page_margins nur für die maximale Breite zuständig, die minimale Breite wird an #header, #nav, #main, #footer vergeben.

.page_margins { max-width: 80em; }
#header, #nav, #main, #footer { overflow:hidden; min-width: 740px; }

Der Patch für die Explorer sieht hier ein wenig anders aus:

 * html div.page_margins {
    /* Fallback if JavaScript is disabled */
    width: auto;
  /* JS-Expression */
 } 
* html #header,
* html #nav,
* html #main,
* html #footer {
  /* Fallback if JavaScript is disabled */
  width: auto;
  /* JS-Expression */
 }

Man muß aber nicht page_margins und page in jedes Element packen. Entscheidend ist, wie das Layout aussehen soll. Genau so gut kann man nur den Header über das volle Browserfenster laufen lassen und die anderen Container innerhalb von page_margins/page:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="header">
  <div class="page_margins">
    <div class="page">...</div>
  </div>
</div>
<div class="page_margins">
  <div class="page">
    <div id="nav">...</div>
    <div id="main">
      <div id="col1">...</div>
      <div id="col2">...</div>
      <div id="col3">...</div>
    </div>
    <div id="footer">...</div>
  </div>
</div>

Somit sind viele verschiedene Kombinationen möglich. Das schöne an diesen Techniken ist, das sich bei entsprechender Auszeichnung der Maßeinheiten in em oder % die Container proportional vergrößern, ohne das etwas kaputt geht.

• YAML 3.2 erschienen
• YAML 3.1 released
• Xtreme – nun mit 6 Layouts
• Projekt mit WordPress und YAML
• Blogupdate vollzogen

• Die Container page_margins und page sind jetzt Klassen und ermöglichen somit eine Mehrfachverwendung.
• Navigationsbausteine überarbeitet, ebenfalls als Klassen ausgezeichnet
• Formular Baustein zur einheitlichen Gestaltung von Formularelementen
• RTL Support (Right to Left Schreibweise)
• Microformats Addon
• neue Equal Height Boxen für die Subtemplates
• 32 Layoutbeispiele

Alle Änderungen findet ihr in der Changelog.

Neu ist ebenfalls der YAML Developer Blog. Dort wird es in Zukunft News, Tutorials und auch Veröffentlichungen von Entwicklern rund um YAML geben.

• Mein Blog mit YAML 3.1
• CSS Framework YAML 3.0 released
• Zend Framework Beta 0.9.1. released
• Xtreme One WordPress Framework veröffentlicht!
• Projekt mit WordPress und YAML

• WordPress Snippets für Aptana Studio
• Aptana Studio 1.0 released
• Aptana und Spket zusammen
• Jack Slocum bloggt wieder
• User Contact Info in WordPress 2.9 erweitern

Was für mich aber am interessantesten ist: Egal, welche  Anforderungen, mein Projekt X kann alles .

• Matts new Spring Design
• 960 Gridder Bookmarklet
• Geiler Praktikantenjob
• YAML Coffee Theme
• YAML Coffee Theme neue Version

• Elemente mit der Klasse .print wurden im Ducklayout nicht sichtbar. Dieser Fehler wurde behoben.
• Opera 9.27 hat aufgrund eines Bugs ein Problem mit der optimierten Variante der Attributselektoren in der slim_print_base.css. Der Bug macht sich durch Rendering-Probleme im Screenlayout bemerkbar, obwohl die Print-Definitionen mit @media print gekapselt sind. Das Problem wurde beseitigt.
• Das Debug-Stylesheet hilft nun bei der Visualisierung der Seitenstruktur, Subtemplates und verschiedenen Textauszeichnungen.

Hier gehts zum Download.

• YAML 3.1 released
• YAML Builder Preview
• YAML 3.0.5 veröffentlicht
• YAML 3.2 erschienen
• YAML Coffee Theme neue Version

• YAML Green Theme Version 1.1
• Neues WordPress Theme
• YAML Green Theme Update
• YAML 3.0.6
• Twitter-Icons, Xtreme, jQuery Bug

Ich habe dazu eine Funktion gebaut, die die entsprechenden Container um den Beitrag in Kurzfassung wrappt. Die Bilder werden auch automatisch eingefügt, man muß nur zu jedem Beitrag eins hochladen (nicht zwangsläufig einfügen). Aber das ist eine andere Baustelle™.

Wie man hier sehr schön sieht, haben diese Gridraster einen Haken. Sie sehen nur auf Webseitendemos mit gleich langem Text perfekt aus. Ist der Text etwas kurzer oder man verwendet eine lange Überschrift, sieht es nicht mehr ganz so toll aus. Auf alle Fälle funktioniert es so, wie ich es mir vorgestellt habe. Mal sehen, was daraus noch so alles wird…

• Subcolumns in YAML
• YAML 3.1 released
• YAML Builder Preview
• Neues von Xtreme
• YAML 3.0.5 veröffentlicht