Steam Metro As Framework

In this example below you will see how to do a Steam Metro As Framework with some HTML / CSS and Javascript

I'm slowly converting the Metro skin by Dom (@boneyarddm) into a HTML5/CSS3/Javascript Framework

Thumbnail
This awesome code was written by txuritan, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright txuritan ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Steam Metro As Framework</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="main-nav wrapper">
    <ul>
      <li>
        <div class="pull-left"><a href="#"><i class="fa fa-arrow-left"></i></a></div>
      </li>
      <li>
        <div class="pull-left"><a href="#"><i class="fa fa-arrow-right"></i></a></div>
      </li>
      <li>
        <div class="pull-left"><a href="#">Store</a></div>
      </li>
      <li>
        <div class="pull-left"><a href="#">Library</a></div>
      </li>
      <li>
        <div class="pull-left"><a href="#">Community</a></div>
      </li>
      <li>
        <div class="pull-left"><a href="#">Person</a></div>
      </li>
      <li>
        <div class="pull-right"><a href="#"><i class="fa fa-email"></i></a></div>
      </li>
      <li>
        <div class="pull-right"><a href="#"><i class="fa fa-user"></i></a></div>
      </li>
      <li>
        <div class="pull-right"><a href="#"><i class="fa fa-arrow-down"></i></a></div>
      </li>
      <li>
        <div class="pull-right"><a href="#"><i class="fa fa-cog"></i></a></div>
      </li>
    </ul>
  </div>
<div class="wrapper">
  <div class="side-nav">
    <ul>
      <li>
        <div class="active">Link 1</div>
      </li>
      <li>
        <div>Link 2</div>
      </li>
      <li>
        <div>Link 2</div>
      </li>
      <li>
        <div>Link 2</div>
      </li>
      <li>
        <div>Link 2</div>
      </li>
      <li>
        <div>Link 2</div>
      </li>
      <li>
        <div>Link 2</div>
      </li>
      <li>
        <div>Link 2</div>
      </li>
      <li>
        <div>Link 2</div>
      </li>
      <li>
        <div>Link 2</div>
      </li>
      <li>
        <div>Link 2</div>
      </li>
      <li>
        <div>Link 2</div>
      </li>
      <li>
        <div>Link 2</div>
      </li>
      <li>
        <div>Link 2</div>
      </li>
      <li>
        <div>Link 2</div>
      </li>
      <li>
        <div>Link 2</div>
      </li>
      <li>
        <div>Link 2</div>
      </li>
      <li>
        <div>Link 2</div>
      </li>
      <li>
        <div>Link 2</div>
      </li>
      <li>
        <div>Link 2</div>
      </li>
      <li>
        <div>Link 2</div>
      </li>
      <li>
        <div>Link 2</div>
      </li>
      <li>
        <div>Link 2</div>
      </li>
      <li>
        <div>Link 2</div>
      </li>
      <li>
        <div>Link 2</div>
      </li>
      <li>
        <div>Link 2</div>
      </li>
      <li>
        <div>Link 2</div>
      </li>
      <li>
        <div>Link 2</div>
      </li>
      <li>
        <div>Link 2</div>
      </li>
      <li>
        <div>Link 2</div>
      </li>
      <li>
        <div>Link 2</div>
      </li>
      <li>
        <div>Link 2</div>
      </li>
    </ul>
  </div>
  <div class="main">
    <p>Cupcake ipsum dolor. Sit amet sesame snaps I love chocolate cake. Sesame snaps chupa chups marzipan gingerbread. Danish lollipop jelly pie cupcake chocolate bar halvah. Pudding macaroon I love jelly beans cookie ice cream sugar plum donut muffin.
      Dragée marshmallow I love. Muffin icing chupa chups I love tiramisu carrot cake jelly-o jelly beans pie. Oat cake pastry macaroon croissant ice cream ice cream bear claw candy canes. Halvah ice cream bonbon chocolate chupa chups chocolate cake I
      love. Dessert cookie icing ice cream cake jelly beans I love. Danish donut brownie danish I love jelly croissant oat cake. Cheesecake candy canes wafer jelly-o tiramisu. Donut I love wafer marzipan jelly-o lemon drops.</p>
    <p>Sweet roll chocolate biscuit dragée jelly-o chocolate bar sesame snaps I love marshmallow. I love cookie brownie halvah bonbon icing carrot cake. I love marshmallow gingerbread jelly beans halvah biscuit fruitcake chupa chups wafer. Muffin tootsie
      roll carrot cake pie cheesecake cake lemon drops. Pie cotton candy tart croissant toffee bear claw danish gummi bears. Marzipan sweet toffee chocolate danish. Jujubes wafer lemon drops oat cake. Cotton candy jujubes croissant bonbon. Pudding marzipan
      sweet roll. Chocolate bar I love sweet chocolate cake. Lollipop oat cake lollipop jujubes apple pie jujubes. Carrot cake jelly beans macaroon powder. Toffee liquorice marshmallow topping. I love I love gummies. Chocolate bar tootsie roll dessert
      I love gummies cake icing gummi bears macaroon. Apple pie ice cream brownie lollipop tiramisu chupa chups toffee chocolate cake. Bear claw sweet I love cupcake soufflé. Cheesecake gummies muffin sugar plum cheesecake biscuit I love sesame snaps
      candy canes. I love biscuit powder macaroon. Macaroon powder I love jelly beans sugar plum cake jujubes oat cake sweet roll. Sesame snaps cheesecake wafer I love. Cupcake oat cake I love brownie tootsie roll marzipan I love wafer I love. Ice cream
      marshmallow candy canes jelly liquorice muffin I love. Dessert chocolate cake sweet dragée. Brownie toffee chocolate cheesecake sweet roll chocolate bar ice cream. Pudding danish I love wafer. Gummies toffee pudding I love sugar plum macaroon chocolate
      carrot cake. Chocolate cake I love cake biscuit sesame snaps soufflé I love.</p>
    <p>Jelly beans I love halvah powder carrot cake ice cream pie caramels chupa chups. Cupcake jelly beans bonbon macaroon halvah. Dragée caramels chocolate caramels liquorice marshmallow marzipan jelly-o. Chocolate ice cream halvah chocolate bar lollipop
      sesame snaps toffee gummi bears. I love I love dessert chocolate bar. Marzipan croissant jelly-o I love sesame snaps. Tiramisu tiramisu gummies biscuit bear claw chocolate dragée bonbon oat cake. Ice cream cheesecake bear claw brownie chocolate
      bar halvah danish. Jelly gingerbread cake cake lollipop croissant gummies. Cookie cheesecake gingerbread macaroon cake toffee sesame snaps candy cookie. I love cookie toffee tiramisu lollipop. Chocolate bar sugar plum marshmallow. Toffee gingerbread
      I love pie toffee jelly beans. I love fruitcake topping tart ice cream.</p>
    <p>I love bear claw lollipop jelly I love croissant candy canes sweet roll. Ice cream sweet roll marshmallow jelly. I love tart tiramisu cotton candy cake cupcake pastry cake. I love gummies cheesecake powder. Chocolate cake jelly beans pudding jujubes
      I love candy canes liquorice. Pie wafer I love sweet roll tart. Apple pie lemon drops liquorice dessert wafer danish. Carrot cake candy canes donut I love jelly. Jelly biscuit chupa chups liquorice oat cake dragée muffin. Toffee jelly beans chocolate
      bar sesame snaps apple pie jelly-o. Fruitcake gingerbread tiramisu. Candy I love soufflé caramels marzipan cotton candy chocolate I love I love. Cookie gingerbread tiramisu carrot cake jujubes.</p>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/txuritan/steam-metro-as-framework-avxKLY */
::-webkit-scrollbar {
  background: inherit;
}

::-webkit-scrollbar-thumb {
  background: #505050;
}

html, body {
  height: 100%;
}

a {
  text-decoration: none;
}

body {
  color: #ffffff;
  margin: 1px;
  font-family: 'Segoe UI';
  background-color: #282828;
}

.wrapper {
  height: 100%;
}

div.main {
  width: 70%;
  display: inline-block;
}

div.main-nav {
  background-color: #191919;
}
div.main-nav ul li div a {
  color: cccccc;
}
div.main-nav ul {
  display: inline-block;
  padding: 0px;
  margin: 0;
  color: #cccccc;
  width: 100%;
}
div.main-nav ul.pull-left {
  float: left;
  display: inline-block;
}
div.main-nav ul.pull-right {
  float: right;
  display: inline-block;
}
div.main-nav ul li {
  display: inline;
}
div.main-nav ul li div {
  display: inline;
  font-size: 25px;
  font-weight: 100;
  margin: 3px;
  padding: 3px;
}

div.side-nav ul {
  background-color: #393939;
  list-style: none;
  padding: 0;
  margin: 0;
  min-height: 200px;
  height: 300px;
  max-height: auto;
  width: 25%;
  overflow: hidden;
  overflow-y: scroll;
  list-style-type: none;
}
div.side-nav li {
  margin: 0;
  padding: 0;
}
div.side-nav li > div {
  color: #cccccc;
}
div.side-nav li > div:hover {
  color: #fff;
}
div.side-nav li > div.active {
  color: #fff;
  background-color: #e18f32;
}

Comments