Compare commits
No commits in common. 'main' and 'release/0.4' have entirely different histories.
main
...
release/0.
@ -1,9 +1,11 @@
|
||||
# Plain UI - Simple Framework for Building Apps and Websites
|
||||
# Plain UI - Lightweight CSS UI Framework for Building Apps and Websites
|
||||
|
||||
**Plain UI is currently under development, Styles, Names and Documentation may change until Release!**
|
||||
|
||||
[Documentation](https://plain-ui.com)
|
||||
|
||||
## Install
|
||||
|
||||
```
|
||||
npm install @tiny-components/plain-ui --save
|
||||
npm install @tentakelfabrik/plain-ui --save
|
||||
```
|
||||
@ -1,593 +0,0 @@
|
||||
<!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 | Simple UI Framework for Apps and Websites
|
||||
</title>
|
||||
<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 ">
|
||||
Basics
|
||||
</a>
|
||||
<a href="components.html" class="tabs__item tabs__item--selected">
|
||||
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">
|
||||
Components
|
||||
</h1>
|
||||
|
||||
<!-- -->
|
||||
<h2>
|
||||
Badge
|
||||
</h2>
|
||||
|
||||
<span class="badge">
|
||||
Category
|
||||
</span>
|
||||
<span class="badge badge--round">
|
||||
99+
|
||||
</span>
|
||||
|
||||
|
||||
<!-- -->
|
||||
<h2 class="m-top-5">
|
||||
Bar
|
||||
</h2>
|
||||
<div class="bar">
|
||||
<div class="bar__start">
|
||||
<button class="button button--transparent">
|
||||
<svg class="icon fill-text-contrast fill-text-hover marginless" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-close"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bar__main">
|
||||
Bar
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- -->
|
||||
<h2 class="m-top-5">
|
||||
Buttons
|
||||
</h2>
|
||||
<div>
|
||||
<button class="button">
|
||||
Default
|
||||
</button>
|
||||
<button class="button">
|
||||
Icon
|
||||
<svg class="icon fill-success" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-check"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="button button--selected">
|
||||
Selected
|
||||
</button>
|
||||
<button class="button" disabled>
|
||||
Disabled
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button class="button button--danger">
|
||||
danger
|
||||
</button>
|
||||
<button class="button button--success">
|
||||
success
|
||||
</button>
|
||||
<button class="button button--warning">
|
||||
warning
|
||||
</button>
|
||||
<button class="button button--info">
|
||||
info
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button class="button button--full">
|
||||
full
|
||||
</button>
|
||||
<button class="button button--full button--danger">
|
||||
danger
|
||||
</button>
|
||||
<button class="button button--full button--success">
|
||||
success
|
||||
</button>
|
||||
<button class="button button--full button--warning">
|
||||
warning
|
||||
</button>
|
||||
<button class="button button--full button--info">
|
||||
info
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button class="button button--outline">
|
||||
outline
|
||||
</button>
|
||||
</div>
|
||||
<button class="button button--small">
|
||||
Small
|
||||
</button>
|
||||
|
||||
|
||||
<!-- -->
|
||||
<h2 class="m-top-5">
|
||||
Field
|
||||
</h2>
|
||||
<div class="field-group">
|
||||
<label class="field-label">
|
||||
Name
|
||||
<input class="field-text" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="field-group">
|
||||
<label class="field-label">
|
||||
Message
|
||||
<textarea class="field-text"></textarea>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="field-group field-group--valid">
|
||||
<label class="field-label">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use class="test" xlink:href="symbol-defs.svg#icon-check"></use>
|
||||
</svg>
|
||||
Surname
|
||||
<input class="field-text" />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="field-group field-group--error">
|
||||
<label class="field-label">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use class="test" xlink:href="symbol-defs.svg#icon-warning"></use>
|
||||
</svg>
|
||||
E-Mail
|
||||
<input class="field-text" />
|
||||
</label>
|
||||
<span class="field-error">
|
||||
String is not valid
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label class="field-label">
|
||||
Towns
|
||||
<select class="field-choice">
|
||||
<option></option>
|
||||
<option value="lonytown">Lonytown</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label class="field-label">
|
||||
<input class="field-choice" type="checkbox" value="true" />
|
||||
<svg class="icon field-choice__unchecked" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-checkbox"></use>
|
||||
</svg>
|
||||
<svg class="icon field-choice__checked" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-checkbox-checked"></use>
|
||||
</svg>
|
||||
Checkbox
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label class="field-label">
|
||||
<input class="field-choice" type="radio" name="radio" value="true" />
|
||||
<svg class="icon field-choice__unchecked" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-circle"></use>
|
||||
</svg>
|
||||
<svg class="icon field-choice__checked" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-circle-check"></use>
|
||||
</svg>
|
||||
Radio A
|
||||
</label>
|
||||
<label class="field-label">
|
||||
<input class="field-choice" type="radio" name="radio" value="true" />
|
||||
<svg class="icon field-choice__unchecked" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-circle"></use>
|
||||
</svg>
|
||||
<svg class="icon field-choice__checked" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-circle-check"></use>
|
||||
</svg>
|
||||
Radio B
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label class="field-label">
|
||||
<input class="field-choice" type="checkbox" name="radio" value="true" />
|
||||
<span class="field-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- -->
|
||||
<h2 class="m-top-5">
|
||||
Group
|
||||
</h2>
|
||||
|
||||
<div class="group">
|
||||
<div class="group__item background-color-primary color-text-contrast p-3">
|
||||
One
|
||||
</div>
|
||||
<div class="group__item background-color-primary color-text-contrast p-3">
|
||||
Two
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<h2>
|
||||
Hero
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero">
|
||||
<img style="max-height: 400px;" src="/image.jpg" />
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<h2 class="m-top-5">
|
||||
Icon
|
||||
</h2>
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-check"></use>
|
||||
</svg>
|
||||
<svg class="icon fill-danger" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-camera"></use>
|
||||
</svg>
|
||||
<svg class="icon fill-success" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-clock"></use>
|
||||
</svg>
|
||||
|
||||
<!-- Loading -->
|
||||
<h2 class="m-top-5">
|
||||
Loading
|
||||
</h2>
|
||||
<div class="loading">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
<h2 class="m-top-5">
|
||||
Media
|
||||
</h2>
|
||||
<figure class="figure">
|
||||
<img class="media" src="/image.jpg" />
|
||||
<figcaption class="figure__caption">
|
||||
food truck yr franzen pabst
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<!-- modal -->
|
||||
<h2 class="m-top-5">
|
||||
Modal
|
||||
</h2>
|
||||
<button class="button" onclick="openModal()">
|
||||
Click me!
|
||||
</button>
|
||||
<script type="text/javascript">
|
||||
function openModal() {
|
||||
document.querySelector('.modal').classList.add('modal--open')
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
document.querySelector('.modal').classList.remove('modal--open')
|
||||
}
|
||||
</script>
|
||||
<div class="modal">
|
||||
<div class="modal__inner">
|
||||
<div class="modal__title t-center">
|
||||
<svg class="icon fill-text-contrast" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-close"></use>
|
||||
</svg>
|
||||
Delete
|
||||
</div>
|
||||
<div class="modal__body center">
|
||||
Do you really wan't to delete all files?
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="button button--outline button--danger" onclick="closeModal()">
|
||||
Confirm
|
||||
</button>
|
||||
<button class="button button--outline float-right" onclick="closeModal()">
|
||||
Reject
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- panel -->
|
||||
<h2 class="m-top-5">
|
||||
Panel
|
||||
</h2>
|
||||
<div class="panel">
|
||||
<div class="bar">
|
||||
<div class="bar__start">
|
||||
<button type="button" class="button button--transparent">
|
||||
<svg class="icon fill-text-contrast" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-expand"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bar__main">Panel</div>
|
||||
<div class="bar__end">
|
||||
<button type="button" class="button button--transparent">
|
||||
<svg class="icon fill-text-contrast" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-edit"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<button type="button" class="button button--transparent">
|
||||
<svg class="icon fill-text-contrast" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-close"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel__body">
|
||||
<div class="content m-last-child-0">
|
||||
<p>
|
||||
Hallo
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- progress -->
|
||||
<h2 class="m-top-5">
|
||||
Progress
|
||||
</h2>
|
||||
|
||||
<div class="progress">
|
||||
<div class="progress__inner" style="width: 20%;"></div>
|
||||
</div>
|
||||
|
||||
<!-- sidebar -->
|
||||
<h2 class="m-top-5">
|
||||
Sidebar
|
||||
</h2>
|
||||
<button class="button" onclick="openSidebar()">
|
||||
Click me!
|
||||
</button>
|
||||
<script type="text/javascript">
|
||||
function openSidebar() {
|
||||
document.querySelector('.sidebar').classList.add('sidebar--open')
|
||||
}
|
||||
|
||||
function closeSidebar() {
|
||||
document.querySelector('.sidebar').classList.remove('sidebar--open')
|
||||
}
|
||||
</script>
|
||||
<div class="sidebar">
|
||||
<div class="sidebar__inner">
|
||||
<div class="sidebar__body">
|
||||
|
||||
</div>
|
||||
<div class="sidebar__footer">
|
||||
<button type="button" class="button m-bottom-0" onclick="closeSidebar()">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- sidebar -->
|
||||
<h2 class="m-top-5">
|
||||
Sidebar + Bar
|
||||
</h2>
|
||||
|
||||
<button class="button" onclick="openSidebarBar()">
|
||||
Click me!
|
||||
</button>
|
||||
<script type="text/javascript">
|
||||
function openSidebarBar() {
|
||||
document.querySelector('#sidebar-bar').classList.add('sidebar--open')
|
||||
}
|
||||
|
||||
function closeSidebarBar() {
|
||||
document.querySelector('#sidebar-bar').classList.remove('sidebar--open')
|
||||
}
|
||||
</script>
|
||||
<div id="sidebar-bar" class="sidebar">
|
||||
<div class="sidebar__inner">
|
||||
|
||||
<div class="bar">
|
||||
<div class="bar__main">
|
||||
Sidebar
|
||||
</div>
|
||||
<div class="bar__end">
|
||||
<button class="button button--transparent" type="button" onclick="closeSidebarBar()">
|
||||
<svg class="icon fill-text-contrast" aria-hidden="true">
|
||||
<use xlink:href="/symbol-defs.svg#icon-close"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar__body">
|
||||
|
||||
</div>
|
||||
<div class="sidebar__footer">
|
||||
<button type="button" class="button m-bottom-0" onclick="closeSidebarBar()">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- table -->
|
||||
<h2 class="m-top-5">
|
||||
Table
|
||||
</h2>
|
||||
|
||||
<table class="table table--striped table--hover">
|
||||
<thead>
|
||||
<tr class="table__tr">
|
||||
<th class="table__th">A</th>
|
||||
<th class="table__th">B</th>
|
||||
<th class="table__th">C</th>
|
||||
<th class="table__th">D</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="table__tr">
|
||||
<td class="table__td">1</td>
|
||||
<td class="table__td">2</td>
|
||||
<td class="table__td">3</td>
|
||||
<td class="table__td">4</td>
|
||||
</tr>
|
||||
<tr class="table__tr">
|
||||
<td class="table__td">1</td>
|
||||
<td class="table__td">2</td>
|
||||
<td class="table__td">3</td>
|
||||
<td class="table__td">4</td>
|
||||
</tr>
|
||||
<tr class="table__tr">
|
||||
<td class="table__td">1</td>
|
||||
<td class="table__td">2</td>
|
||||
<td class="table__td">3</td>
|
||||
<td class="table__td">4</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!--- tabs -->
|
||||
<h2 class="m-top-5">
|
||||
Tabs
|
||||
</h2>
|
||||
|
||||
<div class="tabs">
|
||||
<a class="tabs__item tabs__item--selected">
|
||||
Tab A
|
||||
</a>
|
||||
<a class="tabs__item">
|
||||
Tab B
|
||||
</a>
|
||||
<a class="tabs__item">
|
||||
Tab C
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h2 class="m-top-5">
|
||||
Tabs + Bar
|
||||
</h2>
|
||||
|
||||
<div class="bar">
|
||||
<div class="tabs tabs--contrast">
|
||||
<a class="tabs__item tabs__item--selected">
|
||||
Tab A
|
||||
</a>
|
||||
<a class="tabs__item">
|
||||
Tab B
|
||||
</a>
|
||||
<a class="tabs__item">
|
||||
Tab C
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- toast -->
|
||||
<h2 class="m-top-5">
|
||||
Toast
|
||||
</h2>
|
||||
|
||||
<script type="text/javascript">
|
||||
function addToast() {
|
||||
document.querySelector('#toast').style.display = 'block'
|
||||
|
||||
setTimeout(function() {
|
||||
document.querySelector('#toast .toast').classList.add('toast--animation')
|
||||
}, 100)
|
||||
}
|
||||
|
||||
function closeToast() {
|
||||
setTimeout(function() {
|
||||
document.querySelector('#toast').style.display = 'none'
|
||||
}, 1000)
|
||||
|
||||
document.querySelector('#toast .toast').classList.remove('toast--animation')
|
||||
}
|
||||
</script>
|
||||
|
||||
<button class="button" onclick="addToast()">
|
||||
Click me!
|
||||
</button>
|
||||
|
||||
<div id="toast" class="toast-wrapper" style="display: none;">
|
||||
<div class="toast toast--danger">
|
||||
<div class="toast__icon">
|
||||
<svg class="icon fill-text-contrast" aria-hidden="true">
|
||||
<use xlink:href="/symbol-defs.svg#icon-warning"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="toast__body">
|
||||
Warning! Action not Working!
|
||||
</div>
|
||||
<button class="toast__button" onclick="closeToast()">
|
||||
<svg class="icon fill-text-contrast" aria-hidden="true">
|
||||
<use xlink:href="/symbol-defs.svg#icon-close"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="site-footer m-top-5">
|
||||
<div class="bar">
|
||||
<div class="bar__main">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html
|
||||
@ -1,72 +0,0 @@
|
||||
<!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 | Simple UI Framework for Apps and Websites
|
||||
</title>
|
||||
<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 ">
|
||||
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 tabs__item--selected">
|
||||
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">
|
||||
Helpers
|
||||
</h1>
|
||||
|
||||
<div class="panel panel--border-highlight border-color-danger m-bottom-4">
|
||||
<div class="panel__body">
|
||||
<div class="content m-last-child-0">
|
||||
<p>
|
||||
@TODO Documentation
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="site-footer m-top-5">
|
||||
<div class="bar">
|
||||
<div class="bar__main">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html
|
||||
@ -1,108 +0,0 @@
|
||||
<!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 | Simple UI Framework for Apps and Websites
|
||||
</title>
|
||||
<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>
|
||||
|
||||
<!-- -->
|
||||
<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
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,13 +0,0 @@
|
||||
(self["webpackChunk_tiny_components_plain_ui"] = self["webpackChunk_tiny_components_plain_ui"] || []).push([["spritemap"],{
|
||||
|
||||
/***/ "?c20d":
|
||||
/*!******************************!*\
|
||||
!*** spritemap-dummy-module ***!
|
||||
\******************************/
|
||||
/***/ (() => {
|
||||
|
||||
|
||||
|
||||
/***/ })
|
||||
|
||||
}]);
|
||||
|
Before Width: | Height: | Size: 66 KiB |
File diff suppressed because it is too large
Load Diff
@ -1,25 +1,25 @@
|
||||
{
|
||||
"name": "@tiny-components/plain-ui",
|
||||
"version": "0.6.0",
|
||||
"name": "@tentakelfabrik/plain-ui",
|
||||
"version": "0.4.0",
|
||||
"description": "Simple UI Framework for Building Apps and Websites",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git@github.com:node001-net/plain-ui.git"
|
||||
"url": "git@github.com:tentakelfabrik/plain-ui.git"
|
||||
},
|
||||
"author": "Björn Hase",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"html-webpack-plugin": "^5.5.0",
|
||||
"laravel-mix": "^6.0.43",
|
||||
"laravel-mix": "^6.0.16",
|
||||
"laravel-mix-purgecss": "^6.0.0",
|
||||
"postcss-css-variables": "^0.18.0",
|
||||
"resolve-url-loader": "^5.0.0",
|
||||
"sass": "^1.49.9",
|
||||
"sass-loader": "^12.6.0",
|
||||
"svg-spritemap-webpack-plugin": "^4.4.0",
|
||||
"svgo": "^2.8.0"
|
||||
"postcss-css-variables": "^0.17.0",
|
||||
"resolve-url-loader": "^3.1.2",
|
||||
"sass": "^1.32.8",
|
||||
"sass-loader": "^11.0.1",
|
||||
"svg-spritemap-webpack-plugin": "^3.9.1",
|
||||
"svgo": "^1.3.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"normalize.css": "^8.0.1"
|
||||
"normalize.css": "^8.0.1",
|
||||
"reflex-grid": "^2.0.7"
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,969 @@
|
||||
<!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__start">
|
||||
<h1 class="m-top-4 m-bottom-4 h4">
|
||||
Plain UI 0.3
|
||||
</h1>
|
||||
</div>
|
||||
<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>
|
||||
<a class="button button--small m-left-sm-3 m-bottom-0" href="https://gitea.tentakelfabrik.de/" rel="noopener" target="_blank">
|
||||
Gitea
|
||||
<svg class="m-left-3 icon fill-text" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-gitea"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</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">
|
||||
Basics
|
||||
</a>
|
||||
<a href="components.html" class="tabs__item tabs__item--selected">
|
||||
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">
|
||||
<h1 class="highlight m-bottom-5">
|
||||
Components
|
||||
</h1>
|
||||
|
||||
<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>
|
||||
|
||||
<h2>Badge</h2>
|
||||
<div class="content m-bottom-4">
|
||||
<code><span class="badge">
|
||||
Category
|
||||
</span>
|
||||
</code>
|
||||
</div>
|
||||
<span class="badge">
|
||||
Category
|
||||
</span>
|
||||
<span class="badge badge--round">
|
||||
99+
|
||||
</span>
|
||||
|
||||
<h2 class="m-top-5">
|
||||
Bar
|
||||
</h2>
|
||||
<div class="content m-bottom-4">
|
||||
<code><div class="bar">
|
||||
<div class="bar__start">
|
||||
<button class="button button--transparent">
|
||||
<svg class="icon fill-text-contrast marginless" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-close"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bar__main">
|
||||
Bar
|
||||
</div>
|
||||
</div>
|
||||
</code>
|
||||
</div>
|
||||
<div class="bar">
|
||||
<div class="bar__start">
|
||||
<button class="button button--transparent">
|
||||
<svg class="icon fill-text-contrast marginless" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-close"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bar__main">
|
||||
Bar
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="m-top-5">
|
||||
Buttons
|
||||
</h2>
|
||||
<div class="content">
|
||||
<code><button class="button">
|
||||
Default
|
||||
</button>
|
||||
</code>
|
||||
</div>
|
||||
<div>
|
||||
<button class="button">
|
||||
Default
|
||||
</button>
|
||||
<button class="button">
|
||||
Icon
|
||||
<svg class="icon fill-success" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-check"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="button button--selected">
|
||||
Selected
|
||||
</button>
|
||||
<button class="button" disabled>
|
||||
Disabled
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button class="button button--danger">
|
||||
danger
|
||||
</button>
|
||||
<button class="button button--success">
|
||||
success
|
||||
</button>
|
||||
<button class="button button--warning">
|
||||
warning
|
||||
</button>
|
||||
<button class="button button--info">
|
||||
info
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button class="button button--full">
|
||||
full
|
||||
</button>
|
||||
<button class="button button--full button--danger">
|
||||
danger
|
||||
</button>
|
||||
<button class="button button--full button--success">
|
||||
success
|
||||
</button>
|
||||
<button class="button button--full button--warning">
|
||||
warning
|
||||
</button>
|
||||
<button class="button button--full button--info">
|
||||
info
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button class="button button--outline">
|
||||
outline
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button class="button button--small">
|
||||
Small
|
||||
</button>
|
||||
|
||||
<h2 class="m-top-5">Field</h2>
|
||||
<div class="content">
|
||||
<code><div class="field-group">
|
||||
<label class="field-label">
|
||||
Name
|
||||
<input class="field-text" />
|
||||
</label>
|
||||
</div>
|
||||
</code>
|
||||
</div>
|
||||
<div class="field-group">
|
||||
<label class="field-label">
|
||||
Name
|
||||
<input class="field-text" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="field-group">
|
||||
<label class="field-label">
|
||||
Message
|
||||
<textarea class="field-text"></textarea>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<code><div class="field-group field-group--valid">
|
||||
<label class="field-label">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use class="test" xlink:href="symbol-defs.svg#icon-check"></use>
|
||||
</svg>
|
||||
Surname
|
||||
<input class="field-text" />
|
||||
</label>
|
||||
</div>
|
||||
</code>
|
||||
</div>
|
||||
<div class="field-group field-group--valid">
|
||||
<label class="field-label">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use class="test" xlink:href="symbol-defs.svg#icon-check"></use>
|
||||
</svg>
|
||||
Surname
|
||||
<input class="field-text" />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<code><div class="field-group field-group--error">
|
||||
<label class="field-label">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use class="test" xlink:href="symbol-defs.svg#icon-warning"></use>
|
||||
</svg>
|
||||
E-Mail
|
||||
<input class="field-text" />
|
||||
</label>
|
||||
<span class="field-error">
|
||||
String is not valid
|
||||
</span>
|
||||
</div>
|
||||
</code>
|
||||
</div>
|
||||
<div class="field-group field-group--error">
|
||||
<label class="field-label">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use class="test" xlink:href="symbol-defs.svg#icon-warning"></use>
|
||||
</svg>
|
||||
E-Mail
|
||||
<input class="field-text" />
|
||||
</label>
|
||||
<span class="field-error">
|
||||
String is not valid
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<code><div class="field-group">
|
||||
<label class="field-label">
|
||||
Towns
|
||||
<select class="field-choice">
|
||||
<option></option>
|
||||
<option value="lonytown">Lonytown</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</code>
|
||||
</div>
|
||||
<div class="field-group">
|
||||
<label class="field-label">
|
||||
Towns
|
||||
<select class="field-choice">
|
||||
<option></option>
|
||||
<option value="lonytown">Lonytown</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<code><div class="field-group">
|
||||
<label class="field-label">
|
||||
<input class="field-choice" type="checkbox" value="true" />
|
||||
<svg class="icon field-choice__unchecked" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-checkbox"></use>
|
||||
</svg>
|
||||
<svg class="icon field-choice__checked" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-checkbox-checked"></use>
|
||||
</svg>
|
||||
Checkbox
|
||||
</label>
|
||||
</div>
|
||||
</code>
|
||||
</div>
|
||||
<div class="field-group">
|
||||
<label class="field-label">
|
||||
<input class="field-choice" type="checkbox" value="true" />
|
||||
<svg class="icon field-choice__unchecked" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-checkbox"></use>
|
||||
</svg>
|
||||
<svg class="icon field-choice__checked" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-checkbox-checked"></use>
|
||||
</svg>
|
||||
Checkbox
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<code><div class="field-group">
|
||||
<label class="field-label">
|
||||
<input class="field-choice" type="radio" name="radio" value="true" />
|
||||
<svg class="icon field-choice__unchecked" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-circle"></use>
|
||||
</svg>
|
||||
<svg class="icon field-choice__checked" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-circle-check"></use>
|
||||
</svg>
|
||||
Radio A
|
||||
</label>
|
||||
<label class="field-label">
|
||||
<input class="field-choice" type="radio" name="radio" value="true" />
|
||||
<svg class="icon field-choice__unchecked" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-circle"></use>
|
||||
</svg>
|
||||
<svg class="icon field-choice__checked" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-circle-check"></use>
|
||||
</svg>
|
||||
Radio B
|
||||
</label>
|
||||
</div>
|
||||
</code>
|
||||
</div>
|
||||
<div class="field-group">
|
||||
<label class="field-label">
|
||||
<input class="field-choice" type="radio" name="radio" value="true" />
|
||||
<svg class="icon field-choice__unchecked" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-circle"></use>
|
||||
</svg>
|
||||
<svg class="icon field-choice__checked" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-circle-check"></use>
|
||||
</svg>
|
||||
Radio A
|
||||
</label>
|
||||
<label class="field-label">
|
||||
<input class="field-choice" type="radio" name="radio" value="true" />
|
||||
<svg class="icon field-choice__unchecked" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-circle"></use>
|
||||
</svg>
|
||||
<svg class="icon field-choice__checked" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-circle-check"></use>
|
||||
</svg>
|
||||
Radio B
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<code><div class="field-group">
|
||||
<label class="field-label">
|
||||
<input class="field-choice" type="checkbox" name="radio" value="true" />
|
||||
<span class="field-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
</code>
|
||||
</div>
|
||||
<div class="field-group">
|
||||
<label class="field-label">
|
||||
<input class="field-choice" type="checkbox" name="radio" value="true" />
|
||||
<span class="field-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h2 class="m-top-5">
|
||||
Group
|
||||
</h2>
|
||||
<div class="content">
|
||||
<code><div class="group">
|
||||
<div class="group__item background-color-primary color-text-contrast p-3">
|
||||
One
|
||||
</div>
|
||||
<div class="group__item background-color-primary color-text-contrast p-3">
|
||||
Two
|
||||
</div>
|
||||
</div>
|
||||
</code>
|
||||
</div>
|
||||
<div class="group">
|
||||
<div class="group__item background-color-primary color-text-contrast p-3">
|
||||
One
|
||||
</div>
|
||||
<div class="group__item background-color-primary color-text-contrast p-3">
|
||||
Two
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<h2>
|
||||
Hero
|
||||
</h2>
|
||||
<div class="content">
|
||||
<code><div class="hero">
|
||||
<img style="max-height: 400px;" src="/image.jpg" />
|
||||
</div>
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero">
|
||||
<img style="max-height: 400px;" src="/image.jpg" />
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<h2 class="m-top-5">Icon</h2>
|
||||
<div class="content">
|
||||
<code><svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-check"></use>
|
||||
</svg>
|
||||
<svg class="icon fill-danger" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-camera"></use>
|
||||
</svg>
|
||||
<svg class="icon fill-success" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-clock"></use>
|
||||
</svg>
|
||||
</code>
|
||||
</div>
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-check"></use>
|
||||
</svg>
|
||||
<svg class="icon fill-danger" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-camera"></use>
|
||||
</svg>
|
||||
<svg class="icon fill-success" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-clock"></use>
|
||||
</svg>
|
||||
|
||||
<!-- Loading -->
|
||||
<h2 class="m-top-5">Loading</h2>
|
||||
<div class="content">
|
||||
<code><div class="loading">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</code>
|
||||
</div>
|
||||
<div class="loading">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
<h2 class="m-top-5">
|
||||
Media
|
||||
</h2>
|
||||
<div class="content">
|
||||
<code><figure class="figure">
|
||||
<img class="media" src="/image.jpg" />
|
||||
<figcaption class="figure__caption">
|
||||
food truck yr franzen pabst
|
||||
</figcaption>
|
||||
</figure>
|
||||
</code>
|
||||
</div>
|
||||
<figure class="figure">
|
||||
<img class="media" src="/image.jpg" />
|
||||
<figcaption class="figure__caption">
|
||||
food truck yr franzen pabst
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
|
||||
<!-- modal -->
|
||||
<h2 class="m-top-5">
|
||||
Modal
|
||||
</h2>
|
||||
<div class="content">
|
||||
<code><div class="modal">
|
||||
<div class="modal__inner">
|
||||
<div class="modal__title t-center">
|
||||
<svg class="icon fill-text-contrast" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-close"></use>
|
||||
</svg>
|
||||
Delete
|
||||
</div>
|
||||
<div class="modal__body">
|
||||
Do you really wan't to delete all files?
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="button button--outline button--danger" onclick="closeModal()">
|
||||
Confirm
|
||||
</button>
|
||||
<button class="button button--outline float-right" onclick="closeModal()">
|
||||
Reject
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</code>
|
||||
</div>
|
||||
<button class="button" onclick="openModal()">
|
||||
Click me!
|
||||
</button>
|
||||
<script type="text/javascript">
|
||||
function openModal() {
|
||||
document.querySelector('.modal').classList.add('modal--open')
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
document.querySelector('.modal').classList.remove('modal--open')
|
||||
}
|
||||
</script>
|
||||
<div class="modal">
|
||||
<div class="modal__inner">
|
||||
<div class="modal__title t-center">
|
||||
<svg class="icon fill-text-contrast" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-close"></use>
|
||||
</svg>
|
||||
Delete
|
||||
</div>
|
||||
<div class="modal__body center">
|
||||
Do you really wan't to delete all files?
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="button button--outline button--danger" onclick="closeModal()">
|
||||
Confirm
|
||||
</button>
|
||||
<button class="button button--outline float-right" onclick="closeModal()">
|
||||
Reject
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- panel -->
|
||||
<h2 class="m-top-5">
|
||||
Panel
|
||||
</h2>
|
||||
<div class="content">
|
||||
<code><div class="panel">
|
||||
<div class="bar">
|
||||
<div class="bar__start">
|
||||
<button type="button" class="button button--transparent">
|
||||
<svg class="icon fill-text-contrast" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-expand"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bar__main">Panel</div>
|
||||
<div class="bar__end">
|
||||
<button type="button" class="button button--transparent">
|
||||
<svg class="icon fill-text-contrast" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-edit"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<button type="button" class="button button--transparent">
|
||||
<svg class="icon fill-text-contrast" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-close"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel__body">
|
||||
<div class="content m-last-child-0">
|
||||
<p>
|
||||
Content
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</code>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="bar">
|
||||
<div class="bar__start">
|
||||
<button type="button" class="button button--transparent">
|
||||
<svg class="icon fill-text-contrast" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-expand"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bar__main">Panel</div>
|
||||
<div class="bar__end">
|
||||
<button type="button" class="button button--transparent">
|
||||
<svg class="icon fill-text-contrast" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-edit"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<button type="button" class="button button--transparent">
|
||||
<svg class="icon fill-text-contrast" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-close"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel__body">
|
||||
<div class="content m-last-child-0">
|
||||
<p>
|
||||
Hallo
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- progress -->
|
||||
<h2 class="m-top-5">
|
||||
Progress
|
||||
</h2>
|
||||
<div class="content">
|
||||
<code><div class="progress">
|
||||
<div class="progress__inner" style="width: 20%;"></div>
|
||||
</div>
|
||||
</code>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress__inner" style="width: 20%;"></div>
|
||||
</div>
|
||||
|
||||
<!-- sidebar -->
|
||||
<h2 class="m-top-5">
|
||||
Sidebar
|
||||
</h2>
|
||||
<div class="content">
|
||||
<code><div class="sidebar">
|
||||
<div class="sidebar__inner">
|
||||
<div class="sidebar__body">
|
||||
|
||||
</div>
|
||||
<div class="sidebar__footer">
|
||||
<button type="button" class="button m-bottom-0">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</code>
|
||||
</div>
|
||||
<button class="button" onclick="openSidebar()">
|
||||
Click me!
|
||||
</button>
|
||||
<script type="text/javascript">
|
||||
function openSidebar() {
|
||||
document.querySelector('.sidebar').classList.add('sidebar--open')
|
||||
}
|
||||
|
||||
function closeSidebar() {
|
||||
document.querySelector('.sidebar').classList.remove('sidebar--open')
|
||||
}
|
||||
</script>
|
||||
<div class="sidebar">
|
||||
<div class="sidebar__inner">
|
||||
<div class="sidebar__body">
|
||||
|
||||
</div>
|
||||
<div class="sidebar__footer">
|
||||
<button type="button" class="button m-bottom-0" onclick="closeSidebar()">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- sidebar -->
|
||||
<h2 class="m-top-5">
|
||||
Sidebar + Bar
|
||||
</h2>
|
||||
<div class="content">
|
||||
<code><div class="sidebar">
|
||||
<div class="sidebar__inner">
|
||||
|
||||
<div class="bar">
|
||||
<div class="bar__main">
|
||||
Sidebar
|
||||
</div>
|
||||
<div class="bar__end">
|
||||
<button class="button button--transparent" type="button">
|
||||
<svg class="icon fill-text-contrast" aria-hidden="true">
|
||||
<use xlink:href="/symbol-defs.svg#icon-close"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar__body">
|
||||
|
||||
</div>
|
||||
<div class="sidebar__footer">
|
||||
<button type="button" class="button m-bottom-0">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</code>
|
||||
</div>
|
||||
<button class="button" onclick="openSidebarBar()">
|
||||
Click me!
|
||||
</button>
|
||||
<script type="text/javascript">
|
||||
function openSidebarBar() {
|
||||
document.querySelector('#sidebar-bar').classList.add('sidebar--open')
|
||||
}
|
||||
|
||||
function closeSidebarBar() {
|
||||
document.querySelector('#sidebar-bar').classList.remove('sidebar--open')
|
||||
}
|
||||
</script>
|
||||
<div id="sidebar-bar" class="sidebar">
|
||||
<div class="sidebar__inner">
|
||||
|
||||
<div class="bar">
|
||||
<div class="bar__main">
|
||||
Sidebar
|
||||
</div>
|
||||
<div class="bar__end">
|
||||
<button class="button button--transparent" type="button" onclick="closeSidebarBar()">
|
||||
<svg class="icon fill-text-contrast" aria-hidden="true">
|
||||
<use xlink:href="/symbol-defs.svg#icon-close"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar__body">
|
||||
|
||||
</div>
|
||||
<div class="sidebar__footer">
|
||||
<button type="button" class="button m-bottom-0" onclick="closeSidebarBar()">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- table -->
|
||||
<h2 class="m-top-5">
|
||||
Table
|
||||
</h2>
|
||||
<div class="content">
|
||||
<code><table class="table table--striped table--hover">
|
||||
<thead>
|
||||
<tr class="table__tr">
|
||||
<th class="table__th">A</th>
|
||||
<th class="table__th">B</th>
|
||||
<th class="table__th">C</th>
|
||||
<th class="table__th">D</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="table__tr">
|
||||
<td class="table__td">1</td>
|
||||
<td class="table__td">2</td>
|
||||
<td class="table__td">3</td>
|
||||
<td class="table__td">4</td>
|
||||
</tr>
|
||||
<tr class="table__tr">
|
||||
<td class="table__td">1</td>
|
||||
<td class="table__td">2</td>
|
||||
<td class="table__td">3</td>
|
||||
<td class="table__td">4</td>
|
||||
</tr>
|
||||
<tr class="table__tr">
|
||||
<td class="table__td">1</td>
|
||||
<td class="table__td">2</td>
|
||||
<td class="table__td">3</td>
|
||||
<td class="table__td">4</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</code>
|
||||
</div>
|
||||
<table class="table table--striped table--hover">
|
||||
<thead>
|
||||
<tr class="table__tr">
|
||||
<th class="table__th">A</th>
|
||||
<th class="table__th">B</th>
|
||||
<th class="table__th">C</th>
|
||||
<th class="table__th">D</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="table__tr">
|
||||
<td class="table__td">1</td>
|
||||
<td class="table__td">2</td>
|
||||
<td class="table__td">3</td>
|
||||
<td class="table__td">4</td>
|
||||
</tr>
|
||||
<tr class="table__tr">
|
||||
<td class="table__td">1</td>
|
||||
<td class="table__td">2</td>
|
||||
<td class="table__td">3</td>
|
||||
<td class="table__td">4</td>
|
||||
</tr>
|
||||
<tr class="table__tr">
|
||||
<td class="table__td">1</td>
|
||||
<td class="table__td">2</td>
|
||||
<td class="table__td">3</td>
|
||||
<td class="table__td">4</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
<!--- tabs -->
|
||||
<h2 class="m-top-5">
|
||||
Tabs
|
||||
</h2>
|
||||
<div class="content">
|
||||
<code><div class="tabs">
|
||||
<a class="tabs__item tabs__item--selected">
|
||||
Tab A
|
||||
</a>
|
||||
<a class="tabs__item">
|
||||
Tab B
|
||||
</a>
|
||||
<a class="tabs__item">
|
||||
Tab C
|
||||
</a>
|
||||
</div>
|
||||
</code>
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<a class="tabs__item tabs__item--selected">
|
||||
Tab A
|
||||
</a>
|
||||
<a class="tabs__item">
|
||||
Tab B
|
||||
</a>
|
||||
<a class="tabs__item">
|
||||
Tab C
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h2 class="m-top-5">
|
||||
Tabs + Bar
|
||||
</h2>
|
||||
<div class="content">
|
||||
<code><div class="bar">
|
||||
<div class="tabs tabs--contrast">
|
||||
<a class="tabs__item tabs__item--selected">
|
||||
Tab A
|
||||
</a>
|
||||
<a class="tabs__item">
|
||||
Tab B
|
||||
</a>
|
||||
<a class="tabs__item">
|
||||
Tab C
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</code>
|
||||
</div>
|
||||
<div class="bar">
|
||||
<div class="tabs tabs--contrast">
|
||||
<a class="tabs__item tabs__item--selected">
|
||||
Tab A
|
||||
</a>
|
||||
<a class="tabs__item">
|
||||
Tab B
|
||||
</a>
|
||||
<a class="tabs__item">
|
||||
Tab C
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- toast -->
|
||||
<h2 class="m-top-5">
|
||||
Toast
|
||||
</h2>
|
||||
<div class="content">
|
||||
<code><div class="toast-wrapper">
|
||||
<div class="toast">
|
||||
<div class="toast__icon">
|
||||
<svg class="icon fill-text-contrast" aria-hidden="true">
|
||||
<use xlink:href="/symbol-defs.svg#icon-warning"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="toast__body">
|
||||
|
||||
</div>
|
||||
<div class="toast__button">
|
||||
<svg class="icon fill-text-contrast" aria-hidden="true">
|
||||
<use xlink:href="/symbol-defs.svg#icon-close"></use>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
function addToast() {
|
||||
document.querySelector('#toast').style.display = 'block'
|
||||
|
||||
setTimeout(function() {
|
||||
document.querySelector('#toast .toast').classList.add('toast--animation')
|
||||
}, 100)
|
||||
}
|
||||
|
||||
function closeToast() {
|
||||
setTimeout(function() {
|
||||
document.querySelector('#toast').style.display = 'none'
|
||||
}, 1000)
|
||||
|
||||
document.querySelector('#toast .toast').classList.remove('toast--animation')
|
||||
}
|
||||
</script>
|
||||
|
||||
<button class="button" onclick="addToast()">
|
||||
Click me!
|
||||
</button>
|
||||
|
||||
<div id="toast" class="toast-wrapper" style="display: none;">
|
||||
<div class="toast toast--danger">
|
||||
<div class="toast__icon">
|
||||
<svg class="icon fill-text-contrast" aria-hidden="true">
|
||||
<use xlink:href="/symbol-defs.svg#icon-warning"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="toast__body">
|
||||
Warning! Action not Working!
|
||||
</div>
|
||||
<button class="toast__button" onclick="closeToast()">
|
||||
<svg class="icon fill-text-contrast" aria-hidden="true">
|
||||
<use xlink:href="/symbol-defs.svg#icon-close"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="site-footer m-top-5">
|
||||
<div class="bar">
|
||||
<div class="bar__main">
|
||||
<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>
|
||||
</body>
|
||||
</html
|
||||
@ -0,0 +1,105 @@
|
||||
<!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__start">
|
||||
<h1 class="m-top-4 m-bottom-4 h4">
|
||||
Plain UI 0.3
|
||||
</h1>
|
||||
</div>
|
||||
<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>
|
||||
<a class="button button--small m-left-sm-3 m-bottom-0" href="https://gitea.tentakelfabrik.de/" rel="noopener" target="_blank">
|
||||
Gitea
|
||||
<svg class="m-left-3 icon fill-text" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-gitea"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</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">
|
||||
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 tabs__item--selected">
|
||||
Helpers
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<h1 class="highlight m-bottom-5">
|
||||
Helpers
|
||||
</h1>
|
||||
|
||||
<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 class="panel panel--border-highlight border-color-danger m-bottom-4">
|
||||
<div class="panel__body">
|
||||
<div class="content m-last-child-0">
|
||||
<p>
|
||||
@TODO Documentation
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="site-footer m-top-5">
|
||||
<div class="bar">
|
||||
<div class="bar__main">
|
||||
<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>
|
||||
</body>
|
||||
</html
|
||||
|
Before Width: | Height: | Size: 578 KiB After Width: | Height: | Size: 578 KiB |
@ -0,0 +1,90 @@
|
||||
<!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__start">
|
||||
<h1 class="m-top-4 m-bottom-4 h4">
|
||||
Plain UI 0.3
|
||||
</h1>
|
||||
</div>
|
||||
<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>
|
||||
<a class="button button--small m-left-sm-3 m-bottom-0" href="https://gitea.tentakelfabrik.de/" rel="noopener" target="_blank">
|
||||
Gitea
|
||||
<svg class="m-left-3 icon fill-text" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-gitea"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</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">
|
||||
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 m-top-6">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
</body>
|
||||
</html
|
||||
@ -0,0 +1,90 @@
|
||||
<!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__start">
|
||||
<h1 class="m-top-4 m-bottom-4 h4">
|
||||
Plain UI 0.3
|
||||
</h1>
|
||||
</div>
|
||||
<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>
|
||||
<a class="button button--small m-left-sm-3 m-bottom-0" href="https://gitea.tentakelfabrik.de/" rel="noopener" target="_blank">
|
||||
Gitea
|
||||
<svg class="m-left-3 icon fill-text" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-gitea"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</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">
|
||||
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 m-top-6">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
</body>
|
||||
</html
|
||||
@ -0,0 +1,271 @@
|
||||
<!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__start">
|
||||
<h1 class="m-top-4 m-bottom-4 h4">
|
||||
Plain UI 0.3
|
||||
</h1>
|
||||
</div>
|
||||
<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>
|
||||
<a class="button button--small m-left-sm-3 m-bottom-0" href="https://gitea.tentakelfabrik.de/" rel="noopener" target="_blank">
|
||||
Gitea
|
||||
<svg class="m-left-3 icon fill-text" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-gitea"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</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">
|
||||
<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>
|
||||
|
||||
<p>
|
||||
<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.
|
||||
</p>
|
||||
<p>
|
||||
Plain UI
|
||||
</p>
|
||||
<h3 class="h5">
|
||||
Contribution
|
||||
</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://tailwindcss.com/" class="strong" rel="noopener" target="_blank">TailwindCSS</a> for showing new ideas and concepts to handle Helper-Classes
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://reflexgrid.com/" class="strong" rel="noopener" target="_blank">Reflex Grid</a> for a great flex grid
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://necolas.github.io/normalize.css/" class="strong" rel="noopener" target="_blank">normalize.css</a> for resetting styles in all Browsers
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://icons.mono.company/" class="strong" rel="noopener" target="_blank">Mono Icons</a> for a beautiful Iconset
|
||||
</li>
|
||||
</ul>
|
||||
</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 @tentakelfabrik/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>
|
||||
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.
|
||||
</p>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<h2 class="highlight">
|
||||
Core
|
||||
</h2>
|
||||
|
||||
<h3 class="m-top-5">
|
||||
Normalize
|
||||
</h3>
|
||||
<div class="content">
|
||||
<p>
|
||||
This is mainly done by <a href="https://necolas.github.io/normalize.css/" rel="noopener" target="_blank">normalize.css</a> with a few Modification.
|
||||
</p>
|
||||
</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 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>
|
||||
</div>
|
||||
<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 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>
|
||||
</body>
|
||||
|
||||
</html
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@
|
||||
(self.webpackChunk_tentakelfabrik_plain_ui=self.webpackChunk_tentakelfabrik_plain_ui||[]).push([[355],{256:()=>{}}]);
|
||||
|
After Width: | Height: | Size: 66 KiB |
@ -1,56 +0,0 @@
|
||||
<div class="container">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
|
||||
<h1 class="highlight m-top-5 m-bottom-5">
|
||||
Basics
|
||||
</h1>
|
||||
|
||||
<!-- -->
|
||||
<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>
|
||||
@ -1,541 +0,0 @@
|
||||
<div class="container">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
|
||||
<h1 class="highlight m-top-5 m-bottom-5">
|
||||
Components
|
||||
</h1>
|
||||
|
||||
<!-- -->
|
||||
<h2>
|
||||
Badge
|
||||
</h2>
|
||||
|
||||
<span class="badge">
|
||||
Category
|
||||
</span>
|
||||
<span class="badge badge--round">
|
||||
99+
|
||||
</span>
|
||||
|
||||
|
||||
<!-- -->
|
||||
<h2 class="m-top-5">
|
||||
Bar
|
||||
</h2>
|
||||
<div class="bar">
|
||||
<div class="bar__start">
|
||||
<button class="button button--transparent">
|
||||
<svg class="icon fill-text-contrast fill-text-hover marginless" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-close"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bar__main">
|
||||
Bar
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- -->
|
||||
<h2 class="m-top-5">
|
||||
Buttons
|
||||
</h2>
|
||||
<div>
|
||||
<button class="button">
|
||||
Default
|
||||
</button>
|
||||
<button class="button">
|
||||
Icon
|
||||
<svg class="icon fill-success" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-check"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="button button--selected">
|
||||
Selected
|
||||
</button>
|
||||
<button class="button" disabled>
|
||||
Disabled
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button class="button button--danger">
|
||||
danger
|
||||
</button>
|
||||
<button class="button button--success">
|
||||
success
|
||||
</button>
|
||||
<button class="button button--warning">
|
||||
warning
|
||||
</button>
|
||||
<button class="button button--info">
|
||||
info
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button class="button button--full">
|
||||
full
|
||||
</button>
|
||||
<button class="button button--full button--danger">
|
||||
danger
|
||||
</button>
|
||||
<button class="button button--full button--success">
|
||||
success
|
||||
</button>
|
||||
<button class="button button--full button--warning">
|
||||
warning
|
||||
</button>
|
||||
<button class="button button--full button--info">
|
||||
info
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button class="button button--outline">
|
||||
outline
|
||||
</button>
|
||||
</div>
|
||||
<button class="button button--small">
|
||||
Small
|
||||
</button>
|
||||
|
||||
|
||||
<!-- -->
|
||||
<h2 class="m-top-5">
|
||||
Field
|
||||
</h2>
|
||||
<div class="field-group">
|
||||
<label class="field-label">
|
||||
Name
|
||||
<input class="field-text" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="field-group">
|
||||
<label class="field-label">
|
||||
Message
|
||||
<textarea class="field-text"></textarea>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="field-group field-group--valid">
|
||||
<label class="field-label">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use class="test" xlink:href="symbol-defs.svg#icon-check"></use>
|
||||
</svg>
|
||||
Surname
|
||||
<input class="field-text" />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="field-group field-group--error">
|
||||
<label class="field-label">
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use class="test" xlink:href="symbol-defs.svg#icon-warning"></use>
|
||||
</svg>
|
||||
E-Mail
|
||||
<input class="field-text" />
|
||||
</label>
|
||||
<span class="field-error">
|
||||
String is not valid
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label class="field-label">
|
||||
Towns
|
||||
<select class="field-choice">
|
||||
<option></option>
|
||||
<option value="lonytown">Lonytown</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label class="field-label">
|
||||
<input class="field-choice" type="checkbox" value="true" />
|
||||
<svg class="icon field-choice__unchecked" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-checkbox"></use>
|
||||
</svg>
|
||||
<svg class="icon field-choice__checked" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-checkbox-checked"></use>
|
||||
</svg>
|
||||
Checkbox
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label class="field-label">
|
||||
<input class="field-choice" type="radio" name="radio" value="true" />
|
||||
<svg class="icon field-choice__unchecked" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-circle"></use>
|
||||
</svg>
|
||||
<svg class="icon field-choice__checked" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-circle-check"></use>
|
||||
</svg>
|
||||
Radio A
|
||||
</label>
|
||||
<label class="field-label">
|
||||
<input class="field-choice" type="radio" name="radio" value="true" />
|
||||
<svg class="icon field-choice__unchecked" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-circle"></use>
|
||||
</svg>
|
||||
<svg class="icon field-choice__checked" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-circle-check"></use>
|
||||
</svg>
|
||||
Radio B
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label class="field-label">
|
||||
<input class="field-choice" type="checkbox" name="radio" value="true" />
|
||||
<span class="field-switch"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- -->
|
||||
<h2 class="m-top-5">
|
||||
Group
|
||||
</h2>
|
||||
|
||||
<div class="group">
|
||||
<div class="group__item background-color-primary color-text-contrast p-3">
|
||||
One
|
||||
</div>
|
||||
<div class="group__item background-color-primary color-text-contrast p-3">
|
||||
Two
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<h2>
|
||||
Hero
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero">
|
||||
<img style="max-height: 400px;" src="/image.jpg" />
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<h2 class="m-top-5">
|
||||
Icon
|
||||
</h2>
|
||||
<svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-check"></use>
|
||||
</svg>
|
||||
<svg class="icon fill-danger" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-camera"></use>
|
||||
</svg>
|
||||
<svg class="icon fill-success" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-clock"></use>
|
||||
</svg>
|
||||
|
||||
<!-- Loading -->
|
||||
<h2 class="m-top-5">
|
||||
Loading
|
||||
</h2>
|
||||
<div class="loading">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
<h2 class="m-top-5">
|
||||
Media
|
||||
</h2>
|
||||
<figure class="figure">
|
||||
<img class="media" src="/image.jpg" />
|
||||
<figcaption class="figure__caption">
|
||||
food truck yr franzen pabst
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<!-- modal -->
|
||||
<h2 class="m-top-5">
|
||||
Modal
|
||||
</h2>
|
||||
<button class="button" onclick="openModal()">
|
||||
Click me!
|
||||
</button>
|
||||
<script type="text/javascript">
|
||||
function openModal() {
|
||||
document.querySelector('.modal').classList.add('modal--open')
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
document.querySelector('.modal').classList.remove('modal--open')
|
||||
}
|
||||
</script>
|
||||
<div class="modal">
|
||||
<div class="modal__inner">
|
||||
<div class="modal__title t-center">
|
||||
<svg class="icon fill-text-contrast" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-close"></use>
|
||||
</svg>
|
||||
Delete
|
||||
</div>
|
||||
<div class="modal__body center">
|
||||
Do you really wan't to delete all files?
|
||||
</div>
|
||||
<div class="modal__footer">
|
||||
<button class="button button--outline button--danger" onclick="closeModal()">
|
||||
Confirm
|
||||
</button>
|
||||
<button class="button button--outline float-right" onclick="closeModal()">
|
||||
Reject
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- panel -->
|
||||
<h2 class="m-top-5">
|
||||
Panel
|
||||
</h2>
|
||||
<div class="panel">
|
||||
<div class="bar">
|
||||
<div class="bar__start">
|
||||
<button type="button" class="button button--transparent">
|
||||
<svg class="icon fill-text-contrast" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-expand"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="bar__main">Panel</div>
|
||||
<div class="bar__end">
|
||||
<button type="button" class="button button--transparent">
|
||||
<svg class="icon fill-text-contrast" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-edit"></use>
|
||||
</svg>
|
||||
</button>
|
||||
<button type="button" class="button button--transparent">
|
||||
<svg class="icon fill-text-contrast" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-close"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel__body">
|
||||
<div class="content m-last-child-0">
|
||||
<p>
|
||||
Hallo
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- progress -->
|
||||
<h2 class="m-top-5">
|
||||
Progress
|
||||
</h2>
|
||||
|
||||
<div class="progress">
|
||||
<div class="progress__inner" style="width: 20%;"></div>
|
||||
</div>
|
||||
|
||||
<!-- sidebar -->
|
||||
<h2 class="m-top-5">
|
||||
Sidebar
|
||||
</h2>
|
||||
<button class="button" onclick="openSidebar()">
|
||||
Click me!
|
||||
</button>
|
||||
<script type="text/javascript">
|
||||
function openSidebar() {
|
||||
document.querySelector('.sidebar').classList.add('sidebar--open')
|
||||
}
|
||||
|
||||
function closeSidebar() {
|
||||
document.querySelector('.sidebar').classList.remove('sidebar--open')
|
||||
}
|
||||
</script>
|
||||
<div class="sidebar">
|
||||
<div class="sidebar__inner">
|
||||
<div class="sidebar__body">
|
||||
|
||||
</div>
|
||||
<div class="sidebar__footer">
|
||||
<button type="button" class="button m-bottom-0" onclick="closeSidebar()">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- sidebar -->
|
||||
<h2 class="m-top-5">
|
||||
Sidebar + Bar
|
||||
</h2>
|
||||
|
||||
<button class="button" onclick="openSidebarBar()">
|
||||
Click me!
|
||||
</button>
|
||||
<script type="text/javascript">
|
||||
function openSidebarBar() {
|
||||
document.querySelector('#sidebar-bar').classList.add('sidebar--open')
|
||||
}
|
||||
|
||||
function closeSidebarBar() {
|
||||
document.querySelector('#sidebar-bar').classList.remove('sidebar--open')
|
||||
}
|
||||
</script>
|
||||
<div id="sidebar-bar" class="sidebar">
|
||||
<div class="sidebar__inner">
|
||||
|
||||
<div class="bar">
|
||||
<div class="bar__main">
|
||||
Sidebar
|
||||
</div>
|
||||
<div class="bar__end">
|
||||
<button class="button button--transparent" type="button" onclick="closeSidebarBar()">
|
||||
<svg class="icon fill-text-contrast" aria-hidden="true">
|
||||
<use xlink:href="/symbol-defs.svg#icon-close"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar__body">
|
||||
|
||||
</div>
|
||||
<div class="sidebar__footer">
|
||||
<button type="button" class="button m-bottom-0" onclick="closeSidebarBar()">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- table -->
|
||||
<h2 class="m-top-5">
|
||||
Table
|
||||
</h2>
|
||||
|
||||
<table class="table table--striped table--hover">
|
||||
<thead>
|
||||
<tr class="table__tr">
|
||||
<th class="table__th">A</th>
|
||||
<th class="table__th">B</th>
|
||||
<th class="table__th">C</th>
|
||||
<th class="table__th">D</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="table__tr">
|
||||
<td class="table__td">1</td>
|
||||
<td class="table__td">2</td>
|
||||
<td class="table__td">3</td>
|
||||
<td class="table__td">4</td>
|
||||
</tr>
|
||||
<tr class="table__tr">
|
||||
<td class="table__td">1</td>
|
||||
<td class="table__td">2</td>
|
||||
<td class="table__td">3</td>
|
||||
<td class="table__td">4</td>
|
||||
</tr>
|
||||
<tr class="table__tr">
|
||||
<td class="table__td">1</td>
|
||||
<td class="table__td">2</td>
|
||||
<td class="table__td">3</td>
|
||||
<td class="table__td">4</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!--- tabs -->
|
||||
<h2 class="m-top-5">
|
||||
Tabs
|
||||
</h2>
|
||||
|
||||
<div class="tabs">
|
||||
<a class="tabs__item tabs__item--selected">
|
||||
Tab A
|
||||
</a>
|
||||
<a class="tabs__item">
|
||||
Tab B
|
||||
</a>
|
||||
<a class="tabs__item">
|
||||
Tab C
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h2 class="m-top-5">
|
||||
Tabs + Bar
|
||||
</h2>
|
||||
|
||||
<div class="bar">
|
||||
<div class="tabs tabs--contrast">
|
||||
<a class="tabs__item tabs__item--selected">
|
||||
Tab A
|
||||
</a>
|
||||
<a class="tabs__item">
|
||||
Tab B
|
||||
</a>
|
||||
<a class="tabs__item">
|
||||
Tab C
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- toast -->
|
||||
<h2 class="m-top-5">
|
||||
Toast
|
||||
</h2>
|
||||
|
||||
<script type="text/javascript">
|
||||
function addToast() {
|
||||
document.querySelector('#toast').style.display = 'block'
|
||||
|
||||
setTimeout(function() {
|
||||
document.querySelector('#toast .toast').classList.add('toast--animation')
|
||||
}, 100)
|
||||
}
|
||||
|
||||
function closeToast() {
|
||||
setTimeout(function() {
|
||||
document.querySelector('#toast').style.display = 'none'
|
||||
}, 1000)
|
||||
|
||||
document.querySelector('#toast .toast').classList.remove('toast--animation')
|
||||
}
|
||||
</script>
|
||||
|
||||
<button class="button" onclick="addToast()">
|
||||
Click me!
|
||||
</button>
|
||||
|
||||
<div id="toast" class="toast-wrapper" style="display: none;">
|
||||
<div class="toast toast--danger">
|
||||
<div class="toast__icon">
|
||||
<svg class="icon fill-text-contrast" aria-hidden="true">
|
||||
<use xlink:href="/symbol-defs.svg#icon-warning"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="toast__body">
|
||||
Warning! Action not Working!
|
||||
</div>
|
||||
<button class="toast__button" onclick="closeToast()">
|
||||
<svg class="icon fill-text-contrast" aria-hidden="true">
|
||||
<use xlink:href="/symbol-defs.svg#icon-close"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,20 +0,0 @@
|
||||
<div class="container">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
|
||||
<h1 class="highlight m-top-5 m-bottom-5">
|
||||
Helpers
|
||||
</h1>
|
||||
|
||||
<div class="panel panel--border-highlight border-color-danger m-bottom-4">
|
||||
<div class="panel__body">
|
||||
<div class="content m-last-child-0">
|
||||
<p>
|
||||
@TODO Documentation
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,124 +0,0 @@
|
||||
<div class="container">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
|
||||
<h1 class="highlight m-top-5 m-bottom-5">
|
||||
Layout
|
||||
</h1>
|
||||
|
||||
<h2 class="m-top-5">
|
||||
Grid
|
||||
</h2>
|
||||
|
||||
<div class="panel panel--border-highlight border-color-info m-bottom-4">
|
||||
<div class="panel__body">
|
||||
<div class="content m-bottom-last-child-0">
|
||||
<p>
|
||||
Plain UI uses the <a href="https://reflexgrid.com/" target="_blank" rel=“noopener“>Reflex Grid</a>,
|
||||
there will be a full integration of this Grid for better Support.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="m-top-5">
|
||||
Masonry
|
||||
</h3>
|
||||
|
||||
<div class="content">
|
||||
<code><div class="masonry">
|
||||
<figure class="masonry__item">
|
||||
<img class="media object-fit-cover h-100" src="/image.jpg" />
|
||||
</figure>
|
||||
</div>
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<div class="masonry">
|
||||
<figure class="masonry__item">
|
||||
<img class="media object-fit-cover h-100" src="/image.jpg" />
|
||||
</figure>
|
||||
<figure class="masonry__item">
|
||||
<img class="media object-fit-cover h-100" src="/image.jpg" />
|
||||
</figure>
|
||||
<figure class="masonry__item">
|
||||
<img class="media object-fit-cover h-100" src="/image.jpg" />
|
||||
</figure>
|
||||
<figure class="masonry__item">
|
||||
<img class="media object-fit-cover h-100" src="/image.jpg" />
|
||||
</figure>
|
||||
<figure class="masonry__item">
|
||||
<img class="media object-fit-cover h-100" src="/image.jpg" />
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<h2>Slider</h2>
|
||||
<div class="content">
|
||||
<code><div class="slider">
|
||||
<div class="slider__inner">
|
||||
<div class="slider__item w-col-12">
|
||||
<figure class="figure w-col-12">
|
||||
<img class="media" src="/image.jpg" />
|
||||
<figcaption class="figure__caption">
|
||||
food truck yr franzen pabst
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="slider__item w-col-12">
|
||||
<figure class="figure w-col-12">
|
||||
<img class="media" src="/image.jpg" />
|
||||
<figcaption class="figure__caption">
|
||||
food truck yr franzen pabst
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="slider__item w-col-12">
|
||||
<figure class="figure w-col-12">
|
||||
<img class="media" src="/image.jpg" />
|
||||
<figcaption class="figure__caption">
|
||||
food truck yr franzen pabst
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="slider">
|
||||
<div class="slider__inner">
|
||||
<div class="slider__item w-col-12">
|
||||
<figure class="figure w-col-12">
|
||||
<img class="media h-70 object-fit-cover" src="/image.jpg" />
|
||||
<figcaption class="figure__caption">
|
||||
food truck yr franzen pabst
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="slider__item w-col-12">
|
||||
<figure class="figure w-col-12">
|
||||
<img class="media h-70 object-fit-cover" src="/image.jpg" />
|
||||
<figcaption class="figure__caption">
|
||||
food truck yr franzen pabst
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="slider__item w-col-12">
|
||||
<figure class="figure w-col-12">
|
||||
<img class="media h-70 object-fit-cover" src="/image.jpg" />
|
||||
<figcaption class="figure__caption">
|
||||
food truck yr franzen pabst
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,53 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en_EN">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>
|
||||
<%= htmlWebpackPlugin.options.strings.title %> <%= htmlWebpackPlugin.options.strings.version %> | <%= htmlWebpackPlugin.options.strings.description %>
|
||||
</title>
|
||||
<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">
|
||||
<%= htmlWebpackPlugin.options.strings.title %> <%= htmlWebpackPlugin.options.strings.version %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bar__main justify-center">
|
||||
<div class="tabs tabs--contrast">
|
||||
<a href="index.html" class="tabs__item <% if (htmlWebpackPlugin.options.current === 'index.html') { %>tabs__item--selected<% } %>">
|
||||
Basics
|
||||
</a>
|
||||
<a href="components.html" class="tabs__item <% if (htmlWebpackPlugin.options.current === 'components.html') { %>tabs__item--selected<% } %>">
|
||||
Components
|
||||
</a>
|
||||
<a href="layout.html" class="tabs__item <% if (htmlWebpackPlugin.options.current === 'layout.html') { %>tabs__item--selected<% } %>">
|
||||
Layout
|
||||
</a>
|
||||
<a href="helpers.html" class="tabs__item <% if (htmlWebpackPlugin.options.current === 'helpers.html') { %>tabs__item--selected<% } %>">
|
||||
Helpers
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<%= htmlWebpackPlugin.options.content %>
|
||||
|
||||
<footer class="site-footer m-top-5">
|
||||
<div class="bar">
|
||||
<div class="bar__main">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 975 B |
@ -0,0 +1,14 @@
|
||||
/**
|
||||
* Container
|
||||
*
|
||||
*
|
||||
* @author Björn Hase, Tentakelfabrik
|
||||
* @license http://opensource.org/licenses/MIT The MIT License
|
||||
* @link https://github.com/tentakelfabrik/crispy-css
|
||||
*
|
||||
*/
|
||||
|
||||
.container--app {
|
||||
max-width: 100%;
|
||||
padding: 15px 30px;
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
@import 'reflex-grid';
|
||||
|
||||
$legacy-support: false;
|
||||
@ -1,233 +0,0 @@
|
||||
/**
|
||||
* grid
|
||||
*
|
||||
* This Grid is mainly the Reflex Grid from Lee Gordon https://reflexgrid.com/, he has
|
||||
* done a great work, for i few changes it was needed to integrated
|
||||
*
|
||||
* @author Björn Hase, me@herr-hase.wtf
|
||||
* @license http://opensource.org/licenses/MIT The MIT License
|
||||
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
@import
|
||||
'grid/mixins',
|
||||
'grid/helpers';
|
||||
|
||||
.container,
|
||||
.container-full {
|
||||
@include box-sizing(border-box);
|
||||
|
||||
width: 100%;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: ($grid__spacing * 2);
|
||||
padding-left: ($grid__spacing * 2);
|
||||
|
||||
.grid {
|
||||
margin-right: -$grid__spacing;
|
||||
margin-left: -$grid__spacing;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
@media (min-width: $grid__xs) {
|
||||
max-width: $grid__xs;
|
||||
}
|
||||
|
||||
@media (min-width: $grid__sm) {
|
||||
max-width: $grid__sm;
|
||||
}
|
||||
|
||||
@media (min-width: $grid__md) {
|
||||
max-width: $grid__md;
|
||||
}
|
||||
|
||||
@media (min-width: $grid__lg) {
|
||||
max-width: $grid__lg;
|
||||
}
|
||||
|
||||
@media (min-width: $grid__xlg) {
|
||||
max-width: $grid__xlg;
|
||||
}
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: block;
|
||||
|
||||
@include box-sizing(border-box);
|
||||
@include display-flex();
|
||||
@include flex-wrap();
|
||||
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
|
||||
// handle when lists are used as a grid
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
|
||||
.col-item {
|
||||
@include box-sizing(border-box);
|
||||
position: relative;
|
||||
width: 100%;
|
||||
vertical-align: top;
|
||||
padding: $grid__spacing;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
|
||||
// handle grids nested in columns
|
||||
.grid {
|
||||
@include flex(1, 1, auto);
|
||||
margin: -$grid__spacing;
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 1 through $grid__columns {
|
||||
.col-#{$i} {
|
||||
@extend .col-item;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* grid generation
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
@include grid-make(col-);
|
||||
|
||||
@media (min-width: $grid__xs) {
|
||||
@include grid-make(col-xs-);
|
||||
}
|
||||
|
||||
@media (min-width: $grid__sm) {
|
||||
@include grid-make(col-sm-);
|
||||
}
|
||||
|
||||
@media (min-width: $grid__md) {
|
||||
@include grid-make(col-md-);
|
||||
}
|
||||
|
||||
@media (min-width: $grid__lg) {
|
||||
@include grid-make(col-lg-);
|
||||
}
|
||||
|
||||
@media (min-width: $grid__xlg) {
|
||||
@include grid-make(col-xlg-);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* col-auto
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
.col-auto {
|
||||
@extend .col-item;
|
||||
@include grid-setup-auto-cols();
|
||||
}
|
||||
|
||||
.col-xs-auto, .col-sm-auto, .col-lg-auto, .col-xlg-auto {
|
||||
@extend .col-item;
|
||||
}
|
||||
|
||||
@media (min-width: $grid__xs) {
|
||||
.col-xs-auto {
|
||||
@include grid-setup-auto-cols();
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $grid__sm) {
|
||||
.col-sm-auto {
|
||||
@include grid-setup-auto-cols();
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $grid__md) {
|
||||
.col-md-auto {
|
||||
@include grid-setup-auto-cols();
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $grid__lg) {
|
||||
.col-lg-auto {
|
||||
@include grid-setup-auto-cols();
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $grid__xlg) {
|
||||
.col-xlg-auto {
|
||||
@include grid-setup-auto-cols();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* order helpers generation
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
@include grid-make-order-helpers();
|
||||
|
||||
@media (min-width: $grid__xs) {
|
||||
@include grid-loop-order-helpers($grid__columns, '-xs');
|
||||
}
|
||||
|
||||
@media (min-width: $grid__sm) {
|
||||
@include grid-loop-order-helpers($grid__columns, '-sm');
|
||||
}
|
||||
|
||||
@media (min-width: $grid__md) {
|
||||
@include grid-loop-order-helpers($grid__columns, '-md');
|
||||
}
|
||||
|
||||
@media (min-width: $grid__lg) {
|
||||
@include grid-loop-order-helpers($grid__columns, '-lg');
|
||||
}
|
||||
|
||||
@media (min-width: $grid__xlg) {
|
||||
@include grid-loop-order-helpers($grid__columns, '-xlg');
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* offset helpers generation
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
@include grid-make-offset-helpers();
|
||||
|
||||
@media (min-width: $grid__xs) {
|
||||
@include grid-loop-offset-helpers($grid__columns - 1, '-xs');
|
||||
}
|
||||
|
||||
@media (min-width: $grid__sm) {
|
||||
@include grid-loop-offset-helpers($grid__columns - 1, '-sm');
|
||||
}
|
||||
|
||||
@media (min-width: $grid__md) {
|
||||
@include grid-loop-offset-helpers($grid__columns - 1, '-md');
|
||||
}
|
||||
|
||||
@media (min-width: $grid__lg) {
|
||||
@include grid-loop-offset-helpers($grid__columns - 1, '-lg');
|
||||
}
|
||||
|
||||
@media (min-width: $grid__xlg) {
|
||||
@include grid-loop-offset-helpers($grid__columns - 1, '-xlg');
|
||||
}
|
||||
@ -1,234 +0,0 @@
|
||||
/**
|
||||
* grid: helpers
|
||||
*
|
||||
*
|
||||
* @author Björn Hase, me@herr-hase.wtf
|
||||
* @license http://opensource.org/licenses/MIT The MIT License
|
||||
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||||
*
|
||||
*/
|
||||
|
||||
.wrap {
|
||||
@include flex-wrap(wrap);
|
||||
}
|
||||
|
||||
.no-wrap {
|
||||
@include flex-wrap(nowrap);
|
||||
|
||||
// This is mostly needed to stop the grid contents overflowing in the
|
||||
// ie10 implementation of flexbox but it can't hurt in other browsers
|
||||
// as it is the desired behaviour of non wrapping flex items
|
||||
[class*="col-"] {
|
||||
@include flex-shrink(1);
|
||||
}
|
||||
}
|
||||
|
||||
.wrap-reverse {
|
||||
@include flex-wrap(wrap-reverse);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* flex-direction
|
||||
*
|
||||
*/
|
||||
|
||||
.direction-row {
|
||||
@include flex-direction(row);
|
||||
}
|
||||
|
||||
.direction-row-reverse {
|
||||
@include flex-direction(row-reverse);
|
||||
}
|
||||
|
||||
.direction-column {
|
||||
@include flex-direction(column);
|
||||
}
|
||||
|
||||
.direction-column-reverse {
|
||||
@include flex-direction(column-reverse);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* align items (cross axis)
|
||||
*
|
||||
*/
|
||||
|
||||
.align-start {
|
||||
@include align-items(flex-start);
|
||||
}
|
||||
|
||||
.align-end {
|
||||
@include align-items(flex-end);
|
||||
}
|
||||
|
||||
.align-center {
|
||||
@include align-items(center);
|
||||
}
|
||||
|
||||
.align-baseline {
|
||||
@include align-items(baseline);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* align content (cross axis)
|
||||
*
|
||||
*/
|
||||
|
||||
.align-content-start {
|
||||
@include align-content(flex-start);
|
||||
}
|
||||
|
||||
.align-content-end {
|
||||
@include align-content(flex-end);
|
||||
|
||||
// fallback to legacy vertical-align
|
||||
[class*="col-"] {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.align-content-center {
|
||||
@include align-content(center);
|
||||
}
|
||||
|
||||
.align-content-space-between {
|
||||
@include align-content(space-between);
|
||||
}
|
||||
|
||||
.align-content-space-around {
|
||||
@include align-content(space-around);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* align-self
|
||||
*
|
||||
*/
|
||||
|
||||
.align-self-stretch {
|
||||
@include align-self(stretch);
|
||||
}
|
||||
|
||||
.align-self-start {
|
||||
@include align-self(flex-start);
|
||||
}
|
||||
|
||||
.align-self-end {
|
||||
@include align-self(flex-end);
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.align-self-center {
|
||||
@include align-self(center);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.align-self-baseline {
|
||||
@include align-self(baseline);
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* justify-content (main axis)
|
||||
*
|
||||
*/
|
||||
|
||||
.justify-start {
|
||||
@include justify-content-start();
|
||||
}
|
||||
|
||||
.justify-end {
|
||||
@include justify-content-end();
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
@include justify-content-center();
|
||||
}
|
||||
|
||||
.justify-space-between {
|
||||
@include justify-content-space-between();
|
||||
}
|
||||
|
||||
.justify-space-around {
|
||||
@include justify-content-space-around();
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* cosmetic grid modifiers
|
||||
*
|
||||
*/
|
||||
|
||||
// Removes internal padding from all columns in a grid
|
||||
.grid-bleed {
|
||||
[class*="col-"] {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* col modifiers
|
||||
*
|
||||
*/
|
||||
|
||||
// Makes a column element into a flexbox column
|
||||
.col-grid {
|
||||
@include display-flex();
|
||||
@include flex-direction(column);
|
||||
|
||||
&.direction-row {
|
||||
@include flex-direction(row);
|
||||
}
|
||||
}
|
||||
|
||||
// Removes internal padding from all columns in a grid
|
||||
.col-bleed {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Removes horizontal padding from all columns in a grid
|
||||
.col-bleed-x {
|
||||
padding: $grid__spacing 0;
|
||||
}
|
||||
|
||||
// Removes vertical padding from all columns in a grid
|
||||
.col-bleed-y {
|
||||
padding: 0 $grid__spacing;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* col-grid contents
|
||||
*
|
||||
*/
|
||||
|
||||
.flex-img {
|
||||
display: block;
|
||||
@include flex(0, 0, auto);
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.flex-footer {
|
||||
width: 100%;
|
||||
margin-top: auto;
|
||||
margin-bottom: 0;
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Responsive visibility modifiers
|
||||
*
|
||||
*/
|
||||
|
||||
@include grid-responsive-visibility-helpers();
|
||||
@ -1,360 +0,0 @@
|
||||
/**
|
||||
* grid: mixin
|
||||
*
|
||||
*
|
||||
* @author Björn Hase, me@herr-hase.wtf
|
||||
* @license http://opensource.org/licenses/MIT The MIT License
|
||||
* @link https://gitea.node001.net/tiny-components/plain-ui.git
|
||||
*
|
||||
*/
|
||||
|
||||
@mixin grid-make($class) {
|
||||
@include grid-loop-columns($grid__columns, $class, width);
|
||||
}
|
||||
|
||||
@mixin grid-calc-columns($index, $class, $type) {
|
||||
@if $type == width and $index > 0 {
|
||||
.#{$class}#{$index} {
|
||||
width: percentage(($index / $grid__columns));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin grid-loop-columns($index, $class, $type) {
|
||||
@if $index >= 0 {
|
||||
@include grid-calc-columns($index, $class, $type);
|
||||
|
||||
// next iteration
|
||||
@include grid-loop-columns(($index - 1), $class, $type);
|
||||
}
|
||||
}
|
||||
|
||||
// defaults for auto cols
|
||||
@mixin grid-setup-auto-cols() {
|
||||
@include flex(1, 0, 0px); // a unit on last value is required by IE10-11
|
||||
}
|
||||
|
||||
@mixin grid-reset-text-align() {
|
||||
//
|
||||
// We want to reset any text-align properties set by the grid
|
||||
// (required for the inline-block fallback)
|
||||
// but we don't want to override any text-align properties
|
||||
// set on the individual col-x element
|
||||
// or on any of it's child elements
|
||||
//
|
||||
// 1) set to left by default (works everywhere)
|
||||
// 2) set to start (respects right to left text)
|
||||
//
|
||||
//
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
-moz-text-align-last: left;
|
||||
-moz-text-align-last: start;
|
||||
text-align-last: left;
|
||||
text-align-last: start;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* order class generation mixins
|
||||
*
|
||||
*/
|
||||
|
||||
@mixin order($order: 0) {
|
||||
-webkit-order: $order;
|
||||
order: $order;
|
||||
}
|
||||
|
||||
@mixin grid-make-order-helpers() {
|
||||
@include grid-loop-order-helpers($grid__columns);
|
||||
}
|
||||
|
||||
@mixin grid-loop-order-helpers($index, $breakpoint: null) {
|
||||
@if $index >= 0 {
|
||||
.order#{$breakpoint}-#{$index} {
|
||||
@include order($index);
|
||||
}
|
||||
|
||||
// next iteration
|
||||
@include grid-loop-order-helpers(($index - 1), $breakpoint);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* offset class generation mixins
|
||||
*
|
||||
*/
|
||||
|
||||
@mixin grid-offset($index: 0) {
|
||||
$offset: ($index / $grid__columns);
|
||||
|
||||
// convert to percentage only if not zero
|
||||
@if $offset != 0 {
|
||||
$offset: percentage($offset);
|
||||
}
|
||||
|
||||
margin-left: $offset;
|
||||
}
|
||||
|
||||
@mixin grid-make-offset-helpers() {
|
||||
@include grid-loop-offset-helpers($grid__columns - 1);
|
||||
}
|
||||
|
||||
@mixin grid-loop-offset-helpers($index, $breakpoint: null) {
|
||||
@if $index > 0 and $breakpoint == null {
|
||||
.offset#{$breakpoint}-#{$index} {
|
||||
@include grid-offset($index);
|
||||
}
|
||||
|
||||
// next iteration
|
||||
@include grid-loop-offset-helpers(($index - 1), $breakpoint);
|
||||
|
||||
} @else if $index >= 0 and $breakpoint != null {
|
||||
.offset#{$breakpoint}-#{$index} {
|
||||
@include grid-offset($index);
|
||||
}
|
||||
|
||||
// next iteration
|
||||
@include grid-loop-offset-helpers(($index - 1), $breakpoint);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* modifier mixins
|
||||
*
|
||||
*/
|
||||
|
||||
@mixin display-flex() {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@mixin flex($grow: 0, $shrink: 1, $basis: auto) {
|
||||
-webkit-flex: $grow $shrink $basis;
|
||||
flex: $grow $shrink $basis;
|
||||
}
|
||||
|
||||
@mixin flex-grow($grow:1) {
|
||||
-webkit-flex-grow: $grow;
|
||||
flex-grow: $grow;
|
||||
}
|
||||
|
||||
@mixin flex-shrink($shrink:1) {
|
||||
-webkit-flex-shrink: $shrink;
|
||||
flex-shrink: $shrink;
|
||||
}
|
||||
|
||||
@mixin flex-basis($basis:auto) {
|
||||
-webkit-flex-basis: $basis;
|
||||
flex-basis: $basis;
|
||||
}
|
||||
|
||||
@mixin flex-flow($direction: row, $wrap: nowrap) {
|
||||
-webkit-flex-flow: $direction $wrap;
|
||||
flex-flow: $direction $wrap;
|
||||
}
|
||||
|
||||
@mixin flex-wrap($wrap: wrap) {
|
||||
-webkit-flex-wrap: $wrap;
|
||||
flex-wrap: $wrap;
|
||||
}
|
||||
|
||||
@mixin flex-direction($direction: row) {
|
||||
-webkit-flex-direction: $direction;
|
||||
flex-direction: $direction;
|
||||
}
|
||||
|
||||
@mixin align-items($align: stretch) {
|
||||
-webkit-align-items: $align;
|
||||
align-items: $align;
|
||||
}
|
||||
|
||||
@mixin align-self($align: stretch) {
|
||||
-webkit-align-self: $align;
|
||||
align-self: $align;
|
||||
}
|
||||
|
||||
@mixin align-content($align: stretch) {
|
||||
-webkit-align-content: $align;
|
||||
align-content: $align;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* justify-content
|
||||
*
|
||||
* Uses "text-align" for the fallback inline-block grid
|
||||
* "text-align" is globally supported and works on all rows except the last
|
||||
* "text-align-last", where supported, handles the last line (and, happily, grids with only one row)
|
||||
*
|
||||
*/
|
||||
|
||||
@mixin justify-content-start() {
|
||||
-webkit-justify-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
@mixin justify-content-end() {
|
||||
-webkit-justify-content: flex-end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
@mixin justify-content-center() {
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@mixin justify-content-space-between() {
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@mixin justify-content-space-around() {
|
||||
-webkit-justify-content: space-around;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Responsible Visibility
|
||||
*
|
||||
*/
|
||||
|
||||
@mixin grid-responsive-visibility-helpers() {
|
||||
|
||||
// We need to handle xxs and xlg breakpoints differently
|
||||
$grid__map-breakpoints: map-remove($grid__breakpoints, xxs, xlg);
|
||||
|
||||
.hidden-xxs {
|
||||
@include media-breakpoint-only('xxs') {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@each $bp in map-keys($grid__map-breakpoints)
|
||||
{
|
||||
.hidden-#{$bp}-up {
|
||||
@include media-breakpoint-up($bp) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-#{$bp}-down {
|
||||
@include media-breakpoint-down($bp) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-#{$bp} {
|
||||
@include media-breakpoint-only($bp) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-xlg {
|
||||
@include media-breakpoint-only('xlg') {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Breakpoint viewport sizes and media queries
|
||||
*
|
||||
* Breakpoints are defined as a map of (name: minimum width), order from small to large:
|
||||
* (xs: 576px, sm: 768px, md: 992px)
|
||||
* The map defined in the `$reflex-breakpoints` global variable is used as the `$breakpoints` argument by default.
|
||||
* Name of the next breakpoint, or null for the last breakpoint.
|
||||
* >> breakpoint-next(sm) -> md
|
||||
* >> breakpoint-next(sm, $breakpoints: (xs: 576px, sm: 768px, md: 992px)) -> md
|
||||
* >> breakpoint-next(sm, $breakpoint-names: (xs sm md)) -> md
|
||||
*
|
||||
*/
|
||||
|
||||
@function breakpoint-next($name, $breakpoints: $grid__breakpoints, $breakpoint-names: map-keys($breakpoints)) {
|
||||
$n: index($breakpoint-names, $name);
|
||||
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Minimum breakpoint width. Null for the smallest (first) breakpoint.
|
||||
* breakpoint-min(sm, (xs: 576px, sm: 768px, md: 992px)) -> 768px
|
||||
*
|
||||
*/
|
||||
|
||||
@function breakpoint-min($name, $breakpoints: $grid__breakpoints) {
|
||||
$min: map-get($breakpoints, $name);
|
||||
@return if($min !=0, $min, null);
|
||||
}
|
||||
|
||||
// Maximum breakpoint width. Null for the largest (last) breakpoint.
|
||||
// The maximum value is calculated as the minimum of the next one less 0.1.
|
||||
// >> breakpoint-max(sm, (xs: 576px, sm: 768px, md: 992px)) -> 991px
|
||||
@function breakpoint-max($name, $breakpoints: $grid__breakpoints) {
|
||||
$next: breakpoint-next($name, $breakpoints);
|
||||
@return if($next, breakpoint-min($next, $breakpoints) - 1, null);
|
||||
}
|
||||
|
||||
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint and wider.
|
||||
@mixin media-breakpoint-up($name, $breakpoints: $grid__breakpoints) {
|
||||
$min: breakpoint-min($name, $breakpoints);
|
||||
|
||||
@if $min {
|
||||
@media (min-width: $min) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Media of at most the maximum breakpoint width. No query for the largest breakpoint.
|
||||
* Makes the @content apply to the given breakpoint and narrower.
|
||||
*
|
||||
*/
|
||||
|
||||
@mixin media-breakpoint-down($name, $breakpoints: $grid__breakpoints) {
|
||||
$max: breakpoint-max($name, $breakpoints);
|
||||
|
||||
@if $max {
|
||||
@media (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Media between the breakpoint's minimum and maximum widths.
|
||||
* No minimum for the smallest breakpoint, and no maximum for the largest one.
|
||||
* Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
|
||||
*
|
||||
*/
|
||||
|
||||
@mixin media-breakpoint-only($name, $breakpoints: $grid__breakpoints) {
|
||||
@include media-breakpoint-up($name, $breakpoints) {
|
||||
@include media-breakpoint-down($name, $breakpoints) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin box-sizing($boxmodel) {
|
||||
-webkit-box-sizing: $boxmodel;
|
||||
-moz-box-sizing: $boxmodel;
|
||||
box-sizing: $boxmodel;
|
||||
}
|
||||
Loading…
Reference in new issue