This article is part of the series: 'Towards Vaadin Developer Certification,' which aims to explain the fundamentals of Vaadin while I study for this certification. The topics covered here are an integral part of the 'Vaadin Developer' Certification. Styling in Vaadin goes beyond simple theme definitions. Some components, like Grid, require dynamic styling. Additionally, fonts and images must be properly managed within the theme folder. This article explores advanced styling techniques. Grid 1. Dynamic Styling in Grid Components 1. Dynamic Styling in Grid Components Grids often need row- or cell-specific styles based on data. This can be achieved using part names: Then, define styles in styles.css: styles.css 2. Lazy Loading Stylesheets 2. Lazy Loading Stylesheets If a stylesheet is required only in certain views, it can be loaded dynamically using @StyleSheet: @StyleSheet 3. Styling Using Custom Fonts 3. Styling Using Custom Fonts In Vaadin, custom fonts are treated as static resources, just like images or other assets. While the recommended approach is to leverage Vaadin’s built-in styling options, there are cases where overriding the default Lumo font style is necessary to achieve a unique look for your application. Below, we will guide you through the process of integrating a custom font into your Vaadin theme. 3.1 Steps to Define a Custom Font 3.1 Steps to Define a Custom Font a) Obtain the Font Files a) Obtain the Font Files You have two options to acquire the necessary font files: Google Fonts: Many fonts are freely available and can be used directly.
Font Conversion Tools: If you have a .TTF or .OTF font file, use an online tool such as Webfont Generator to convert it into web-friendly formats. Google Fonts: Many fonts are freely available and can be used directly. Google Fonts Font Conversion Tools: If you have a .TTF or .OTF font file, use an online tool such as Webfont Generator to convert it into web-friendly formats. Font Conversion Tools .TTF .OTF Once converted, the ZIP file will contain: .WOFF – Web Open Font Format (recommended for modern browsers)
.WOFF2 – Optimized version of .WOFF, offering better compression
stylesheet.css – Defines @font-face rules for the font .WOFF – Web Open Font Format (recommended for modern browsers) .WOFF .WOFF2 – Optimized version of .WOFF, offering better compression .WOFF2 .WOFF stylesheet.css – Defines @font-face rules for the font stylesheet.css @font-face b) Add the Font to Your Theme b) Add the Font to Your Theme Inside your project’s theme folder (frontend/themes/your-theme), create a new fonts directory and place the following files inside: frontend/themes/your-theme fonts c) Inject the Font into Your Stylesheet c) Inject the Font into Your Stylesheet Inside your theme’s global stylesheet (styles.css), import the font definitions: styles.css d) Override Lumo’s Default Font d) Override Lumo’s Default Font To apply the custom font across your entire application, override the --lumo-font-family property: --lumo-font-family Conclusion Conclusion Advanced styling in Vaadin includes dynamic grid styling, lazy-loaded stylesheets, and custom fonts. Mastering these techniques ensures highly customizable and performant applications. Disclaimer Disclaimer This content is drawn from studies and notes related to the Vaadin 24 certification. For deeper details, please consult the official documentation and learning materials for Vaadin certification. AI tools assisted in the structuring of this content; however, the writing and original content are solely done by the author. Authors Authors Paulo B. A. is an 'Oracle Certified Java Developer' and 'Spring Certified Professional' with a deep passion for Vaadin Flow. He crafts UIs with Vaadin and strives to make it the leading frontend framework for full-stack Java developers worldwide. He loves teaching, sharing knowledge, and creating content. While he enjoys learning theory through certifications, he always advocates for a practical approach. Linkedin.com/in/pbalves
X.com/p_b_alves
Mastodon.social/@pbalves Linkedin.com/in/pbalves X.com/p_b_alves Mastodon.social/@pbalves Staff Writer: Fábio A. P. is a technology enthusiast, self-taught writer, and scholar of society's relationship with technology. Passionate about sharing insights, he provides reliable perspectives on how technology shapes our lives. With clear and precise writing, Fábio simplifies complex topics, empowering readers to navigate the digital age with confidence. Staff Writer: Staff Writer: Medium.com/@fabioape Medium.com/@fabioape

Google

Make Your Vaadin App Smarter, Prettier, and Faster With These Advanced Styling Hacks

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Beyond the Basics: Scroller and FormLayout in Vaadin Flow

0–100 in Django: Starting an app the right way

The Noonification: How to Deal With Flapping or Broken Tests (11/29/2023)

The Noonification: OpenAI is Sam Altman; Sam Altman is OpenAI (11/30/2023)

The Noonification: Panda Power (11/28/2023)

The Noonification: Feature Optimization for Price Prediction (11/26/2023)

Beyond the Basics: Scroller and FormLayout in Vaadin Flow

0–100 in Django: Starting an app the right way

The Noonification: How to Deal With Flapping or Broken Tests (11/29/2023)

The Noonification: OpenAI is Sam Altman; Sam Altman is OpenAI (11/30/2023)

The Noonification: Panda Power (11/28/2023)

The Noonification: Feature Optimization for Price Prediction (11/26/2023)

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps