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.
271 lines
11 KiB
271 lines
11 KiB
3 years ago
|
<!doctype html>
|
||
|
|
<html lang="en_EN">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||
|
3 years ago
|
<title>Plain UI | 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">
|
||
|
3 years ago
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
|
3 years ago
|
|
||
|
3 years ago
|
<link rel="stylesheet" href="plain-ui.css">
|
||
|
|
</head>
|
||
|
3 years ago
|
|
||
|
3 years ago
|
<body class="overflow-x-hidden">
|
||
|
3 years ago
|
|
||
|
3 years ago
|
<header class="header">
|
||
|
|
<div class="bar">
|
||
|
3 years ago
|
<div class="bar__start">
|
||
|
3 years ago
|
<h1 class="m-top-4 m-bottom-4 h4">
|
||
2 years ago
|
Plain UI 0.5
|
||
|
3 years ago
|
</h1>
|
||
|
3 years ago
|
</div>
|
||
|
3 years ago
|
<div class="bar__main justify-end">
|
||
|
|
<a class="button button--small m-bottom-0" href="#">
|
||
|
|
Github
|
||
|
|
<svg class="m-left-3 icon fill-text" aria-hidden="true">
|
||
|
|
<use xlink:href="symbol-defs.svg#icon-github"></use>
|
||
|
|
</svg>
|
||
|
|
</a>
|
||
|
3 years ago
|
<a class="button button--small m-left-sm-3 m-bottom-0" href="https://gitea.tentakelfabrik.de/" rel="noopener" target="_blank">
|
||
|
3 years ago
|
Gitea
|
||
|
|
<svg class="m-left-3 icon fill-text" aria-hidden="true">
|
||
|
|
<use xlink:href="symbol-defs.svg#icon-gitea"></use>
|
||
|
|
</svg>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
3 years ago
|
</div>
|
||
|
|
</header>
|
||
|
3 years ago
|
|
||
|
3 years ago
|
<div class="container m-top-6">
|
||
|
3 years ago
|
<div class="grid">
|
||
|
|
<div class="col-12">
|
||
|
3 years ago
|
<nav>
|
||
|
|
<div class="tabs">
|
||
|
|
<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>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
3 years ago
|
<div class="grid">
|
||
|
3 years ago
|
<div class="col-12">
|
||
|
3 years ago
|
<div class="content">
|
||
|
3 years ago
|
<div class="panel panel--border-highlight border-color-danger m-bottom-4">
|
||
|
|
<div class="panel__body">
|
||
|
3 years ago
|
<div class="content m-last-child-0">
|
||
|
3 years ago
|
<p>
|
||
|
3 years ago
|
Plain UI is currently under development, Styles, Names and Documentation may change until Release!
|
||
|
3 years ago
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
3 years ago
|
|
||
|
3 years ago
|
<p>
|
||
|
3 years ago
|
<span class="bold">Plain UI</span> is a simple UI Framework. The Layout is inpired by minimalistc UI from NASA and MS-DOS.
|
||
|
|
The Idea behind this is a more Science related Layout, that has clear Colors and simple Patterns. All the Fancy Gloomy Shiny UI you know
|
||
|
|
from other Frameworks, thats not what you find here.
|
||
|
3 years ago
|
</p>
|
||
|
|
<p>
|
||
|
3 years ago
|
Plain UI
|
||
|
3 years ago
|
</p>
|
||
|
3 years ago
|
<h3 class="h5">
|
||
|
3 years ago
|
Contribution
|
||
|
|
</h3>
|
||
|
|
<ul>
|
||
|
3 years ago
|
<li>
|
||
|
3 years ago
|
<a href="https://tailwindcss.com/" class="strong" rel="noopener" target="_blank">TailwindCSS</a> for showing new ideas and concepts to handle Helper-Classes
|
||
|
3 years ago
|
</li>
|
||
|
|
<li>
|
||
|
|
<a href="https://reflexgrid.com/" class="strong" rel="noopener" target="_blank">Reflex Grid</a> for a great flex grid
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
3 years ago
|
<a href="https://necolas.github.io/normalize.css/" class="strong" rel="noopener" target="_blank">normalize.css</a> for resetting styles in all Browsers
|
||
|
3 years ago
|
</li>
|
||
|
|
<li>
|
||
|
3 years ago
|
<a href="https://icons.mono.company/" class="strong" rel="noopener" target="_blank">Mono Icons</a> for a beautiful Iconset
|
||
|
3 years ago
|
</li>
|
||
|
3 years ago
|
</ul>
|
||
|
3 years ago
|
</div>
|
||
|
3 years ago
|
</div>
|
||
|
|
</div>
|
||
|
3 years ago
|
</div>
|
||
|
3 years ago
|
|
||
|
3 years ago
|
<div class="container">
|
||
|
3 years ago
|
<div class="grid">
|
||
|
|
<div class="col-12">
|
||
|
3 years ago
|
<h2 class="highlight">
|
||
|
|
Installation
|
||
|
|
</h2>
|
||
|
|
<div class="content">
|
||
|
3 years ago
|
<code>npm install @tentakelfabrik/plain-ui --save</code>
|
||
|
3 years ago
|
</div>
|
||
|
3 years ago
|
</div>
|
||
|
|
</div>
|
||
|
3 years ago
|
</div>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
3 years ago
|
<div class="grid">
|
||
|
|
<div class="col-12">
|
||
|
3 years ago
|
<h2 class="highlight">
|
||
|
|
Building
|
||
|
|
</h2>
|
||
|
3 years ago
|
<div class="content">
|
||
|
|
<p>
|
||
|
3 years ago
|
Plain UI is build by <a href="https://purgecss.com/" class="strong" rel="noopener" target="_blank">Laravel-Mix</a>.
|
||
|
|
For this Site also <a href="https://purgecss.com/" class="strong" rel="noopener" target="_blank">PurgeCSS</a> was used. This is Important
|
||
|
|
to reduce the amount of Helper-Classes. For Laravel-Mix there is also a <a href="https://github.com/spatie/laravel-mix-purgecss" class="strong" rel="noopener" target="_blank">Wrapper</a>
|
||
|
|
available.
|
||
|
3 years ago
|
</p>
|
||
|
3 years ago
|
<code>mix
|
||
|
|
.setPublicPath('./public')
|
||
|
|
.sass('src/scss/plain-ui.scss', 'public/plain-ui.css')
|
||
|
|
.purgeCss({
|
||
|
|
extend: {
|
||
|
|
enabled: true,
|
||
|
|
content: [
|
||
|
|
path.join(__dirname, 'public/*.html'),
|
||
|
|
]
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</code>
|
||
|
3 years ago
|
</div>
|
||
|
3 years ago
|
</div>
|
||
|
|
</div>
|
||
|
3 years ago
|
</div>
|
||
|
3 years ago
|
|
||
|
3 years ago
|
<div class="container">
|
||
|
3 years ago
|
<div class="grid">
|
||
|
|
<div class="col-12">
|
||
|
3 years ago
|
<h2 class="highlight">
|
||
|
3 years ago
|
Core
|
||
|
3 years ago
|
</h2>
|
||
|
3 years ago
|
|
||
|
3 years ago
|
<h3 class="m-top-5">
|
||
|
3 years ago
|
Normalize
|
||
|
|
</h3>
|
||
|
3 years ago
|
<div class="content">
|
||
|
|
<p>
|
||
|
3 years ago
|
This is mainly done by <a href="https://necolas.github.io/normalize.css/" rel="noopener" target="_blank">normalize.css</a> with a few Modification.
|
||
|
3 years ago
|
</p>
|
||
|
|
</div>
|
||
|
3 years ago
|
|
||
|
3 years ago
|
<h3 class="m-top-5">
|
||
|
3 years ago
|
Heading
|
||
|
3 years ago
|
</h3>
|
||
|
3 years ago
|
<h1>Heading 1</h1>
|
||
|
|
<h2>Heading 2</h2>
|
||
|
|
<h3>Heading 3</h3>
|
||
|
|
<h4>Heading 4</h4>
|
||
|
|
<h5>Heading 5</h5>
|
||
|
|
<h6>Heading 6</h6>
|
||
|
|
|
||
|
3 years ago
|
<h3 class="m-top-5">
|
||
|
3 years ago
|
Content
|
||
|
|
</h3>
|
||
|
3 years ago
|
<div class="content m-bottom-4">
|
||
|
|
<code><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>
|
||
|
|
</code>
|
||
|
3 years ago
|
</div>
|
||
|
3 years ago
|
<div class="content">
|
||
|
|
<p>
|
||
|
3 years ago
|
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.
|
||
|
3 years ago
|
</p>
|
||
|
|
<ul>
|
||
|
3 years ago
|
<li>item 1</li>
|
||
|
|
<li>
|
||
|
|
item 2
|
||
|
|
<ul>
|
||
|
|
<li>child item 1</li>
|
||
|
|
<li>child item 2</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
3 years ago
|
</ul>
|
||
|
3 years ago
|
<ol>
|
||
|
|
<li>item 1</li>
|
||
|
|
<li>item 2</li>
|
||
|
|
</ol>
|
||
|
|
<dl>
|
||
|
|
<dt>defined title 1</dt>
|
||
|
|
<dd>defined item 1</dd>
|
||
|
|
</dl>
|
||
|
3 years ago
|
<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>
|
||
|
3 years ago
|
<mark>Mark</mark>
|
||
|
3 years ago
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
3 years ago
|
</div>
|
||
|
3 years ago
|
|
||
|
|
<footer class="site-footer m-top-5">
|
||
|
|
<div class="bar">
|
||
|
|
<div class="bar__main">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="bar__end">
|
||
|
|
<a class="color-text-contrast m-right-4" href="/imprint.html">
|
||
|
|
Imprint
|
||
|
|
</a>
|
||
|
|
<a class="color-text-contrast" href="/private-policy.html">
|
||
|
|
Privacy Policy
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
3 years ago
|
</body>
|
||
|
3 years ago
|
|
||
|
3 years ago
|
</html
|