44
Einführung in YAML

Einfuehrung in YAML (2010)

Embed Size (px)

DESCRIPTION

Einfuehrung in das XHTML/CSS-Framework YAML

Citation preview

Page 1: Einfuehrung in YAML (2010)

Einführung in YAML

Page 2: Einfuehrung in YAML (2010)

‣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

Jens Grochtdreis

Page 3: Einfuehrung in YAML (2010)

Nicht das Rad immer wieder neu erfinden!

Page 4: Einfuehrung in YAML (2010)

‣ Javascript

‣ Prototype

‣ jQuery

‣ Dojo

‣ Mootools

‣ PHP

‣ CakePHP

‣ ZendFramework

‣ PEAR

‣ CodeIgniter

Frameworks

Page 5: Einfuehrung in YAML (2010)

‣ 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

Was leisten Frameworks?

Page 6: Einfuehrung in YAML (2010)

Viele Frameworks

Page 7: Einfuehrung in YAML (2010)

Die feindliche Umgebung

Page 8: Einfuehrung in YAML (2010)

Frameworks in der Praxis

Page 9: Einfuehrung in YAML (2010)

Blueprint

Page 10: Einfuehrung in YAML (2010)

YAML

Page 11: Einfuehrung in YAML (2010)

YAML

Page 12: Einfuehrung in YAML (2010)

YUI Library

Page 13: Einfuehrung in YAML (2010)

YAML

Page 14: Einfuehrung in YAML (2010)

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

Page 15: Einfuehrung in YAML (2010)

<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>

Page 16: Einfuehrung in YAML (2010)

Die XHTML-Struktur

Page 17: Einfuehrung in YAML (2010)

Layoutvarianten

Page 18: Einfuehrung in YAML (2010)

Layoutvarianten

Page 19: Einfuehrung in YAML (2010)

Freie Spaltenanordnung

Page 20: Einfuehrung in YAML (2010)

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)

Page 21: Einfuehrung in YAML (2010)
Page 22: Einfuehrung in YAML (2010)
Page 23: Einfuehrung in YAML (2010)

CSS-Bausteine

Page 24: Einfuehrung in YAML (2010)

Fertige Lösungen

Page 25: Einfuehrung in YAML (2010)

/** * @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%;}

Page 26: Einfuehrung in YAML (2010)

/** * 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; }

Page 27: Einfuehrung in YAML (2010)

Mikroformate

Page 28: Einfuehrung in YAML (2010)

Tabs mit jQuery

Page 29: Einfuehrung in YAML (2010)

Gleiche Höhe

Page 30: Einfuehrung in YAML (2010)

Navigationen

Page 31: Einfuehrung in YAML (2010)

YAML in der Praxis

Page 32: Einfuehrung in YAML (2010)

CSS einbinden

/* 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);

<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>

Page 33: Einfuehrung in YAML (2010)

Eigene Subcolumns

Page 34: Einfuehrung in YAML (2010)
Page 35: Einfuehrung in YAML (2010)
Page 36: Einfuehrung in YAML (2010)
Page 37: Einfuehrung in YAML (2010)
Page 38: Einfuehrung in YAML (2010)

/** * @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;}}

Page 39: Einfuehrung in YAML (2010)

/** * (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;}

Page 40: Einfuehrung in YAML (2010)

Formulare

Page 41: Einfuehrung in YAML (2010)
Page 42: Einfuehrung in YAML (2010)
Page 43: Einfuehrung in YAML (2010)
Page 44: Einfuehrung in YAML (2010)

Jens Grochtdreishttp://grochtdreis.de

http://twitter.com/Flockehttp://webkrauts.de

Diese Präsentation steht unter der Creative Commons Lizenz „Attribution-ShareAlike 2.0“ http://creativecommons.org/licenses/by-sa/2.0/de/