Skip to content
This repository has been archived by the owner on Oct 23, 2023. It is now read-only.

Commit

Permalink
docs: add spelling and grammar tweaks (#774)
Browse files Browse the repository at this point in the history
  • Loading branch information
StephenKoller authored and tilmx committed Mar 27, 2019
1 parent 628c372 commit cafc311
Showing 1 changed file with 9 additions and 9 deletions.
18 changes: 9 additions & 9 deletions docs/guides/essentials.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,49 +11,49 @@ tags:

---

In this guide you'll make yor very first steps with Alva.
In this guide you'll take your very first steps with Alva.



## 1. Download and install

Download the Alva image appropriate for your platform from the [Releases Page](https://github.com/meetalva/alva/releases).

We fully support macOS and Window systems and provide untested images for various Linux platforms.
We fully support macOS and Windows systems and provide untested images for various Linux platforms.

Next, locate the Alva image in your Downloads and double click on the file to start the installation process.
Next, locate the Alva image in your Downloads and double-click on the file to start the installation process.

## 2. Start Alva for the first time

Alva should install into your applications folder. Depending on your operating system and
its configuration the exact location may vary. E.g. for macOS it is `/Applications/Alva`.

Find the Alva logo and double click it to start it. Alva should greet you with the following screen.
Find the Alva logo and double-click it to start. Alva should greet you with the following screen:

![](https://media.meetalva.io/alva-greeting.png)


## 3. Create a new file and add content to it

Click on `Create new Alva File`. You find a list of essential patterns on the bottom left of the next screen.
Click on `Create new Alva File`. You'll find a list of essential patterns on the bottom left of the next screen.
Locate the `Text` pattern and drop it onto the element pane right above the patterns list.

![](https://media.meetalva.io/guides/guide-01-01.gif)

That’s it – we added your first component to our prototype!
That’s it – we just added your first component to our prototype!

## 3. Adjust a Property
After you selected the newly added text component, have a look at the right side of Alva. There are all **properties** – like settings – of the component shown. In this case it’s just a single one – the text value. Let’s **change** that to `Hello Alva!`.
After you've selected the newly added text component, have a look at the right side of Alva. That is where all the **properties** – like settings – of the component are shown. In our case there is just a single one – the text value. Let’s **change** that to `Hello Alva!`.

![](https://media.meetalva.io/properties.png)

## 4. Add a Box Component
Let’s add another component. Besides dragging a component, we just double-click on the **Box Component**. The Box Component has way more properties. Let’s change the `height` to `400px` and the **background-color** to `#DA046E`.
Let’s add another component. Besides dragging a component, we can just double-click on the **Box Component**. The Box Component has way more properties. Let’s change the `height` to `400px` and the **background-color** to `#DA046E`.

![](https://media.meetalva.io/box-color.png)

## 5. Re-Order Elements
As you already may have found out, elements that support children elements have a small arrow on the left side. You can drag and drop elements into them. Let’s **move the text element into the box element**!
As you may have already found out, elements that support children elements have a small arrow on the left side. You can drag and drop elements into them. Let’s **move the text element into the box element**!

![](https://media.meetalva.io/box-nesting.png)

Expand Down

1 comment on commit cafc311

@marionebl
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.