diff options
author | Ilia Motornyi <elmot@vaadin.com> | 2015-12-03 14:59:05 +0000 |
---|---|---|
committer | Vaadin Code Review <review@vaadin.com> | 2015-12-03 14:59:12 +0000 |
commit | 2af72ba9636bec70046394c41744f89ce4572e35 (patch) | |
tree | ccb3dc2d2239585f8c3f79eb5f131ff61ca9ce86 /documentation/themes/themes-overview.asciidoc | |
parent | 8aa5fabe89f2967e966a64842a608eceaf80d08f (diff) | |
download | vaadin-framework-2af72ba9636bec70046394c41744f89ce4572e35.tar.gz vaadin-framework-2af72ba9636bec70046394c41744f89ce4572e35.zip |
Revert "Merge branch 'documentation'"7.6.0.beta2
This reverts commit f6874bde3d945c8b2d1b5c17ab50e2d0f1f8ff00.
Change-Id: I67ee1c30ba3e3bcc3c43a1dd2e73a822791514bf
Diffstat (limited to 'documentation/themes/themes-overview.asciidoc')
-rw-r--r-- | documentation/themes/themes-overview.asciidoc | 77 |
1 files changed, 0 insertions, 77 deletions
diff --git a/documentation/themes/themes-overview.asciidoc b/documentation/themes/themes-overview.asciidoc deleted file mode 100644 index 05005ab83b..0000000000 --- a/documentation/themes/themes-overview.asciidoc +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Overview -order: 1 -layout: page ---- - -[[themes.overview]] -= Overview - -Vaadin separates the appearance of the user interface from its logic using -__themes__. Themes can include Sass or CSS style sheets, custom HTML layouts, -and any necessary graphics. Theme resources can also be accessed from -application code as [classname]#ThemeResource# objects. - -Custom themes are placed under the [filename]#VAADIN/themes/# folder of the web -application (under [filename]#WebContent# in Eclipse or -[filename]#src/main/webapp# in Maven projects). This location is fixed -- the -[filename]#VAADIN# folder contains static resources that are served by the -Vaadin servlet. The servlet augments the files stored in the folder by resources -found from corresponding [filename]#VAADIN# folders contained in JARs in the -class path. For example, the built-in themes are stored in the -[filename]#vaadin-themes.jar#. - -<<figure.themes.theme-contents>> illustrates the contents of a theme. - -[[figure.themes.theme-contents]] -.Contents of a Theme -image::img/theme-contents-hi.png[] - -The name of a theme folder defines the name of the theme. The name is used in -the [literal]#++@Theme++# annotation that sets the theme. A theme must contain -either a [filename]#styles.scss# for Sass themes, or [filename]#styles.css# -stylesheet for plain CSS themes, but other contents have free naming. We -recommend that you have the actual theme content in a SCSS file named after the -theme, such as [filename]#mytheme.scss#, to make the names more unique. - -We also suggest a convention for naming the folders as [filename]#img# for -images, [filename]#layouts# for custom layouts, and [filename]#css# for -additional stylesheets. - -Custom themes need to extend a base theme, as described in -<<dummy/../../../framework/themes/themes-creating#themes.creating,"Creating and -Using Themes">>. Copying and modifying an existing theme is also possible, but -it is not recommended, as it may need more work to maintain if the modifications -are small. - -You use a theme by specifying it with the [literal]#++@Theme++# annotation for -the UI class of the application as follows: - - -[source, java] ----- -@Theme("mytheme") -public class MyUI extends UI { - @Override - protected void init(VaadinRequest request) { - ... - } -} ----- - -A theme can contain alternate styles for user interface components, which can be -changed as needed. - -In addition to style sheets, a theme can contain HTML templates for custom -layouts used with [classname]#CustomLayout#. See -<<dummy/../../../framework/layout/layout-customlayout#layout.customlayout,"Custom -Layouts">> for details. - -Resources provided in a theme can also be accessed using the -[classname]#ThemeResource# class, as described in -<<dummy/../../../framework/application/application-resources#application.resources.theme,"Theme -Resources">>. This allows displaying theme resources in component icons, in the -[classname]#Image# component, and other such uses. - - - |