plain-ui/dist/index.html

<!doctype html>
<html lang="en_EN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <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">
    <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__main">
                <h1 class="m-top-4 m-bottom-4 h4">
                    Plain UI 0.1-alpha
                </h1>
            </div>
        </div>
    </header>

    <div class="container m-top-6">
        <div class="grid">
            <div class="col-12">
                <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">
        <div class="grid">
            <div class="col-12 col-md-8">
                <div class="content">
                    <p>
                        <span class="bold">Plain UI</span> is a simple UI Framework.
                        It has
                    </p>
                    <p>

                    </p>
                    <h3 class="h5">
                        Contribution
                    </h3>
                    <ul>
                        <li><span class="bold">TailwindCSS</span> for showing new ideas and concepts to handle handle Helper-Classes</li>
                        <li><span class="bold">Reflex Grid</span> </li>
                        <li><span class="bold">Reflex Grid</span> </li>
                    </ul>
                </div>
                <div class="center">
                    <a href="#">
                        <svg class="icon fill-success" aria-hidden="true">
                            <use xlink:href="symbol-defs.svg#icon-github"></use>
                        </svg>
                    </a>
                    <a href="https://gitea.tentakelfabrik.de/">
                        <svg class="icon fill-success" aria-hidden="true">
                            <use xlink:href="symbol-defs.svg#icon-gitea"></use>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="grid">
            <div class="col-12">
                <h2 class="highlight">
                    Installation
                </h2>
                <div class="content">
<code>npm install plain-ui --save</code>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="grid">
            <div class="col-12">
                <h2 class="highlight">
                    Building
                </h2>
                <div class="content">
                    <p>
                        For Buildung use Webpack or a similiar System. Plain UI is build by Laravel-Mix. Consider to use PurgeCSS,
                        with all Helper-Classes the CSS is really growning. PurgeCSS, with Laravel Mix it looks like this,

                        <a href="https://purgecss.com/" target="_blank">PurgeCSS</a>
                    </p>
<code></code>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="grid">
            <div class="col-12">
                <h2 class="highlight">
                    Variables + Themes
                </h2>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="grid">
            <div class="col-12">
                <h2 class="highlight">
                    Basic Styles
                </h2>

                <h3 class="highlight">
                    Normalize
                </h3>

                <div class="content">
                    <p>
                        For all elements is the same, try set a basic style without anything, no margin, no padding. The Reason is to use Components, Layout and
                        Helpers for the styling or make your own rules for the elements.
                    </p>
                </div>

                <h2 class="highlight">
                    Heading
                </h2>

                <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="highlight">
                    Heading + .highlight
                </h3>

                <h1 class="highlight">Heading 1</h1>
                <h2 class="highlight">Heading 2</h2>
                <h3 class="highlight">Heading 3</h3>
                <h4 class="highlight">Heading 4</h4>
                <h5 class="highlight">Heading 5</h5>
                <h6 class="highlight">Heading 6</h6>

                <h3 class="highlight">
                    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>Anyway, if Grandpa hadn't hit him</li>
                        <li>Yeah, well history is gonna change</li>
                        <li>Children</li>
                    </ul>
                    <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>
                </div>
            </div>
        </div>
    </div>
</body>

</html
adding 4 years ago			`<!doctype html>`
			`<html lang="en_EN">`

			`<head>`
			`<meta charset="utf-8">`
			`<meta http-equiv="x-ua-compatible" content="ie=edge">`
adding #9 4 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">`
adding 4 years ago			`<meta name="viewport" content="width=device-width,initial-scale=1">`
adding 4 years ago
adding 4 years ago			`<link rel="stylesheet" href="plain-ui.css">`
			`</head>`
adding 4 years ago
adding 4 years ago			`<body class="overflow-x-hidden">`
adding new buttons, media 4 years ago
adding 4 years ago			`<header class="header">`
			`<div class="bar">`
adding 4 years ago			`<div class="bar__main">`
			`<h1 class="m-top-4 m-bottom-4 h4">`
adding 4 years ago			`Plain UI 0.1-alpha`
adding 4 years ago			`</h1>`
adding 4 years ago			`</div>`
			`</div>`
			`</header>`
adding new buttons, media 4 years ago
adding 4 years ago			`<div class="container m-top-6">`
adding, change structure 4 years ago			`<div class="grid">`
			`<div class="col-12">`
adding 4 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">`
adding 4 years ago			`<div class="grid">`
			`<div class="col-12 col-md-8">`
adding 4 years ago			`<div class="content">`
			`<p>`
adding 4 years ago			`<span class="bold">Plain UI</span> is a simple UI Framework.`
adding 4 years ago			`It has`
adding 4 years ago			`</p>`
			`<p>`
adding 4 years ago
adding 4 years ago			`</p>`
adding 4 years ago			`<h3 class="h5">`
adding 4 years ago			`Contribution`
			`</h3>`
			`<ul>`
adding 4 years ago			`<li><span class="bold">TailwindCSS</span> for showing new ideas and concepts to handle handle Helper-Classes</li>`
			`<li><span class="bold">Reflex Grid</span> </li>`
			`<li><span class="bold">Reflex Grid</span> </li>`
adding 4 years ago			`</ul>`
adding 4 years ago			`</div>`
adding 4 years ago			`<div class="center">`
			`<a href="#">`
			`<svg class="icon fill-success" aria-hidden="true">`
adding 4 years ago			`<use xlink:href="symbol-defs.svg#icon-github"></use>`
adding 4 years ago			`</svg>`
			`</a>`
			`<a href="https://gitea.tentakelfabrik.de/">`
			`<svg class="icon fill-success" aria-hidden="true">`
adding 4 years ago			`<use xlink:href="symbol-defs.svg#icon-gitea"></use>`
adding 4 years ago			`</svg>`
			`</a>`
			`</div>`
adding, change structure 4 years ago			`</div>`
			`</div>`
adding 4 years ago			`</div>`
adding, change structure 4 years ago
adding 4 years ago			`<div class="container">`
adding 4 years ago			`<div class="grid">`
			`<div class="col-12">`
adding 4 years ago			`<h2 class="highlight">`
			`Installation`
			`</h2>`
			`<div class="content">`
			`<code>npm install plain-ui --save</code>`
			`</div>`
adding 4 years ago			`</div>`
			`</div>`
adding 4 years ago			`</div>`

			`<div class="container">`
adding 4 years ago			`<div class="grid">`
			`<div class="col-12">`
adding 4 years ago			`<h2 class="highlight">`
			`Building`
			`</h2>`
adding 4 years ago			`<div class="content">`
			`<p>`
			`For Buildung use Webpack or a similiar System. Plain UI is build by Laravel-Mix. Consider to use PurgeCSS,`
			`with all Helper-Classes the CSS is really growning. PurgeCSS, with Laravel Mix it looks like this,`
adding #9 4 years ago
adding 4 years ago			`<a href="https://purgecss.com/" target="_blank">PurgeCSS</a>`
			`</p>`
			`<code></code>`
			`</div>`
adding 4 years ago			`</div>`
			`</div>`
adding 4 years ago			`</div>`
adding 4 years ago
adding 4 years ago			`<div class="container">`
adding 4 years ago			`<div class="grid">`
			`<div class="col-12">`
adding 4 years ago			`<h2 class="highlight">`
			`Variables + Themes`
			`</h2>`
adding 4 years ago			`</div>`
			`</div>`
adding 4 years ago			`</div>`
adding 4 years ago
adding 4 years ago			`<div class="container">`
adding tabs 4 years ago			`<div class="grid">`
			`<div class="col-12">`
adding 4 years ago			`<h2 class="highlight">`
adding 4 years ago			`Basic Styles`
			`</h2>`
adding tabs 4 years ago
adding 4 years ago			`<h3 class="highlight">`
adding 4 years ago			`Normalize`
			`</h3>`
adding 4 years ago
adding 4 years ago			`<div class="content">`
			`<p>`
			`For all elements is the same, try set a basic style without anything, no margin, no padding. The Reason is to use Components, Layout and`
			`Helpers for the styling or make your own rules for the elements.`
			`</p>`
			`</div>`
adding 4 years ago
adding 4 years ago			`<h2 class="highlight">`
adding 4 years ago			`Heading`
			`</h2>`

			`<h1>Heading 1</h1>`
			`<h2>Heading 2</h2>`
			`<h3>Heading 3</h3>`
			`<h4>Heading 4</h4>`
			`<h5>Heading 5</h5>`
			`<h6>Heading 6</h6>`

adding 4 years ago			`<h3 class="highlight">`
adding 4 years ago			`Heading + .highlight`
			`</h3>`

adding 4 years ago			`<h1 class="highlight">Heading 1</h1>`
			`<h2 class="highlight">Heading 2</h2>`
			`<h3 class="highlight">Heading 3</h3>`
			`<h4 class="highlight">Heading 4</h4>`
			`<h5 class="highlight">Heading 5</h5>`
			`<h6 class="highlight">Heading 6</h6>`

			`<h3 class="highlight">`
adding 4 years ago			`Content`
			`</h3>`
adding #10 4 years ago			`<div class="content">`
			`<p>`
adding 4 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.`
adding #10 4 years ago			`</p>`
			`<ul>`
adding 4 years ago			`<li>Anyway, if Grandpa hadn't hit him</li>`
			`<li>Yeah, well history is gonna change</li>`
			`<li>Children</li>`
adding #10 4 years ago			`</ul>`
adding 4 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>`
adding #10 4 years ago			`</div>`
			`</div>`
			`</div>`
adding 4 years ago			`</div>`
adding 4 years ago			`</body>`
adding 4 years ago
adding new buttons, media 4 years ago			`</html`