diff options
Diffstat (limited to 'docs/elements-getting-started.adoc')
| -rw-r--r-- | docs/elements-getting-started.adoc | 50 |
1 files changed, 26 insertions, 24 deletions
diff --git a/docs/elements-getting-started.adoc b/docs/elements-getting-started.adoc index 5e810c8..7fbac91 100644 --- a/docs/elements-getting-started.adoc +++ b/docs/elements-getting-started.adoc @@ -6,76 +6,78 @@ layout: page # Getting Started with Vaadin Core Elements -This page will guide you through the installation of Vaadin Core Elements bundle and help you get started with your first project using these elements. +This page will guide you through the installation of the Vaadin Core Elements bundle and help you get started with your first project using these elements. ## Installation -There are three ways to use Vaadin Core Elements in your project: Bower, CDN and a ZIP archive. The only difference between these options is the URL you will use to import the necessary files into your HTML page. +There are three ways to use Vaadin Core Elements in your project: Bower, CDN, and a ZIP archive. The only difference between these options is the URL that you use to import the necessary files into your HTML page. -### Create a new folder +### Create a New Folder -Start by creating a new folder for your project and change into the newly created folder. +Start by creating a new folder for your project and change to the folder. +[subs="normal"] ---- -$ mkdir my-project -$ cd my-project +[prompt]#$# [command]#mkdir# [replaceable]#my-project# +[prompt]#$# [command]#cd# [replaceable]#my-project# ---- ### Install Vaadin Core Elements #### Bower -Recommended way to manage your front-end dependencies is using link:http://bower.io[Bower]. Follow the link:http://bower.io/#install-bower[Bower installation instructions], then run the following command inside your project folder to install the most recent stable release. +The recommended way to manage your front-end dependencies is to use link:http://bower.io[Bower]. Follow the link:http://bower.io/#install-bower[Bower installation instructions], then run the following command inside your project folder to install the most recent stable release. -[source] +[subs="normal"] ---- -$ bower install --save vaadin-core-elements +[prompt]#$# [command]#bower# install --save [replaceable]#vaadin-core-elements# ---- -This will download Vaadin Core Elements bundle and its dependencies into the `bower_components` folder inside your project's folder. +This will download the Vaadin Core Elements bundle and its dependencies into the [filename]#bower_components# folder under your project's folder. -If you wish to use a development snapshot version of some element, you can install/update that separately. For example: +If you wish to use a development snapshot version of some element, you can install and update that separately. For example: +[subs="normal"] ---- -$ bower install --save vaadin-grid#master +[prompt]#$# [command]#bower# install --save [replaceable]#vaadin-grid##master ---- #### CDN -You can use Vaadin Core Elements from CDN (see example below). This is especially convenient for services like JSFiddle, Codepen.io, etc. +You can use Vaadin Core Elements from our link:https://en.wikipedia.org/wiki/Content_delivery_network[CDN] server. This is especially convenient for services like JSFiddle, Codepen.io, etc. -For example, to import vaadin-grid, use the following URL: +For example, to import [vaadinelement]#vaadin-grid#, use the following URL: ---- -https://cdn.vaadin.com/vaadin-core-elements/latest/vaadin-grid/vaadin-grid.html +<link href="https://cdn.vaadin.com/vaadin-core-elements/latest/vaadin-grid/vaadin-grid.html" rel="import"> ---- To import all Vaadin Core Elements, use the following URL: ---- -https://cdn.vaadin.com/vaadin-core-elements/latest/vaadin-core-elements/vaadin-core-elements.html +<link href="https://cdn.vaadin.com/vaadin-core-elements/latest/vaadin-core-elements/vaadin-core-elements.html" rel="import"> ---- You can also use the nightly snapshot versions of any component, e.g. ---- -https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-grid/vaadin-grid.html +<link href="https://cdn.vaadin.com/vaadin-core-elements/master/vaadin-grid/vaadin-grid.html" rel="import"> ---- -#### Download ZIP +#### Download as a ZIP 1. Download the latest release ZIP archive from the link:https://github.com/vaadin/vaadin-core-elements/releases[GitHub releases page] -2. Extract the archive under your project folder, for example `deps`. +2. Extract the archive under your project folder, for example in a [filename]#deps# folder. ### Create a HTML file -Create a new HTML file (for example `index.html`) inside your project folder and copy the following code into it. +Create a new HTML file (for example [filename]#index.html#) inside your project folder and copy the code below into it. Pay attention to the following details: - - HTML5 doctype (`<!doctype html>`) is required for everything to work smoothly. - - You need to adjust how the `webcomponents-lite.min.js` polyfill and `vaadin-core-elements.html` are imported according to the installation option you selected. - - Notice how the JavaScript logic waits for `WebComponentsReady` event before accessing the elements. + - HTML5 doctype [elementname]#!doctype html# is required for everything to work smoothly. + - You need to adjust how the [filename]#webcomponents-lite.min.js# polyfill and [filename]#vaadin-core-elements.html# are imported according to the installation option you selected. + - Notice how the JavaScript logic waits for [classname]#WebComponentsReady# event before accessing the elements. **Serving the files during development**, when using Bower or the ZIP archive: @@ -144,7 +146,7 @@ Due to browser security restrictions, serving HTML imports from a `file:///` URL </html> ---- -After you have created the file and you have a local server serving the files, you should be able to open up the application in your browser at http://localhost:3000/index.html (notice, that the port 3000 may vary depending on the server you use). +After you have created the file and you have a local server serving the files, you should be able to open up the application in your browser at http://localhost:3000/index.html (notice that the port number may vary depending on the server you use). +++ <!-- Assumes .w-arrow-button and .blue class names from vaadin.com theme. Will fallback to a plain link. --> |