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!
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.
As in general, this template consists of three main divisions, i.e.:
As seen below,
Before rock 'n roll, please, make sure to do the following steps:
vue-cli - npm install -g vue-cliHere is a general description of the implementation and the results
All of icon resources is here http://fontawesome.io/icons/.
Code
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<div class='header fs-25'>
<i class='fa fa-home' title='Home'></i>
<i class='fa fa-gear' title='Settings'></i>
<i class='fa fa-bell' title='Notification'></i>
<i class='fa fa-envelope' title='Messages'></i>
</div>
Result
Code
<div class='profile'>
<div class='cosmo'>
<h2 class='sansita fs-25'>{{ profile.cosmo }}</h2>
<img src='./../../../assets/avatar001.jpeg'>
</div>
<p v-for='e of profile.wanda' class='wanda scada fs-15'>
<i :class='[e.icon,"fs-18"]'></i>{{ e.text }}
</p>
</div>
Result
Code
<div class='major'>
<div class='publisher'>
<p class='salsa fs-18'>What's your idea?
Publish
{{ e.cosmo }}
{{ p }}
{{ p }}
{{ show(e.n) }}
<i @click='</span><span class="ll-str">' class='</span><span class="ll-nam">fa</span><span class="ll-spc"> </span><span class="ll-nam">fa</span><span class="ll-pct">-</span><span class="ll-nam">comments</span><span class="ll-spc"> </span><span class="ll-nam">fs</span><span class="ll-num">-25</span><span class="ll-str">' aria-hidden='</span><span class="ll-key">true</span><span class="ll-unk">'></i>{{ show(e.comments.length) }}</span>
</div>
</div>
</div>
Result
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
Mobile