Upload
jens-grochtdreis
View
2.416
Download
1
Embed Size (px)
DESCRIPTION
Einfuehrung in das XHTML/CSS-Framework YAML
Citation preview
Einführung in YAML
‣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
Nicht das Rad immer wieder neu erfinden!
‣ Javascript
‣ Prototype
‣ jQuery
‣ Dojo
‣ Mootools
‣ PHP
‣ CakePHP
‣ ZendFramework
‣ PEAR
‣ CodeIgniter
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
Was leisten Frameworks?
Viele Frameworks
Die feindliche Umgebung
Frameworks in der Praxis
Blueprint
YAML
YAML
YUI Library
YAML
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
<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"> </div> </div>
</div>
<div id="footer" role="contentinfo"> <!-- Hier kommt Inhalt hin --> </div>
</div></div>
Die XHTML-Struktur
Layoutvarianten
Layoutvarianten
Freie Spaltenanordnung
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)
CSS-Bausteine
Fertige Lösungen
/** * @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%;}
/** * 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; }
Mikroformate
Tabs mit jQuery
Gleiche Höhe
Navigationen
YAML in der Praxis
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>
Eigene Subcolumns
/** * @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;}}
/** * (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;}
Formulare
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/