rnowm/app.css

## app.css
html, body {
  margin: 0;
  padding: 0;
  font-size: 10px;
  background-color: #fff;
}

body {
  height: 100%;
  display: block;
  overflow: hidden;
}

section[role="region"] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
}

#settings-view {
  z-index: 10;
}

.move-down {
  transform: translateY(100%);
  transition: all 0.2s;
}

.move-up {
	transform: translateY(0);
	transition: all 0.2s;
}

section[role="region"] > header:first-child .icon.icon-settings {
  background-image: url(images/settings.png);
}

[data-type="list"] li > a aside img {
  height: 4rem;
  width: 4rem;
  margin: 1rem 1rem 0 0;
}

[data-type="list"] li > a aside.pack-end.install {
  background: url(images/download.png) no-repeat;
  height: 3rem;
  width: 3rem;
  margin: 1.5rem 0 0 1rem;
}

#settings-view form {
	margin: 1.5rem;
}

## app.js
//Show / Hide Settings view
var btnSettings = document.querySelector("#settings-btn");
var viewSettings = document.querySelector("#settings-view");
btnSettings.addEventListener ('click', function () {
    viewSettings.classList.remove('move-down');
    viewSettings.classList.add('move-up');
});
var btnCloseSettings = document.querySelector("#close-btn");
btnCloseSettings.addEventListener ('click', function () {
    viewSettings.classList.remove('move-up');
    viewSettings.classList.add('move-down');
});

## index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo Store</title>

<link rel="stylesheet" type="text/css" href="style/headers.css"/>
<link rel="stylesheet" type="text/css" href="style/lists.css" />
<link rel="stylesheet" type="text/css" href="style/input_areas.css" />
<link rel="stylesheet" type="text/css" href="style/app.css"/>
</head>

<body role="application">

  <section role="region" id="list-view">
    <header>
      <menu type="toolbar">
        <button id="settings-btn"><span class="icon icon-settings">settings</span></button>
      </menu>
      <h1>demo Store</h1>
    </header>
    <article id="appList" data-type="list">
      <ul>
        <li>
          <a href="#">
            <aside><img src="style/images/default.png"></aside>
            <aside class="pack-end install"></aside>
            <p>App 1</p>
            <p>App developer</p>
          </a>
        </li>
        <li>
          <a href="#">
            <aside><img src="style/images/default.png"></aside>
            <aside class="pack-end install"></aside>
            <p>App 2</p>
            <p>App developer</p>
          </a>
        </li>
      </ul>
    </article>
  </section>

  <section role="region" id="settings-view" class="skin-organic">
    <header>
      <button id="close-btn"><span class="icon icon-close">close</span></button>
      <menu type="toolbar">
        <button id="settings-btn">Log in</button>
      </menu>
      <h1>Settings</h1>
    </header>
    <article>
      <form>
        <p>
          <input type="text" placeholder="username">
          <button type="reset">Clear</button>
        </p>
        <p><input type="password" placeholder="password"/></p>
      </form>
    </article>
  </section>

  <script src="js/app.js"></script>
</body>
</html>
	html, body {
	margin: 0;
	padding: 0;
	font-size: 10px;
	background-color: #fff;
	}

	body {
	height: 100%;
	display: block;
	overflow: hidden;
	}

	section[role="region"] {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	}

	#settings-view {
	z-index: 10;
	}

	.move-down {
	transform: translateY(100%);
	transition: all 0.2s;
	}

	.move-up {
	transform: translateY(0);
	transition: all 0.2s;
	}

	section[role="region"] > header:first-child .icon.icon-settings {
	background-image: url(images/settings.png);
	}

	[data-type="list"] li > a aside img {
	height: 4rem;
	width: 4rem;
	margin: 1rem 1rem 0 0;
	}

	[data-type="list"] li > a aside.pack-end.install {
	background: url(images/download.png) no-repeat;
	height: 3rem;
	width: 3rem;
	margin: 1.5rem 0 0 1rem;
	}

	#settings-view form {
	margin: 1.5rem;
	}
	//Show / Hide Settings view
	var btnSettings = document.querySelector("#settings-btn");
	var viewSettings = document.querySelector("#settings-view");
	btnSettings.addEventListener ('click', function () {
	viewSettings.classList.remove('move-down');
	viewSettings.classList.add('move-up');
	});
	var btnCloseSettings = document.querySelector("#close-btn");
	btnCloseSettings.addEventListener ('click', function () {
	viewSettings.classList.remove('move-up');
	viewSettings.classList.add('move-down');
	});
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>demo Store</title>

	<link rel="stylesheet" type="text/css" href="style/headers.css"/>
	<link rel="stylesheet" type="text/css" href="style/lists.css" />
	<link rel="stylesheet" type="text/css" href="style/input_areas.css" />
	<link rel="stylesheet" type="text/css" href="style/app.css"/>
	</head>

	<body role="application">

	<section role="region" id="list-view">
	<header>
	<menu type="toolbar">
	<button id="settings-btn"><span class="icon icon-settings">settings</span></button>
	</menu>
	<h1>demo Store</h1>
	</header>
	<article id="appList" data-type="list">
	<ul>
	<li>
	<a href="#">
	<aside><img src="style/images/default.png"></aside>
	<aside class="pack-end install"></aside>
	<p>App 1</p>
	<p>App developer</p>
	</a>
	</li>
	<li>
	<a href="#">
	<aside><img src="style/images/default.png"></aside>
	<aside class="pack-end install"></aside>
	<p>App 2</p>
	<p>App developer</p>
	</a>
	</li>
	</ul>
	</article>
	</section>

	<section role="region" id="settings-view" class="skin-organic">
	<header>
	<button id="close-btn"><span class="icon icon-close">close</span></button>
	<menu type="toolbar">
	<button id="settings-btn">Log in</button>
	</menu>
	<h1>Settings</h1>
	</header>
	<article>
	<form>
	<p>
	<input type="text" placeholder="username">
	<button type="reset">Clear</button>
	</p>
	<p><input type="password" placeholder="password"/></p>
	</form>
	</article>
	</section>

	<script src="js/app.js"></script>
	</body>
	</html>