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.
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
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 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
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
This leaves us with the remaining file
index.html, which is explained
in more detail in the next section.
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.