Attention

TYPO3 v9 has reached its end-of-life September 30th, 2021 and is not maintained by the community anymore. Looking for a stable version? Use the version switch on the top left.

You can order Extended Long Term Support (ELTS) here: TYPO3 ELTS.

Design Template¶

External Resources¶

A typical use case of developing a standard website includes the implementation of the visual appearance of the site. In most cases this is a set of HTML and CSS files, as well as some images, e.g. a company logo, etc. As of today, modern frameworks build a perfect foundation and provide features such as clean, structured layouts, mobile responsiveness and compatibility across a wide range of web browsers.

The project discussed in this tutorial uses the well-known and popular Bootstrap framework version 4 and jQuery version 3. Both are not mandatory for a sitepackage in TYPO3 as such and can be replaced with similar frameworks or JavaScript libraries as required by the individual project.

Directory Structure¶

Let's assume, we have the following directories and files, which represent a typical website theme as we know it from a static website.

theme/css/
theme/css/bootstrap.min.css
theme/css/website.css
theme/images/
theme/images/logo.png
theme/js/
theme/js/bootstrap.min.js
theme/js/jquery-3.2.1.min.js
theme/js/website.js
theme/index.html

The two CSS and JavaScript files bootstrap.min.css and bootstrap.min.js belong to the Bootstrap framework. As a matter of fact, these files can be ignored (we will include the Bootstrap framework using TypoScript as shown in section TypoScript Setup). The CSS file website.css implements the custom styles used for the website. Same as the JavaScript file website.js, which contains custom JavaScript code. The only file inside the images/ directory is a simple logo. Let's assume this is a square image of 100px width by 100px height.

Another file we can ignore is the jQuery library jquery-3.2.1.min.js in the js/ directory. Due to the fact that there is a better way to include external libraries in TYPO3, we do not need to worry about this library either.

This leaves us with the remaining file index.html, which is explained in more detail in the next section.

File 'index.html'¶

A typical HTML document consists of a header and a body section. These parts are wrapped by the <html> ... </html> tags as shown below.

<html>
   <head>
      ...
   </head>
   <body>
      ...
   </body>
</html>

At this point, we only need to focus on the <body> ... </body> part.

The next section of this tutorial describes how the design templates are converted into "Fluid" templates, which can be used by TYPO3 to render the theme.