jLWPEY

index.html

<script src="https://unpkg.com/vue"></script>

<main id="app" class="site">
  
  <header class="menu">Twister</header>
  
  <aside class="profile">
    Profile Information
  </aside>
 
  <section class="timeline">
    <article class="tweet" v-for="tweet in tweets">
      {{ tweet.text }}
    </article>
  </section>

</main>

jlwpey.markdown

jLWPEY

A Pen by rael on CodePen.

License.

script.js

new Vue({
	el: '#app',
  data: {
  	tweets: [ 
    	{ text: '1fgsdgsdfgsedgf' },
    	{ text: 'sdgsdgdgs2' },
    	{ text: '3sdgfsdgfsdgfsdfggdf' }
   	]
  }
});

style.css

.tweet {
  margin: 2em auto;
}

.site {
    max-width: 960px;
    background-color: #fff;
    color: #444; 
    padding: 1em 3% 1em 3%;
    margin: 0 auto 1em auto;
	  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
}

.menu     { grid-area: menu;    }
.profile  { grid-area: profile;  }
.timeline { grid-area: timeline; }

@media only screen and (min-width: 460px) and (max-width: 700px) {
  .site {
      display: grid;
      width: 90%;
      grid-template-columns: auto;
      grid-template-rows: auto ;
      grid-template-areas:
        "menu"
        "profile"
        "timeline";
  }
}

@media only screen and (min-width: 700px) {
  .site {
	  display: grid;
    grid-template-columns: 200px 40px auto 40px;
		grid-template-rows: auto ;
		grid-template-areas: 
      "menu     menu  menu"
  		"profile  .     timeline"
		  "profile  .     timeline";
    max-width: 700px;
  }
}