yaml templates in typolight - contao · yaml templates in typolight creating typolight templates...
TRANSCRIPT
![Page 1: YAML templates in TYPOlight - Contao · YAML templates in TYPOlight Creating TYPOlight templates using the YAML CSS framework Helmut Schottmüller, TYPOlight User-Meeting 2008](https://reader031.vdocuments.site/reader031/viewer/2022020109/5b6a27b47f8b9af6098bc0da/html5/thumbnails/1.jpg)
YAML templates in TYPOlight
Creating TYPOlight templates using the YAML CSS framework
Helmut Schottmüller, TYPOlight User-Meeting 2008
![Page 2: YAML templates in TYPOlight - Contao · YAML templates in TYPOlight Creating TYPOlight templates using the YAML CSS framework Helmut Schottmüller, TYPOlight User-Meeting 2008](https://reader031.vdocuments.site/reader031/viewer/2022020109/5b6a27b47f8b9af6098bc0da/html5/thumbnails/2.jpg)
Motivation
• My site looks different in every web browser...
• I want flexible layouts. Is there any construction kit available?
• I want to create standard compliant and accessible websites
![Page 4: YAML templates in TYPOlight - Contao · YAML templates in TYPOlight Creating TYPOlight templates using the YAML CSS framework Helmut Schottmüller, TYPOlight User-Meeting 2008](https://reader031.vdocuments.site/reader031/viewer/2022020109/5b6a27b47f8b9af6098bc0da/html5/thumbnails/4.jpg)
IntroductionWhat is YAML?
• A flexible, accessible layout based on floats
• Cross-browser compatible layout display
• The fewest possible restrictions
• Any order columns
• Stylesheet templates ordered by function
• Subtemplates
What is YAML not?
• YAML is not a prepackaged layout
• Individual adaptations are desired and necessary
![Page 5: YAML templates in TYPOlight - Contao · YAML templates in TYPOlight Creating TYPOlight templates using the YAML CSS framework Helmut Schottmüller, TYPOlight User-Meeting 2008](https://reader031.vdocuments.site/reader031/viewer/2022020109/5b6a27b47f8b9af6098bc0da/html5/thumbnails/5.jpg)
Introduction
Accessibilty and web standards
• Valid XHTML code and valid stylesheets
• Doing without layout tables
• Applying variable size units
• Skip Link Navigation
• Extensive browser support
![Page 6: YAML templates in TYPOlight - Contao · YAML templates in TYPOlight Creating TYPOlight templates using the YAML CSS framework Helmut Schottmüller, TYPOlight User-Meeting 2008](https://reader031.vdocuments.site/reader031/viewer/2022020109/5b6a27b47f8b9af6098bc0da/html5/thumbnails/6.jpg)
![Page 7: YAML templates in TYPOlight - Contao · YAML templates in TYPOlight Creating TYPOlight templates using the YAML CSS framework Helmut Schottmüller, TYPOlight User-Meeting 2008](https://reader031.vdocuments.site/reader031/viewer/2022020109/5b6a27b47f8b9af6098bc0da/html5/thumbnails/7.jpg)
CSS components
• Positioning of the main areas of the web page
• Screen layout: design of the main areas
• Formatting of the content
• Design of the navigational elements
• Print templates
• Bugfixes
![Page 8: YAML templates in TYPOlight - Contao · YAML templates in TYPOlight Creating TYPOlight templates using the YAML CSS framework Helmut Schottmüller, TYPOlight User-Meeting 2008](https://reader031.vdocuments.site/reader031/viewer/2022020109/5b6a27b47f8b9af6098bc0da/html5/thumbnails/8.jpg)
CSS components
![Page 9: YAML templates in TYPOlight - Contao · YAML templates in TYPOlight Creating TYPOlight templates using the YAML CSS framework Helmut Schottmüller, TYPOlight User-Meeting 2008](https://reader031.vdocuments.site/reader031/viewer/2022020109/5b6a27b47f8b9af6098bc0da/html5/thumbnails/9.jpg)
CSS components
![Page 10: YAML templates in TYPOlight - Contao · YAML templates in TYPOlight Creating TYPOlight templates using the YAML CSS framework Helmut Schottmüller, TYPOlight User-Meeting 2008](https://reader031.vdocuments.site/reader031/viewer/2022020109/5b6a27b47f8b9af6098bc0da/html5/thumbnails/10.jpg)
CSS componentsBase stylesheet
<head>... <link href="css/my_layout.css" rel="stylesheet" type="text/css"/>...</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);
<head>
...
<!--[if lte IE 7]><link href="css/patches/patch_my_layout.css" rel="stylesheet" type="text/css" /><![endif]-->...
</head>
![Page 11: YAML templates in TYPOlight - Contao · YAML templates in TYPOlight Creating TYPOlight templates using the YAML CSS framework Helmut Schottmüller, TYPOlight User-Meeting 2008](https://reader031.vdocuments.site/reader031/viewer/2022020109/5b6a27b47f8b9af6098bc0da/html5/thumbnails/11.jpg)
CSS componentsLayout Skeleton
• Margins
• Page
• Header
• Top navigation
• Navigation
• Main content
‣ Column 1 (float)
‣ Column 2 (float)
‣ Column 3 (statisch)
• Footer
#page_margins#page
#header
#nav
#main
#footer
#col1 #col2#col3
#topnav
![Page 12: YAML templates in TYPOlight - Contao · YAML templates in TYPOlight Creating TYPOlight templates using the YAML CSS framework Helmut Schottmüller, TYPOlight User-Meeting 2008](https://reader031.vdocuments.site/reader031/viewer/2022020109/5b6a27b47f8b9af6098bc0da/html5/thumbnails/12.jpg)
CSS componentsIndividual layout definitions
• Individual layout definitions by changing the base stylesheet
‣ By modifying the relevant containers #page_margins, #page, #header, #topnav, #main, #footer
‣ By modifying and formatting the content containers #col1, col1_content, #col2, #col2_content, #col3, #col3_content
![Page 13: YAML templates in TYPOlight - Contao · YAML templates in TYPOlight Creating TYPOlight templates using the YAML CSS framework Helmut Schottmüller, TYPOlight User-Meeting 2008](https://reader031.vdocuments.site/reader031/viewer/2022020109/5b6a27b47f8b9af6098bc0da/html5/thumbnails/13.jpg)
CSS componentsNavigation components
Sliding Door Navigation
Shiny Buttons Navigation
Vertical List Navigation
![Page 14: YAML templates in TYPOlight - Contao · YAML templates in TYPOlight Creating TYPOlight templates using the YAML CSS framework Helmut Schottmüller, TYPOlight User-Meeting 2008](https://reader031.vdocuments.site/reader031/viewer/2022020109/5b6a27b47f8b9af6098bc0da/html5/thumbnails/14.jpg)
CSS componentsLayout Adjustments for Printing
• 7 print stylesheets to print out every combination of columns
• Automatic Display of URLs
• Automatic decoration of acronyms and abbreviations
• Optional column labeling for print output
![Page 15: YAML templates in TYPOlight - Contao · YAML templates in TYPOlight Creating TYPOlight templates using the YAML CSS framework Helmut Schottmüller, TYPOlight User-Meeting 2008](https://reader031.vdocuments.site/reader031/viewer/2022020109/5b6a27b47f8b9af6098bc0da/html5/thumbnails/15.jpg)
Practice
• In addition to the documentation, the examples folder in the YAML download package contains a great number of prefabricated sample layouts
• Variable Order and Use of Content Columns
• Much freer use of content blocks with SUBTEMPLATES
![Page 16: YAML templates in TYPOlight - Contao · YAML templates in TYPOlight Creating TYPOlight templates using the YAML CSS framework Helmut Schottmüller, TYPOlight User-Meeting 2008](https://reader031.vdocuments.site/reader031/viewer/2022020109/5b6a27b47f8b9af6098bc0da/html5/thumbnails/16.jpg)
PracticeSubtemplates
.c75l .c25r
.c75r.c25l
.c66l .c33r
.c66r.c33l
.c62l
.c62r
.c38r
.c38r
.c50l .c50r
.c33l .c33r .c33r
<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>
Predefined classes for flexible arrangements
![Page 17: YAML templates in TYPOlight - Contao · YAML templates in TYPOlight Creating TYPOlight templates using the YAML CSS framework Helmut Schottmüller, TYPOlight User-Meeting 2008](https://reader031.vdocuments.site/reader031/viewer/2022020109/5b6a27b47f8b9af6098bc0da/html5/thumbnails/17.jpg)
License conditions
• Creative Commons Attribution 2.0 License (CC-A 2.0)
• Permits both the non-commercial and the commercial use of the framework
• Non-commercial use: Backlink to the YAML homepage in a suitable place (footer or imprint)
• Without backlink: Project Related License 59 €, General License 119 €
![Page 18: YAML templates in TYPOlight - Contao · YAML templates in TYPOlight Creating TYPOlight templates using the YAML CSS framework Helmut Schottmüller, TYPOlight User-Meeting 2008](https://reader031.vdocuments.site/reader031/viewer/2022020109/5b6a27b47f8b9af6098bc0da/html5/thumbnails/18.jpg)
Somehow complicated
but there is...
CSS
floatheader
#navfooter
![Page 19: YAML templates in TYPOlight - Contao · YAML templates in TYPOlight Creating TYPOlight templates using the YAML CSS framework Helmut Schottmüller, TYPOlight User-Meeting 2008](https://reader031.vdocuments.site/reader031/viewer/2022020109/5b6a27b47f8b9af6098bc0da/html5/thumbnails/19.jpg)
YAML Builder
• Edit all essential layout settings directly in the builder
• Add predefined content elements by drag & drop
• Add subtemplates by drag & drop
• Code generation for XHTML and all needed CSS classes compliant with the „Simple Project Example“
![Page 20: YAML templates in TYPOlight - Contao · YAML templates in TYPOlight Creating TYPOlight templates using the YAML CSS framework Helmut Schottmüller, TYPOlight User-Meeting 2008](https://reader031.vdocuments.site/reader031/viewer/2022020109/5b6a27b47f8b9af6098bc0da/html5/thumbnails/20.jpg)
YAML BuilderHow to build it?
![Page 21: YAML templates in TYPOlight - Contao · YAML templates in TYPOlight Creating TYPOlight templates using the YAML CSS framework Helmut Schottmüller, TYPOlight User-Meeting 2008](https://reader031.vdocuments.site/reader031/viewer/2022020109/5b6a27b47f8b9af6098bc0da/html5/thumbnails/21.jpg)
YAML BuilderHow to build it?
![Page 22: YAML templates in TYPOlight - Contao · YAML templates in TYPOlight Creating TYPOlight templates using the YAML CSS framework Helmut Schottmüller, TYPOlight User-Meeting 2008](https://reader031.vdocuments.site/reader031/viewer/2022020109/5b6a27b47f8b9af6098bc0da/html5/thumbnails/22.jpg)
YAML BuilderHow to build it?
![Page 23: YAML templates in TYPOlight - Contao · YAML templates in TYPOlight Creating TYPOlight templates using the YAML CSS framework Helmut Schottmüller, TYPOlight User-Meeting 2008](https://reader031.vdocuments.site/reader031/viewer/2022020109/5b6a27b47f8b9af6098bc0da/html5/thumbnails/23.jpg)
YAML BuilderHow to build it?
![Page 24: YAML templates in TYPOlight - Contao · YAML templates in TYPOlight Creating TYPOlight templates using the YAML CSS framework Helmut Schottmüller, TYPOlight User-Meeting 2008](https://reader031.vdocuments.site/reader031/viewer/2022020109/5b6a27b47f8b9af6098bc0da/html5/thumbnails/24.jpg)
YAML BuilderBuild it in reality - Demonstration
http://builder.yaml.de