![Untitled 002.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514782023/bn1xd5srpthpd72bdsho.png) At this moment, I will share my recent timeline page as Single Page Application (SPA) Template. You will get many advantages when using this template, because of its capability that can be adapted to the screen size. And can be more flexible, because it's built using VueJS. Thus, there is a clear separation between template, style and data. OK. Let us go to explore it! # Murez Nasution > `Attention!` To be able using this template, you need several studies of the components related to perspective of VueJS. You can visit the official website directly [here](https://vuejs.org/v2/guide/). ## Prototype As in general, this template consists of three main divisions, i.e.: 1. **Header**, located at the most top of the document. It consists of navigation as icons link to some features or menu. 2. **Main**, located on the main part of the document. It contains of three main sub-divisions, i.e. - **Profile**, located on the left side of the *Main* division. It shows attributes of the current user. Such as picture, name and others. - **Publisher**, the scrolled-vertical viewport. Just consists of two main divisions, - **Submitter**, located of the most top of the current division. It contains of a text input and a submit button to publish new post. - **Posts**, flows down as much as posts of current user. Each of post contains three main divisions, i.e.: *header*, *article* and *responses* (like and comments). - **Extra**, located on the right side of the *Main* division. It contains all of post of the users have created, which each note just consists of title and content. 3. **Footer**, located at the most bottom of the document. It appears as additional information. For next time, the implementation varies according to your wishes. As seen below, ![Untitled 003.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514781671/yuyzipuvi6naolkylazr.png) ___ ## Requirements Before *rock 'n roll*, please, make sure to do the following steps: 1. Install [NodeJS](https://nodejs.org/en/) 2. Install [`vue-cli`](https://github.com/vuejs/vue-cli) - `npm install -g vue-cli` 3. Install Text Editor ([Sublime](http://www.sublimetext.com/), or any others) 4. Download template in my [GitHub](https://github.com/murez-nst/ecma/tree/master/vue/src/components/templates). ## Rock 'n Roll Here is a general description of the implementation and the results #### Header All of icon resources is here [http://fontawesome.io/icons/](http://fontawesome.io/icons/). ^`Code` ```javascript ``` ![Untitled 005.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514788275/h3f55p4vlyoahhi6wgsl.png) ^`Result` ![Untitled 004.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514788263/apxdyj5vhvqms90b9i66.png) ___ #### Profile ^`Code` ```javascript

``` ![Untitled 006.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514788803/gkahpn7d7wtgk2jg0j2m.png) ^`Result` ![Untitled 007.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514788773/vxqwr5doen0w4h4ncaon.png) ___ #### Publisher ^`Code` ```javascript

What's your idea?

{{ p }}

``` ^`Result` ![Untitled 008.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514789055/ajp5wzlnqs6ooulfaubw.png) ___ #### Footer Since the footer is still abstract and depends on the implementation of everyone who will use it, then in this section is skipped. ___ And finally, the result of full implementation, as seen below: ^`Web` ![Untitled 009.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514789499/mtlhv68lwd5cg3eouqlr.png) ^`Mobile` ![Untitled 010.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514789617/oykhfgqsasfnlvvxfqex.png) # Thank you.

Posted on Utopian.io - Rewarding Open Source Contributors

{{ profile.cosmo }}

{{ e.cosmo }}

jaysilen07