You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: articles/styling/index.adoc
+16-15Lines changed: 16 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -29,24 +29,24 @@ public class Application implements AppShellConfigurator {
29
29
30
30
You can split your CSS over multiple stylesheets, and load them either with separate [annotationname]`@StyleSheet` annotations, or load additional stylesheets using the CSS `@import` rule.
More details are provided in the <<{articles}/styling/stylesheets#, Stylesheets>> section.
40
+
You can find more details in the <<{articles}/styling/stylesheets#, Stylesheets>> section.
41
41
42
-
.Vaadin 24 way of applying styles is deprecated but supported
42
+
.@Theme is deprecated but supported.
43
43
[NOTE]
44
-
The Vaadin 24 way of loading styles through the [annotationname]`@Theme` annotation and a theme folder in `frontend/themes` has been deprecated in Vaadin 25, but is still supported through the `themeComponentStyles` <<{articles}/flow/configuration/feature-flags#,feature flag>>. Please see the link:/docs/v24/styling[Vaadin 24 Styling documentation] for details on this usage.
44
+
Loading styles through the [annotationname]`@Theme` annotation and a theme folder in `frontend/themes` has been deprecated, but is still supported through the `themeComponentStyles` <<{articles}/flow/configuration/feature-flags#,feature flag>>. See the link:/docs/v24/styling[Vaadin 24 Styling documentation] for details on this usage.
45
45
46
46
47
47
== Themes
48
48
49
-
By default, Vaadin components are rendered with their minimalistic built-in <<themes/base#, base styles>>, which are a good starting point if you want to customize the look and feel extensively. Vaadin also ships with two themes, <<themes/aura#, Aura>> and <<themes/lumo#, Lumo>>, that provide a more polished look and feel for Vaadin components.
49
+
By default, Vaadin components are rendered with their simple built-in <<themes/base#, base styles>>, which are a good starting point if you want to customize the look and feel extensively. Vaadin also ships with two themes, <<themes/aura#, Aura>> and <<themes/lumo#, Lumo>>, that give a more polished look and feel for Vaadin components.
50
50
51
51
[cols="^.^1, ^.^1, ^.^1"]
52
52
|===
@@ -59,9 +59,9 @@ By default, Vaadin components are rendered with their minimalistic built-in <<th
59
59
|image:_images/lumo-theme.png[Login form using the Lumo theme, width=100%]
60
60
|===
61
61
62
-
Vaadin themes can be loaded with the [annotationname]`@StyleSheet` annotation. The [classname]`Aura` and [classname]`Lumo` Java classes provide constants for the stylesheet path that can be used with the [annotationname]`@StyleSheet` annotation.
62
+
Vaadin themes can be loaded with the [annotationname]`@StyleSheet` annotation. The [classname]`Aura` and [classname]`Lumo` Java classes have constants for the stylesheet path that can be used with the [annotationname]`@StyleSheet` annotation.
63
63
64
-
Note that themes should be imported before any other styles in your application.
64
+
Themes should be imported before any other styles in your application, so that style customizations have a higher specificity.
65
65
66
66
[source,java]
67
67
----
@@ -73,7 +73,7 @@ public class Application implements AppShellConfigurator {
73
73
}
74
74
----
75
75
76
-
Both themes provide a comprehensive set of style properties (CSS custom properties) that make them easily customizable without complex CSS selectors. These properties are listed on the <<themes/aura#, Aura>> and <<themes/lumo#, Lumo>> reference pages.
76
+
Both themes offer a comprehensive set of style properties (CSS custom properties) that make them customizable without complex CSS selectors. These properties are listed on the <<themes/aura#, Aura>> and <<themes/lumo#, Lumo>> reference pages.
77
77
78
78
[source,css]
79
79
----
@@ -88,7 +88,7 @@ You can choose to apply your own styling on top of either theme, or on top of th
88
88
89
89
== Component Style Properties
90
90
91
-
Vaadin components also provide their own component-specific style properties for customizing their styles. These properties are listed on the Styling sub-pages in the component documentation (see e.g. <<{articles}/components/text-field/styling#,Text Field>>), along with the most common CSS selectors you can use to target the parts and states of components with your own CSS.
91
+
Vaadin components also have their own component-specific style properties for customizing their styles. These properties are listed on the Styling sub-pages in the component documentation (e.g., <<{articles}/components/text-field/styling#,Text Field Styling>>), along with the most common CSS selectors you can use to target the parts and states of components with your own CSS.
92
92
93
93
Component style properties differ from theme style properties in that they are specific to a particular component type.
94
94
@@ -103,7 +103,7 @@ html {
103
103
104
104
== Applying CSS to Components
105
105
106
-
The most common selectors needed to style Vaadin components are listed on the _Styling_ sub-pages in the component documentation (see e.g. <<{articles}/components/text-field/styling#,Text Field>>), along with the style properties built into the components.
106
+
The most common selectors needed to style Vaadin components are listed on the _Styling_ sub-pages in the component documentation (e.g., <<{articles}/components/text-field/styling#,Text Field Styling>>), along with the style properties built into the components.
107
107
108
108
.Applying custom CSS to a component's state and part
Many Vaadin components also have style variants as built-in features. These can be found in the documentation for each component.
119
+
Many Vaadin components also have style variants as a built-in feature. You can find supported variants in the documentation for each component.
120
120
121
121
.Button component variants in Aura theme
122
-
image::_images/component-variants.png[width=50%]
122
+
[.fill.white]
123
+
image::_images/component-variants.png[width=612]
123
124
124
125
125
126
== Recommended Approach
126
127
127
128
The recommended approach to styling Vaadin components is:
128
129
129
130
* *Theme*: choose the <<{articles}/styling/themes#,theme>> that is the best match to your desired look and feel for components, or stick to the components’ base styles if neither theme is a good match;
130
-
* *Variant*: check if the component provides a style variant that corresponds (at least partially) to what you’re after;
131
+
* *Variant*: check if the component provides a style variant that corresponds (at least partially) to what you're after;
131
132
* *Style Properties*: customize the component using <<{articles}/styling/styling-components#theme-style-properties,theme>> and/or <<{articles}/styling/styling-components#component-style-properties,component style properties>>;
132
-
* *CSS style blocks*: <<{articles}/styling/styling-components#writing-css-for-vaadin-components,write your own CSS>> (using documented selectors) only once you can’t get further with the above approaches.
133
+
* *CSS style blocks*: <<{articles}/styling/styling-components#writing-css-for-vaadin-components,write your own CSS>> (using documented selectors) only once you can't get further with the above approaches.
Inline CSS can also be applied to individual elements and components through the [methodname]`getStyle()` Java API. These should be used sparingly to avoid hard-to-maintain spaghetti code, but can be useful e.g. for applying styles dynamically based on business logic.
153
+
Inline CSS can also be applied to individual elements and components through the [methodname]`getStyle()` Java API. These should be used sparingly to avoid hard-to-maintain spaghetti code, but can be useful, for example, for applying styles dynamically based on business logic.
Copy file name to clipboardExpand all lines: articles/styling/stylesheets.adoc
+9-9Lines changed: 9 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -13,7 +13,7 @@ In most project configurations, <<{articles}/styling/stylesheets#, stylesheets>>
13
13
14
14
In both cases they are loaded with the [annotationname]`@StyleSheet` annotation.
15
15
16
-
In most cases you should apply [annotationname]`@StyleSheet` annotations to the main application class that implements the [interfacename]`AppShellConfigurator` interface. This ensures that the CSS in it is applied globally, up-front, when the application UI is loaded into the browser.
16
+
Usually, you should apply [annotationname]`@StyleSheet` annotations to the main application class that implements the [interfacename]`AppShellConfigurator` interface. This ensures that the CSS in it is applied globally, up-front, when the application UI is loaded into the browser.
17
17
18
18
[source,java]
19
19
----
@@ -52,7 +52,7 @@ public class Application implements AppShellConfigurator {}
52
52
53
53
== External Stylesheets
54
54
55
-
All of the above methods for loading stylesheets also allow you to load stylesheets from external URIs, including other domains, by supplying an absolute path to [annotationname]`@StyleSheet` or `@import`.
55
+
All methods mentioned before for loading stylesheets also allow you to load stylesheets from external URIs, including other domains, by supplying an absolute path to [annotationname]`@StyleSheet` or `@import`.
56
56
57
57
[source,java]
58
58
----
@@ -63,7 +63,7 @@ public class Application implements AppShellConfigurator {
@@ -73,7 +73,7 @@ You can link:https://developer.mozilla.org/en-US/docs/Web/CSS/@import[read more
73
73
74
74
== Lazy-Loading Stylesheets
75
75
76
-
If you want to delay the loading of a particular stylesheet until it’s needed – for example if the stylesheet is big and only needed in a particular view or Flow component – you can apply the [annotationname]`@StyleSheet` annotation to its class instead of the main application class.
76
+
If you want to delay the loading of a particular stylesheet until it's needed – for example if the stylesheet is big and only needed in a particular view or Flow component – you can apply the [annotationname]`@StyleSheet` annotation to its class instead of the main application class.
77
77
78
78
[source,java]
79
79
----
@@ -83,7 +83,7 @@ public class CalendarView extends VerticalLayout {
83
83
}
84
84
----
85
85
86
-
Note that the stylesheet will remain loaded even after the user navigates away from the view, or when the component is no longer displayed, so you still need to ensure that the styles in it are scoped appropriately. You can use CSS class names to scope styles to a particular view or other part of the UI.
86
+
The stylesheet remains loaded even after the user navigates away from the view, or when the component is no longer displayed. This means you still need to ensure that the styles in it are scoped appropriately. You can use CSS class names to scope styles to a particular view or other part of the UI.
87
87
88
88
[source,java]
89
89
----
@@ -95,7 +95,7 @@ public class CalendarView extends VerticalLayout {
@@ -108,15 +108,15 @@ public class CalendarView extends VerticalLayout {
108
108
109
109
.CSS Class Names
110
110
[NOTE]
111
-
CSS class names are identifier-attributes applied to HTML elements in order to scope CSS styling to them. The same class name can be applied to multiple elements, and each element can have multiple class names. They have nothing to do with Java or TypeScript classes.
111
+
CSS class names are identifier-attributes applied to HTML elements that scope CSS styling to them. The same class name can be applied to multiple elements, and each element can have multiple class names. They have nothing to do with Java or TypeScript classes.
112
112
113
113
Stylesheets can also be <<{articles}/styling/advanced/dynamic-stylesheets#, loaded and unloaded dynamically>> through Java code.
114
114
115
115
== Spring Security
116
116
117
117
If you are using <<{articles}/flow/security/enabling-security#, Spring Security>> in your Vaadin application, you need to ensure that your stylesheets are accessible to unauthenticated users. The default Vaadin Spring Security configuration only permits access to `src/main/resources/META-INF/resources/styles.css` as well as the Aura and Lumo theme stylesheets.
118
118
119
-
To allow access to additional stylesheets, you can modify your Spring Security configuration like so:
119
+
To allow access to more stylesheets, you can modify your Spring Security configuration like so:
120
120
121
121
[source,java]
122
122
----
@@ -143,7 +143,7 @@ public class SecurityConfig {
143
143
144
144
This allows access to common locations for static resources, one of which is the `css` path. To make stylesheets available under that path, place them in the `src/main/resources/META-INF/resources/css` folder. For example, if you place a stylesheet in `src/main/resources/META-INF/resources/css/additional-styles.css`, you can import it in your main stylesheet like so:
0 commit comments