Skip to content

Commit 5565e86

Browse files
Greggchrisvfritz
authored andcommitted
Adding Why Vue.js video to Introduction page (#1377)
* Added video into guide introduction * Added modal styles to page, put video line on one file, and reset iframe margin
1 parent 61d0d85 commit 5565e86

File tree

2 files changed

+5
-0
lines changed

2 files changed

+5
-0
lines changed

Diff for: src/v2/guide/index.md

+4
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ order: 2
88

99
Vue (pronounced /vjuː/, like **view**) is a **progressive framework** for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with [modern tooling](single-file-components.html) and [supporting libraries](https://github.com/vuejs/awesome-vue#components--libraries).
1010

11+
If you’d like to learn more about Vue before diving in, we <a id="modal-player" href="javascript:;">created a video</a> walking through the core principles and a sample project.
12+
1113
If you are an experienced frontend developer and want to know how Vue compares to other libraries/frameworks, check out the [Comparison with Other Frameworks](comparison.html).
1214

1315
## Getting Started
@@ -374,3 +376,5 @@ You may have noticed that Vue components are very similar to **Custom Elements**
374376
## Ready for More?
375377

376378
We've briefly introduced the most basic features of Vue.js core - the rest of this guide will cover them and other advanced features with much finer details, so make sure to read through it all!
379+
380+
<div id="video-modal" class="modal"><div class="vimeo-space" style="padding: 56.25% 0 0 0; position: relative;"><iframe src="https://player.vimeo.com/video/247494684" style="height: 100%; left: 0; position: absolute; top: 0; width: 100%; margin: 0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script></div>

Diff for: themes/vue/source/css/page.styl

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
@import "_offline-menu"
1010
@import "_team"
1111
@import "_style-guide"
12+
@import "_modal"
1213

1314
#header
1415
box-shadow: 0 0 1px rgba(0,0,0,.25)

0 commit comments

Comments
 (0)