Fixed critically broken comment blocks, broken emphasis and escaping, and some other formatting, and moved book preface, chapter structure, and index to the docs repository.

Change-Id: If9299da4415f3181d59b8384e5ac96f940bd5229

1 files changed, 21 insertions, 32 deletions

diff --git a/documentation/themes/themes-css.asciidoc b/documentation/themes/themes-css.asciidoc
index 45229303dc..d7ba87c700 100644
--- a/documentation/themes/themes-css.asciidoc
+++ b/documentation/themes/themes-css.asciidoc
@@ -9,7 +9,6 @@ layout: page
 
 ((("CSS", "introduction", id="term.themes.css", range="startofrange")))
 
-
 Cascading Style Sheets or CSS is the basic technique to separate the appearance
 of a web page from the content represented in HTML. In this section, we give an
 introduction to CSS and look how they are relevant to software development with
@@ -58,8 +57,8 @@ even though they use somewhat different elements to draw the user interface.
 The HTML elements that will be styled later by matching CSS rules are emphasized
 above.
 
-The [literal]#++<link>++# element in the HTML header defines the used CSS
-stylesheet. The definition is automatically generated by Vaadin in the HTML page
+The [elementname]#link# element in the HTML header defines the CSS stylesheet.
+The definition is automatically generated by Vaadin in the HTML page
 that loads the UI of the application. A stylesheet can also be embedded in the
 HTML document itself, as is done when optimizing their loading in Vaadin
 TouchKit, for example.
@@ -77,25 +76,23 @@ value, separated with a colon. A property statement ends with a semicolon.
 Let us look at an example that matches certain elements in the simple HTML
 document given in the previous section:
 
-
 [source, css]
 ----
-p, td { 
+p, td {
   color: blue;
 }
 
-td { 
+td {
   background: yellow;
   font-weight: bold;
 }
 ----
 
 The [literal]#++p++# and [literal]#++td++# are element type selectors that match
-with [literal]#++<p>++# and [literal]#++<td>++# elements in HTML, respectively.
+with [elementname]#p# and [elementname]#td# elements in HTML, respectively.
 The first rule matches with both elements, while the second matches only with
-[literal]#++<td>++# elements. Let us assume that you have saved the above style
-sheet with the name [filename]#mystylesheet.css# and consider the following HTML
-file located in the same folder.
+[elementname]#td# elements.
+Let us assume that you have saved the above style sheet with the name [filename]#mystylesheet.css# and consider the following HTML file located in the same folder.
 
 [[figure.themes.basic.1]]
 .Simple Styling by Element Type
@@ -108,7 +105,6 @@ CSS has __inheritance__ where contained elements inherit the properties of their
 parent elements. For example, let us change the above example and define it
 instead as follows:
 
-
 [source, css]
 ----
 table {
@@ -117,27 +113,25 @@ table {
 }
 ----
 
-All elements contained in the [literal]#++<table>++# element would have the same
-properties. For example, the text in the contained [literal]#++<td>++# elements
-would be in blue color.
+All elements contained in the [elementname]#table# element would have the same properties.
+For example, the text in the contained [elementname]#td# elements would be in blue color.
 
 
 [[themes.css.basics.element-types]]
 === HTML Element Types
 
 HTML has a number of element types, each of which accepts a specific set of
-properties. The [literal]#++<div>++# elements are generic elements that can be
+properties. The [elementname]#div# elements are generic elements that can be
 used to create almost any layout and formatting that can be created with a
-specific HTML element type. Vaadin uses [literal]#++<div>++# elements
+specific HTML element type. Vaadin uses [elementname]#div# elements
 extensively to draw the UI, especially in layout components.
 
-((("Google Web Toolkit",
-"themeing")))
+((("Google Web Toolkit", "themeing")))
 Matching elements by their type as shown above is, however, rarely if ever used
 in style sheets for Vaadin applications. We used it above, because it is the
 normal way in regular HTML documents that use the various HTML elements for
 formatting text, but it is not applicable in Vaadin UIs that consist mostly of
-[literal]#++<div>++# elements. Instead, you need to match by element class, as
+[elementname]#div# elements. Instead, you need to match by element class, as
 described next.
 
 
@@ -169,6 +163,7 @@ follows:
   &lt;/body&gt;
 &lt;/html&gt;
 ----
+
 The class attributes of HTML elements can be matched in CSS rules with a
 selector notation where the class name is written after a period following the
 element name. This gives us full control of matching elements by their type and
@@ -217,11 +212,9 @@ image::img/themes-css-match-class-3.png[]
 To ensure future compatibility, we recommend that you use only matching based on
 the classes and __do not__ match for specific HTML element types in CSS rules,
 because Vaadin may change the exact HTML implementation how components are drawn
-in the future. For example, Vaadin earlier used [literal]#++<div>++# element to
-draw [classname]#Button# components, but later it was changed to use the
-special-purpose [literal]#++<button>++# element in HTML. Because of using the
-[literal]#++v-button++# style class in the CSS rules for the button, styling it
-has changed only very little.
+in the future.
+For example, Vaadin earlier used [elementname]#div# element to draw [classname]#Button# components, but later it was changed to use the special-purpose [elementname]#button# element in HTML.
+Because of using the [literal]#++v-button++# style class in the CSS rules for the button, styling it has changed only very little.
 
 
 [[themes.css.matching-by-descendants]]
@@ -243,10 +236,8 @@ consider the following HTML fragment:
   &lt;/table&gt;
 &lt;/body&gt;
 ----
-Matching by the class name [literal]#++.mytext++# alone would match both the
-[literal]#++<p>++# and [literal]#++<td>++# elements. If we want to match only
-the table cell, we could use the following selector:
-
+Matching by the class name [literal]#++.mytext++# alone would match both the [elementname]#p# and [elementname]#td# elements.
+If we want to match only the table cell, we could use the following selector:
 
 [source, css]
 ----
@@ -375,7 +366,7 @@ public class HelloWorld extends UI {
 
         // Label has v-label style
         content.addComponent(new Label("Hello World!"));
-        
+
         // Button has v-button style
         content.addComponent(new Button("Push Me!",
             new Button.ClickListener() {
@@ -444,7 +435,7 @@ elements. The theme is actually a Sass theme.
   .v-ui {
     background: white;
   }
-  
+
   /* All labels have white text on black background */
   .v-label {
     background: black;
@@ -502,5 +493,3 @@ Compatibility issues are detailed in various CSS handbooks.
 
 
 (((range="endofrange", startref="term.themes.css")))
-
-