Einfuehrung in YAML (2010)

download Einfuehrung in YAML (2010)

of 44

  • date post

    22-May-2015
  • Category

    Technology

  • view

    2.405
  • download

    1

Embed Size (px)

description

Einfuehrung in das XHTML/CSS-Framework YAML

Transcript of Einfuehrung in YAML (2010)

  • Einfhrung in YAML

  • Frontendentwickler 10 Jahre Agenturerfahrung11 Jahre Arbeit im und frs WebGrnder der WebkrautsBloggerAutor fr: 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 fr Bugfixes Erfordern Einarbeitung und haben Coding-

    Guidelines

    Erleichtern die Arbeit im Team Erleichtern die bernahme der Arbeit anderer Lassen mehr Zeit fr Kreativitt 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 fr Typographie, Formulare,

    Mikroformate, RTL-Untersttzung

    fixe, elastische und fluide Layouts Grids wenn man will, muss aber nicht

  • Die XHTML-Struktur

  • Layoutvarianten

  • Layoutvarianten

  • Freie Spaltenanordnung

  • Subtemplates

    ...

    ...

    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 Lsungen

  • /** * @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 bentigt der Safari-Browser zwingend !! */ .clearfix { display: block; }

    /* (de) Overflow-Methode zum Clearen der Float-Umgebungen */ .floatbox { overflow: hidden; }

    /* (de) IE-Clearing: Bentigt nur der Internet Explorer und ber iehacks.css zugeschaltet */ #ie_clearing { display: none; }

    /*** @section Versteckte Elemente* (de) Skip-Links und versteckte Inhalte*/

    /* (de) Klassen fr unsichtbare Elemente im Basislayout */.skip,.hideme,.print{position:absolute;top:-32768px;left:-32768px;}

    /* (de) Skip-Links fr 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 Hhe

  • 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);

  • 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 Prsentation steht unter der Creative Commons Lizenz Attribution-ShareAlike 2.0 http://creativecommons.org/licenses/by-sa/2.0/de/