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.

spacing.css

new

In Progress

unloaded.css

new

The unloaded stylesheet can be found under Project Settings > Custom Code > Head Code. This stylesheet is for CSS which should not be applied inside the designer. This can be very useful for things like showing overlays for page transitions without obstructing the viewport inside the designer.

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.

Add the combo class negativ to any of the astro-doc__row elements if you want to style a negative element.

Global Styles

Body (All Pages)

To see all styles applied to the body inside of this documentation you also will need to change the Class astro-doc__body-overwrite to be styled the same as the body. To do that, just select the Div Block below and change the font to the one you used for the body of the Project. You will see the font change down below on all elements.

Change my styles to be the same as the Body (All Pages)

All H1 Headings

Lorem ipsum dolor sit amet

All H2 Headings

Lorem ipsum dolor sit amet

All H3 Headings

Lorem ipsum dolor sit amet

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.

Always round the icon size up in the Embed Element to prevent browsers from cutting of content. The code should look like this width="12" height="12" viewBox="0 0 12 12" and not like this width="11.95" height="11.523" viewBox="0 0 11.95 11.523".

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

utl__icon-embed

When creating a link/button which only consists of an icon without any text use the UI – Icon Button Text Symbol to add a hidden descriptive text for better SEO. You can see a demonstration of this below (look in the Navigator to find the hidden Symbol).

Mail schreiben

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

Basic Section Template

Divider

Header Elements

Preheading

Heading

Preheading

Heading

Preheading

Heading

Modal/Popup Template

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

Use the function cbModalSetup() from the boilerplate.js to make the modals functional.

Make sure to give the modal a name by changing value of the attribute cb-modal-target on the utl-modal. You can open the modal by giving any element the attribute cb-modal-trigger and the modal you want to open as the value.

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.

Rules for Development

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.

Weglot Attributes NEW

When implementing Weglot always under Settings > Translation Exclusions add the parameter [fs-weglot-element=whitelist] and under Settings > Webflow > Dynamics elements add the parameter [fs-weglot-element=dynamic]. These two Attributes can then be used in Webflow to either exclude Elements from translation (ideal for things like numbers or the language Switcher itself) or to indicate to Weglot, that these Elements will dynamically change after the page is already loaded (for instance for looped Swipers).

Only one Navigation

Never add the list of navigation links twice. It can be tempting to just add another list of links for the burger menu on mobile or for the sticky version of the nav but this is a mistake and needs to be avoided. By structuring the HTML/CSS intelligently you should not need any duplication 99.9% of the time. Having the link list twice just adds a huge source of mistakes, especially if someone else needs to work on the project in the future.

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

Everything 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 inactive 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.

Image resolution (Pixel)

To optimize images they need to have the Image Resolution best suited for how they are used in the Project. Here are a few sizes which get used quite often.

Attention: Some images from the CMS get used multiple times over the page! The thumbnail for the blog article might only fill a quarter of the screen on the home page but once you go on the article page this same image gets displayed over the full width. Always prepare the images for the maximum size in which it gets displayed on the page.

Full Screen +

2500px (width)

For the biggest and most important images on each page we use the Full Screen + image resolution of 2500px in width. This results in a sharp but also very heavy image. Because of that this resolution should only be used sparingly on each page. We recommend no more than 3 times. Typical use cases for this resolution are hero images, cta background image etc.

Full Screen

2000px (width)

This is the regular size for images spanning over the full width of the browser. It's the sweet spot for good quality and small file size. This resolution typically gets used for referenzen hero image, history background image etc.

Container

1800px (width)

This resolution is for images which stop growing when the container reaches its max width. Typically this is used on all images for the aktuell/blog pages.

Half

1000px (width)

For images which at most fill half of the width of the screen.

Other

individual

Often times the images don't quite fit to any of the previous sizes. In this case you can also calculate the sizes yourself.

Just open the website and enlargen your browser as much as possible. Then press command + shift + 4 to take a screenshot. Make a screenshot from the exact size of the image. Right click the image on your desktop and click on "information". You'll find the images dimension in the new window. Round the numbers slightly to make them a bit easier to remember and share.

Attention: Never go over the Full Screen or Full Screen + resolutions if not absolutely necessary!

The height of each image is dependant on the width and the dimension of the image field in the design. You can use the calculator below to find the ideal height based on the dimensions from the design and the recommended width form the list above.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

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.

Go Live Checklist

To get a Project from looking ready to publish to actually being ready to publish there are quite a few things to check, change, upload and be mindful of. Work yourself through this list together with the Project Manager and get all these boxes green to be ready to publish.
‍
To change the state of the Box, add the Combo Classes finished, error or not-required to the astro-doc__status.

General

All Fonts have been bought, licenced and correctly uploaded.

All Images have 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.

This page (project-name.ch/astro) is password protected, sitemap indexing is disabled and the page is disallowed for crawlers in the robots.txt.

All external APIs (Google Maps, Vimeo-Videos etc.) are authorized to be used on the live domain.

SEO

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).

All Buttons with only an icon in them have a hidden Text Block which describes the functionality of the Button.

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 native speaker).

All Collection Fields are named correctly and logically (check with german native 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.

Changelog

v 1.0.6 (27.10.23)

Added the "DOM Element" as a new Component. This is the most basic (and therefor most powerful) Webflow Element which allows for basically any form of change to it's structure. It can only be copied and is not visible in the Elements Panel. Just place it from the Components Panel and convert it to an element with Command + Shift + A.
Learn more about this here: https://www.youtube.com/watch?v=qULN82RqAHw

v 1.0.5 (26.07.23)

Added the unloaded.css to the header code to be able to style things without affecting the preview inside Webflow.
Additional information about embeding SVGs inside Webflow.

v 1.0.4 (16.01.23)

Change to the Styleguide to be able to see the font set to the body inside of the Styleguide.

v 1.0.3 (04.01.23)

New Rule added to Guides an Rules to improve Weglot usage across pages.

v 1.0.2 (30.11.22)

A few new additions to the Go Live Checklist and inclusion of the hidden descriptive text field on icon-only buttons.

v 1.0.1 (20.09.22)

Addition of version system, changelog to track progress, image resolution guide. Smaller fixes.

v 1.0.0 (16.09.22)

Initial release.