@festo-ui/web-essentials

FESTO UI

Web Essentials - Digital Styleguide

Welcome to the CSS component framework of Festo for web developers! Here you’ll find components that have been implemented by the specification of the Design department. The library contains everything you need to build great projects in the design of Festo. Showcases, components, templates and much more, containing the digital essentials of the Festo Brand.

The Web Essentials project is the base layer for all Festo web developments in the form of a CSS framework. It is written in SCSS and brings you all the features you need to quickstart your next web project. For example it contains a responsive grid layout, icons, form controls and many more. This framework comes with no javascript at all so you can use it with the javascript framework of your choice.

We are also providing examples that you can use as a quickstart for your next Festo web application. Let us know if you have a demand for a specific example and we will see what we can do.

Angular & React

We love Angular and React at Festo. We deliver the component libraries for Angular and React based on the Web Essentials @festo-ui/angular and @festo-ui/react. These libraries extend the basic HTML controls of the Web Essentials with enhanced (non-basic) features. For example Checkboxes with indeterminate state or sortable table headings.

You can explore the current version of Web Essentials, Angular and React components at https://storybook.festo.design.

Getting started

Festo Web Essentials comes as a NPM package. Oh you don't know NPM? Then you must start a bit further at Node.js.

Install

Installing the libraries is very easy. Just use this command to install the Web Essentials to your project:

npm install @festo-ui/web-essentials

If you just need the static CSS resources then you can find them inside the dist directory.

Import the css like this:

... @import '~@festo-ui/web-essentials/dist/css/festo-web-essentials.min.css' ...;

Using the SCSS variables in your project

If you want to use the variables (color or more) from the web essentials library, you can add the scss resources.

You'll find them inside the directory node_modules/@festo-ui/web-essentials/scss.

You can use the variables like this: example.scss

@import '~@festo-ui/web-essentials/scss/variables';

background: $hero; // background is carul now
@extend .fwe-icon-menu-close; // add the menu-close icon as ::before element

Using Web Essentials with local fonts

If you want to use Web Essentials in an offline environment or with an non-latin style font, you have to provide own files for the Festo font.

• Download the required fonts here: https://festo.sharepoint.com/sites/tggfw/SitePages/Font-Richtlinie.aspx
• Override the css variable for the font:

@font-face {
  font-family: 'localMeta';
  src: url('../src/fonts/MetaChinese.woff') format('woff'), url('../src/fonts/MetaChinese.woff2') format('woff2');
}

@font-face {
  font-family: 'localMeta';
  src: url('../src/fonts/MetaChinese-Bold.woff') format('woff'), url('../src/fonts/MetaChinese-Bold.woff2') format('woff2');
  font-weight: bold;
}

:root {
  --fwe-font-family-sans-serif: 'localMeta';
}