You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
122 lines
4.7 KiB
122 lines
4.7 KiB
<!doctype html>
|
|
<html lang="en_EN">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
<title>
|
|
Plain UI 0.5 | Lightweight CSS UI Framework for Building Apps and Websites
|
|
</title>
|
|
<meta name="description" content="Lightweight UI Framework for building fast and clean Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
|
|
<link rel="stylesheet" href="plain-ui.css">
|
|
</head>
|
|
|
|
<body class="overflow-x-hidden">
|
|
|
|
<header class="header">
|
|
<div class="bar">
|
|
<div class="bar__start">
|
|
<div class="m-top-4 m-bottom-4 h4">
|
|
Plain UI 0.5
|
|
</div>
|
|
</div>
|
|
<div class="bar__main justify-center">
|
|
<div class="tabs tabs--contrast">
|
|
<a href="index.html" class="tabs__item tabs__item--selected">
|
|
Basics
|
|
</a>
|
|
<a href="components.html" class="tabs__item">
|
|
Components
|
|
</a>
|
|
<a href="layout.html" class="tabs__item">
|
|
Layout
|
|
</a>
|
|
<a href="helpers.html" class="tabs__item">
|
|
Helpers
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="container">
|
|
<div class="grid">
|
|
<div class="col-12">
|
|
|
|
<h1 class="highlight m-top-5 m-bottom-5">
|
|
Basics
|
|
</h1>
|
|
|
|
<div class="content">
|
|
<div class="panel panel--border-highlight border-color-danger m-bottom-4">
|
|
<div class="panel__body">
|
|
<div class="content m-last-child-0">
|
|
<p>
|
|
Plain UI is currently under development, Styles, Names and Documentation may change until Release!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- -->
|
|
<h3 class="m-top-5">
|
|
Heading
|
|
</h3>
|
|
<h1>Heading 1</h1>
|
|
<h2>Heading 2</h2>
|
|
<h3>Heading 3</h3>
|
|
<h4>Heading 4</h4>
|
|
<h5>Heading 5</h5>
|
|
<h6>Heading 6</h6>
|
|
|
|
<!-- -->
|
|
<h3 class="m-top-5">
|
|
Content
|
|
</h3>
|
|
<div class="content">
|
|
<p>
|
|
Y'know this time it wasn't my fault. The Doc set all of his clocks twenty-five minutes slow. Listen, this is very important, I forgot my video camera, could you stop by my place and pick it up on your way to the mall? whoa, this is it, this is the part coming up, Doc. I'm really gonna miss you. Doc, about the future- Thank you, don't forget to take a flyer.
|
|
</p>
|
|
<p>
|
|
Dear Doctor Brown, on the night that I go back in time, you will be shot by terrorists. Please take whatever precautions are necessary to prevent this terrible disaster. Your friend, Marty. Well, safe and sound, now, n good old 1955. I've gotta go. Look, George, I'm telling you George, if you do not ask Lorraine to that dance, I'm gonna regret it for the rest of my life. Hey George, heard you laid out Biff, nice going.
|
|
</p>
|
|
<ul>
|
|
<li>item 1</li>
|
|
<li>
|
|
item 2
|
|
<ul>
|
|
<li>child item 1</li>
|
|
<li>child item 2</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<ol>
|
|
<li>item 1</li>
|
|
<li>item 2</li>
|
|
</ol>
|
|
<dl>
|
|
<dt>defined title 1</dt>
|
|
<dd>defined item 1</dd>
|
|
</dl>
|
|
<blockquote>
|
|
I'm telling you George, if you do not ask Lorraine to that dance, I'm gonna regret it for the rest of my life. Hey George, heard you laid out Biff, nice going.
|
|
</blockquote>
|
|
<mark>Mark</mark>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="site-footer m-top-5">
|
|
<div class="bar">
|
|
<div class="bar__main">
|
|
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
|
|
</html |