Setup

Welcome to your new project. This page will assist you on your journey to an amazing website. Please read and follow all instructions on this page carefully. Happy developing!

Linking External Code

When starting a project first make sure to duplicate the template folder on the FTP-Server, name it with the company name of the client and correctly link all of the files below.

Don't know how to access the FTP-Server? Contact your Project Manager for instructions.

style.css

The stylesheet is located as a symbol of every single page of the website. it should be as far up as possible. The URL can be changed by editing the embed element inside of the symbol.

globalscript.js

The globalscript file can be found under Project Settings > Custom Code > Footer Code.

current-page.js

The page specific script files should be added to every page where specific custom code is needed. The filename should reflect the page the file is located like this: home-page.js, referenzen-page.js, cms-referenzen-page.js and so on.

Styleguide

Style all elements in this list in order to perfectly set up your project for development. You will also find useful prebuilt classes and elements in here which will assist you on your development process.

Global Styles

Body (All Pages)

All H1 Headings

Test

All H2 Headings

Für die Montage

All H3 Headings

Wir freuen uns, dass Sie sich für unsere Dienstleistungen interessieren.

All H4 Headings

Lorem ipsum dolor sit amet

All H5 Headings

Lorem ipsum dolor sit amet

All H6 Headings

Lorem ipsum dolor sit amet

All Paragraphs

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

All Bolds

Bold

All Italics

Italic

All Links

Link

All Images

Buttons

Buttons should always be nested inside of a utl__button__container in order to align it properly and also to be able to have multiple ones next to each other.

utl__button

Mehr erfahren

utl__button

outline

Mehr erfahren

utl__button

grey

Mehr erfahren

utl__button

neg-outline

Mehr erfahren

utl__button

neg-grey

Mehr erfahren

utl__button

small

Mehr erfahren

utl__button

small

grey

Mehr erfahren

utl__button

small

black

Mehr erfahren

utl__button

small

white

Mehr erfahren

utl__button

small

neg-grey

Mehr erfahren

Color Swatches

Primary

Primary Hover

Black

Text Medium

Text Light

Border

Background

White

Secondary

Secondary Hover

Text Full

Box

Box Hover

Button Grey

Button Grey Hover

Icons

All interface icons need to be importet as inline svg with the fill or stroke set to currentColor. This way their color can more easily be changed right in webflow. We suggest to use icons from the Relume Icon library. preferably the ones from Google Material Icons. You can find all icons right here: https://icons.relume.io/collection/ic?s.

The size of the Icons per default should be controlled by the fontsize of the parent container. Exceptions are allowed.

Place all the required icons for the design down below for later use.

utl__icon-embed

Rich Text Field

Be aware: some of the styling done for the Rich Text Field comes from the Stylesheet and cannot be changed from inside webflow.

utl__rich-text

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et this is a Link aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor this is Bold et dolore magna this is cursive, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Numbered List

How to add a Rich text element to your site
How to add and format text content
How to add media content, custom code, and lists
How to style content in a Rich text element

Static and dynamic content editing

bullet point list 1
bullet point list 2
bullet point list 3
bullet point list 4

This is a quote

utl__rich-text__flat

Lorem ipsum dolor sit amet

Numbered List

How to add a Rich text element to your site
How to add and format text content
How to add media content, custom code, and lists
How to style content in a Rich text element

Static and dynamic content editing

bullet point list 1
bullet point list 2
bullet point list 3
bullet point list 4

This is a quote

Header Elements

Preheading

Heading

Preheading

Heading

Preheading

Heading

Divider

Basic Section Template

Popup Template

Add and remove the Class hidden on the utl-modal to show and hide the popup. The hidden state can be changed in the style.css.

Guides and Rules

In order to correctly develop any project with Astro you must follow the following Guides and Rules. They will make sure your project is in line with all other projects created with the Astro Design System and can be worked on by other developers and clients in the future.

General

Line height

Line height should always be defined with the unitless unit (as seen on this page) so that is scales responsively with the font size.

Letter spacing

Letter spacing should always be defined with the em unit so that is scales responsively with the font size.

Images

Images should always be placed as an img element and never as a background-img.

vh unit

The vh unit should be avoided as much as possible since it causes unwanted jumps on android devices when changing scroll direction.

CSS > Interactions

Custom CSS over the external stylesheet should be prioritised over Webflow interactions when ever possible. With the help of CSS Selectors a lot can be achieved and with our Boilerplate, Codeblocks and more you should almost never need to resort to Webflow Interactions ever again. Learn more about the possibilities of CSS Selectors right here.

Off limits Webflow Elements

‍The following Elements inside the Webflow Elements panel should never be used:

Section

Container

Columns

Button

Navbar

Slider

Eeverything from the Layouts Panel is also off limits.

Clean Designer

A clean Designer which allows other developers to make changes without adding errors to the page is mandatory. This means:
– No Elements which first need to be hidden or change styling to see the other Elements in the Designer.
– No Elements which need to be displayed or change styling before publishing.

No unactive Combo Classes that get used by Scripts

When changing styling with a script you often have to create a Combo Class which only gets used on the active state. For instance a custom Popup which gets a Class of active which changes it to animate in in the center of the page. Because this Class is not added to the Element by default it will get deleted once someone presses Clean Up in the Style Manager.

No larger Breakpoints

Webflows larger Breakpoints needlessly complicate the development process and are a big source of errors. And thats why we don't use them. A well developed page looks good even when resizing the screen to a bigger width. When really needed more minor changes can still be made with Custom CSS.

no WebP

We don't use WebP for now since it's not supported on older devices and Webflow currently doesn't have a fallback solution.

Libraries and Ressources

These are all the libraries and ressources that are vetted and approved for the creation of websites with our Astro Design System. Other libraries and tools can still be used for different use cases.

Finsweet Attributes

Learn more

Finsweet Extension for Webflow (Chrome)

Learn more

Codeblocks by ESE Agency

Learn more

Swiper.js – Javascript Slider

Learn more

Plyr.io – Video Player

Learn more

Isotope – Complex Javascript Filtering

Learn more

Clear Cache – For updating changes on the style.css in the Designer

Learn more

CSS Naming Scheme

With Astro every element with custom styling needs to have a Class name following this naming scheme. Spaces and uppercase letters are strictly forbidden and we also advice to only use Combo Classes sparingly.

Basics

h-hero__heading

Indicates the page this Section is used on and should be as short as possible.
Here are a list of letters you could use:
‍
h home
uu Über uns
k Kontakt
ref Referenzen
c-ref Referenzen (CMS Page)
dl Dienstleistungen
j Jobs/Karriere

h-hero__heading

The hyphen divides the page indicator and the section indicator of the class.

h-hero__heading

Indicates the type of Section this is. One page should only have one of each type.
Here are a list of words you could use:
‍
hero Catchy start to a Page
usp Unique Selling Point (usually 3 or more reasons why you should work with the client)
cta Call To Action (Section at the end to make the user do what you want him to)
map Map with the clients location
faq Frequently Asked Questions
blog Shorter list of blog articles

h-hero__heading

The two underlines get used to go down the Element tree from the Section name to the element we're currently naming.

h-hero__heading

Indicates the role of the Element we're giving this Class to.
Here are a list of words you could use:
‍
preheading Smaller headline over the main heading
heading Main heading
subheading Smaller headline under the main heading
copy normal paragraph
section Section going over the full width of the page
container Container inside the section usually to limit the max-width and set the padding on the left and right
column Column to divide blocks that are positioned next to eachother

Collection Lists

h-ref__collection__item

For the three Elements of the Collection List the collection in the class name is mandatory.

h-ref__collection__item

In Collection Lists Webflow automatically creates a structure with 3 layers for you. We name these Elements the following way:

container Collection List Wrapper
wrapper Collection List
Item Collection Item

Reusable Elements

faq__heading

If the Section your building gets reused over multiple pages you don't need to set the page specific letter(s) at the start. in this case the name of the Section is enough.

Utility Classes

utl__section

For Elements which are an essential part over the whole website we use the utl identifier at the beginning to indicate it's use. You can find some of the default Utility Classes on the Stylesheet Tab.

utl__section

h-ref__spacing

If a global Element need to be modified for only the current Section, the Section identifier needs to be added at the start of the Combo Class.

Combo Classes

h-hero__heading

no-margin

If a global Element need to be modified for only the current Section, the Section identifier needs to be added at the start of the Combo Class.

General

Font has been bought, licenced and correctly uploaded.

All Forms have styled submit and error fields and are linked to the correct email address.

Are all Links linking to where they're supposed to.

SEO

Add the Combo Classes finished, error or not-required to the astro-doc__status block to indicate the status of the task.

Favicon and Webclip has been set.

At least the home page has a Open Graph Image.

Images are optimized for how they're used on the page (optimized pixel size and compressed with tinyjpg).

Google Tag Manager has been implemented.

Redirects for all url from the old website to the new pages have been uploaded.

robots.txt is set to disallow all pages where the crawler shouldn't have access to (including this one).

You got the green light from the ESE SEO Team (Title Tags, Alt Tags and Meta Descriptions are set).

CMS

All Collections are named with the correct german plural (check with german nativ speaker).

All Collection Fields are named correctly and logically (check with german nativ speaker).

All Collection Fields have the required description in accordance with this documentation.

All Collection Fields still serve a purpose and all the useless ones have been deleted from the collection.

All Collection Fields are linked to all the Elements on the page where their content should be displayed.

All Collection Lists have been filtered logically and in accordance with client expectations.

All Collection Lists have been sorted logically and in accordance with client expectations.

Testing

Website has been fully tested on an iOS device.

Website has been fully tested on an Android device.

Website has been fully tested in Safari.

Website has been fully tested in Google Chrome.

Website has been fully tested in Edge.