Einfuehrung in das XHTML/CSS-Framework YAML

1. Einführung in YAML

2. Jens Grochtdreis
‣ Frontendentwickler
‣ 10 Jahre Agenturerfahrung
‣ 11 Jahre Arbeit im und fürs Web
‣ Gründer der Webkrauts
‣ Blogger
‣ Autor für: PHPMagazin, PHPUser, T3N,
Webstandards-Magazin
‣ Fachliche Buchbetreuung bei Galileo, O'Reilly, MuT

3. Nicht das Rad immer
wieder neu erfinden!

4. Frameworks
‣ Javascript ‣ PHP
‣ Prototype ‣ CakePHP
‣ jQuery ‣ ZendFramework
‣ Dojo ‣ PEAR
‣ Mootools ‣ CodeIgniter

5. Was leisten Frameworks?
‣ Nehmen die Grundarbeit ab
‣ Sorgen für Bugfixes
‣ Erfordern Einarbeitung und haben Coding-
Guidelines
‣ Erleichtern die Arbeit im Team
‣ Erleichtern die Übernahme der Arbeit anderer
‣ Lassen mehr Zeit für Kreativität
‣ Sind kein Korsett sondern eine Hilfestellung

6. Viele Frameworks

7. Die feindliche Umgebung

8. Frameworks
in der Praxis

9. Blueprint

10. YAML

11. YAML

12. YUI Library

13. YAML

14. Eigenschaften
‣ Webstandards und Barrierefreiheit
‣ Schlanker Kern mit Erweiterungen
‣ robust und flexibel
‣ Erweiterungen für Typographie, Formulare,
Mikroformate, RTL-Unterstützung
‣ fixe, elastische und fluide Layouts
‣ Grids wenn man will, muss aber nicht

15. <div class="page_margins">
<div class="page">
<div id="header" role="banner">
<div id="topnav" role="contentinfo">
<!-- Metanavigation -->
</div>
<div id="nav" role="navigation">
<div class="hlist">
<!-- -->
</div>
</div>
<div id="main">
<div id="col1" role="complementary">
<div id="col1_content" class="clearfix">
<!-- Hier kommt Inhalt hin -->
</div>
</div>
<div id="col2" role="complementary">
<div id="col2_content" class="clearfix">
<!-- Hier kommt Inhalt hin -->
</div>
</div>
<div id="col3" role="main">
<div id="col3_content" class="clearfix">
<!-- Hier kommt Inhalt hin -->
</div>
<div id="ie_clearing">&nbsp;</div>
</div>
</div>
<div id="footer" role="contentinfo">
<!-- Hier kommt Inhalt hin -->
</div>
</div>
</div>

16. Die XHTML-Struktur

17. Layoutvarianten

18. Layoutvarianten

19. Freie Spaltenanordnung

20. Subtemplates
<!-- Subtemplate: 2 Spalten mit 50/50 Teilung -->
<div class="subcolumns">
<div class="c50l">
<div class="subcl">
<!-- Inhalt linker Block -->
...
</div>
</div>
<div class="c50r">
<div class="subcr">
<!-- Inhalt rechter Block -->
...
</div>
</div>
</div>
‣ 50% / 50% Teilung (Klassen c50l und c50r)
‣ 33% / 66% Teilung (Klassen c33l und c66r sowie c66l und c33r)
‣ 25% / 75% Teilung (Klassen c25l und c75r sowie c75l und c25r)
‣ Goldener Schnitt (Klassen c38l und c62r sowie c62l und c38r)

23. CSS-Bausteine

24. Fertige Lösungen

25. /**
* @section clearing methods
*/
/* (de) Clearfix-Methode zum Clearen der Float-Umgebungen */
.clearfix:after{clear:both;content:".";display:block;font-size:0;height:0;visibility:hidden;}
/* (de) Diese Angabe benötigt der Safari-Browser zwingend !! */
.clearfix { display: block; }
/* (de) Overflow-Methode zum Clearen der Float-Umgebungen */
.floatbox { overflow: hidden; }
/* (de) IE-Clearing: Benötigt nur der Internet Explorer und über iehacks.css zugeschaltet */
#ie_clearing { display: none; }
/**
* @section Versteckte Elemente
* (de) Skip-Links und versteckte Inhalte
*/
/* (de) Klassen für unsichtbare Elemente im Basislayout */
.skip,.hideme,.print{position:absolute;top:-32768px;left:-32768px;}
/* (de) Skip-Links für Tab-Navigation sichtbar schalten */
.skip:focus,.skip:active{position:static;top:0;left:0;}
/* skiplinks:technical setup */
#skiplinks{position:absolute;top:0px;left:-32768px;z-index:1000;width:100%;margin:0;padding:0;list-style-type:none;}
#skiplinks a.skip:focus,
#skiplinks a.skip:active{left:32768px;outline:0 none;position:absolute;width:100%;}

26. /**
* Generic Content Classes
* (de) Standardklassen zur Positionierung und Hervorhebung
*/
.highlight { color:#c30; }
.dimmed { color:#888; }
.info { background:#f8f8f8; color:#666; padding:10px; margin-bottom:0.5em; font-size:91.7%; }
.note { background:#efe; color:#040; border:2px #484 solid; padding:10px; margin-bottom:1em; }
.important { background:#ffe; color:#440; border:2px #884 solid; padding:10px; margin-bottom:1em; }
.warning { background:#fee; color:#400; border:2px #844 solid; padding:10px; margin-bottom:1em; }
.float_left { float:left; display:inline; margin-right:1em; margin-bottom:0.15em; }
.float_right { float:right; display:inline; margin-left:1em; margin-bottom:0.15em; }
.center { display:block; text-align:center; margin:0.5em auto; }

27. Mikroformate

28. Tabs mit jQuery

29. Gleiche Höhe

30. Navigationen

31. YAML in der Praxis

32. CSS einbinden
<head>
<link href="css/layout_3col_standard.css" rel="stylesheet" type="text/css"/>
<!--[if lte IE 7]>
<link href="css/patches/patch_3col_standard.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
/* import core styles | Basis-Stylesheets */
@import url(../yaml/core/base.css);
/* import screen layout | Screen-Layout einbinden */
@import url(../yaml/navigation/nav_shinybuttons.css);
@import url(screen/basemod.css);
@import url(screen/content.css);
/* import print layout | Druck-Layout einbinden */
@import url(../yaml/print/print_003_draft.css);
@import url(core/slim_base.css);
@import url(screen/basemod.css);

33. Eigene Subcolumns

38. /**
* @section Own Grids
* @note Grid: 9 columns, 8 gaps, width: 980px (but still possibility to be flexible)
* @author Jens Grochtdreis [http://grochtdreis.de]
* @date 14.08.2010
*/
@media screen {
.subcolumns .subc { margin: 0 10px; padding: 0; overflow-x: hidden; }
.subcolumns .subcl { margin: 0 0 0 10px; padding: 0; overflow-x: hidden;}
.subcolumns .subcr { margin: 0 10px 0 0; padding: 1.5em 0 0 0;overflow-x: hidden;}
#home .subcolumns .subcr, #sitemap .subcolumns .subcr {padding-top: 0;}
.c1-9l, .c15-9l, .c2-9l, .c3-9l, .c4-9l, .c5-9l, .c6-9l, .c7-9l, .c8-9l {float: left;}
.c1-9r, .c2-9r, .c3-9r, .c4-9r, .c5-9r, .c6-9r, .c7-9r, .c8-9r {float: right; margin-left: -5px;}
.c1-9l {width: 11.11%;} /* 1 column {width: 110px;} */
.c15-9l {width: 16.33%;} /* 1.5x columns {width: 160px;} */
.c2-9l {width: 22.45%;} /* 2 columns {width: 220px;} */
.c3-9l {width: 33.67%;} /* 3 columns {width: 330px;} */
.c4-9l {width: 44.90%;} /* 4 columns {width: 440px;} */
.c5-9l {width: 56.21%;} /* 5 columns {width: 550px;} */
.c6-9l {width: 67.35%;} /* 6 columns {width: 660px;} */
.c7-9l {width: 78.57%;} /* 7 columns {width: 770px;} */
.c8-9l {width: 89.80%;} /* 8 columns {width: 880px;} */
.c1-9r {width: 10.20%;} /* 1 column {width: 100px;} */
.c2-9r {width: 21.43%;} /* 2 columns {width: 210px;} */
.c3-9r {width: 32.65%;} /* 3 columns {width: 320px;} */
.c4-9r {width: 43.88%;} /* 4 columns {width: 430px;} */
.c5-9r {width: 55.10%;} /* 5 columns {width: 540px;} */
.c6-9r {width: 66.33%;} /* 6 columns {width: 650px;} */
.c7-9r {width: 77.55%;} /* 7 columns {width: 760px;} */
.c8-9r {width: 88.78%;} /* 8 columns {width: 870px;} */
.c9-9 {margin: 1em 10px;}
}

39. /**
* (en) IE-Adjustments for content columns and subtemplates
* @see iehacks.css in yaml/core for more comments
*/
.c1-9l, .c15-9l, .c2-9l, .c3-9l, .c4-9l, .c5-9l, .c6-9l, .c7-9l, .c8-9l,
.c1-9r, .c2-9r, .c3-9r, .c4-9r, .c5-9r, .c6-9r, .c7-9r, .c8-9r {display: inline;}
.equalize .c1-9l, .equalize .c15-9l, .equalize .c2-9l, .equalize .c3-9l, .equalize .c4-9l,
.equalize .c5-9l, .equalize .c6-9l, .equalize .c7-9l, .equalize .c8-9l {float:left; display:inline;
padding-bottom:32767px; margin-bottom:-32767px;}
.equalize .c1-9r, .equalize .c2-9r, .equalize .c3-9r, .equalize .c4-9r, .equalize .c5-9r,
.equalize .c6-9r, .equalize .c7-9r, .equalize .c8-9r { float:right; margin-left:-5px; display:inline;
padding-bottom:32767px; margin-bottom:-32767px;}
.no-ie-padding .c1-9l, .no-ie-padding .c15-9l, .no-ie-padding .c2-9l, .no-ie-padding .c3-9l,
.no-ie-padding .c4-9l, .no-ie-padding .c5-9l, .no-ie-padding .c6-9l, .no-ie-padding .c7-9l,
.no-ie-padding .c8-9l, .no-ie-padding .c1-9r, .no-ie-padding .c2-9r, .no-ie-padding .c3-9r,
.no-ie-padding .c4-9r, .no-ie-padding .c5-9r, .no-ie-padding .c6-9r, .no-ie-padding .c7-9r,
.no-ie-padding .c8-9r {padding-bottom:0; margin-bottom:0;}

40. Formulare

44. Jens Grochtdreis
http://grochtdreis.de
http://twitter.com/Flocke
http://webkrauts.de
Diese Präsentation steht unter
der Creative Commons Lizenz
„Attribution-ShareAlike 2.0“
http://creativecommons.org/licenses/by-sa/2.0/de/