Vivpage Quickstart

Getting Started

We'll use Bootstrap CSS to create a simple landing page with just a hero section.

Step 1 Create a new page.

Step 2 Load Bootstrap CSS Framework files: Press : to switch to Command Mode, then type:

lf bootstrap

Adding Elements

Step 3 While in Command Mode, type the following commands:

$div -c container
$div -c jumbotron
$h1 -c display-4 Welcome to the Future
>p -c lead Your business. Our technology. A perfect union for the perfect future.
>hr -c my-4
>form -c "form-inline mt-5"
$input -c "form-control mr-2" -a 'type="text" placeholder="Email"'
>button -c "btn btn-primary" -a 'type="submit"' Sign Up

The commands should give you a basic jumbotron layout with some text and a simple sign up form.

Adding Styles

Step 4 It doesn't look like much, so let's add a background cover. Press esc to switch to Normal Mode, then press j or ↑ twice so that the jumbotron is selected. Press : again to switch to Command Mode, then run the following:

s background: url("/man_laptop.jpeg"); background-repeat: no-repeat; background-size: cover;

Looks small. Let's make it fill the entire screen's height:

s min-height: 100vh;

To see the styles used so far, type:

s

You should see a listing of styles from the selected element.

Moving Elements

Step 5 The text doesn't stand out very much from the background image. A common trick would be to put all that text into a semi-transparent box atop the background image. Let's add a padded div at the end of div.jumbotron:

$div -c p-3

Followed by:

s background-color: "#0000007c"

This should change its background color to a semi-transparent black.

Multi Selection

Step 6 Switch to Normal mode. The padded div should still be selected. Press c, 0 to select its previous siblings. Alternatively, you can also use shift + ← to multi-select them.

Moving Elements

Step 7 Press M to switch to Move Mode. Then press j or ↓ once to move them into the padded div.

Adding Classes

Step 8 The text now seems even more subdued than before! Let's change it to half white. First, navigate to the padded div, switch to Command Mode, then run:

c text-white-50

Toggling Classes

Step 9 Still doesn't look great. Let's change to fully white instead:

tc text-white-50 text-white

The tc command toggles off text-white-50, and toggles on text-white. Now it looks better! Let's add some rounded corners to the padded div to round it off:

c rounded

It's very subtle, but it's there.

Saving the Page

Step 10 Now's a good time to save the page. While you're still in Command Mode, run this:

w landing

It should save the page under the name landing in localStorage (provided by your browser).

To load it again, just run:

e landing

Deleting Elements

Step 11 The horizontal line isn't working well with the background image, aesthetically speaking. Let's remove it. Switch to Normal Mode. Navigate to the horizontal line with the navigational keys, then press x to remove it.

Draft Modes

Step 12 It's hard to tell if it looks better with the selector outline in the way. Press ~ twice to turn off the selector outlines. You can press it once more to turn the selector outlines back on.

Undo/Redo

Step 13 Is it really better without the line though? Let's undo the deletion by pressing u. Then redo it again by pressing ctrl + r.

On second thought, let's keep it. Press u again to undo the deletion.

Changing Text

Step 14 Press r to move the selector to the root element. Now press t. The selector should automatically jump to the first text node it finds, and switches the editor to Text Mode. Let's change the text to 'The Future is Here'. Press esc to save it and switch back to Normal mode.

Quick Navigation

Step 15 The placeholder in the email input box doesn't read right. How about 'Email Address' instead? We can use Quick Navigation to get there quickly. While still in Normal Mode, and the selector on the root element, press f. You should see a gray overlay with the number 1 on it. Press 1, f. Now the div.container element is selected. Press 1, f again. Keep drilling down by pressing the number corresponding to the elements enclosing the input box, followed by f. When the email input box is selected, press f again to disable Quick Navigation.

Query-based Selection

Step 16 Alternatively, we can use query-based selection to quickly select the element we want. Again, press r to select the root element. Switch to Command Mode, then type:

q input

The Email input box should be selected. Any valid CSS selector query should work with the q command.

Changing Attribute

Step 17 Let's change the placeholder attribute of the input box. Still in Command Mode, we type:

a

to look at the attributes of the input box. We then type:

a placeholder="Email Address"

to change the placeholder.

Copy and Pasting Elements

Step 18 The hero still feels bare. We want to add a little more message to our hero section. Let's copy p.lead and paste it after the horizontal line. Navigate to p.lead, then press Y to copy it.

Step 19 Next, navigate to the horizontal line, and press p to paste the copied element right after it.

The lead class doesn't feel right, so let's remove it.

-c lead

Let's change the text, too. Press t to select the text node of the p element, then change it to read "Automate all the things with our patented technology so you can sit back and relax."

Exporting to HTML

Step 20 And finally, it's time to export our page to HTML! Remember to save the page first:

w

Then use the export command to export it as HTML:

export

Your browser will be instructed to download the page as an HTML file.