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.
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
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
). The CSS file
implements the custom styles used for the website. Same as
The only file inside the
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
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
, which is explained
in more detail in the next section.
File ‘index.html’ ¶
A typical HTML document consists of a
parts are wrapped by the
tags as shown below.
<html> <head> ... </head> <body> ... </body> </html>
At this point, we only need to focus on the
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.