tentakelfabrik
/
plain-ui
1
0
Fork 0
Code Issues 9 Pull Requests 0 Projects 0 Releases 3 Wiki Activity
Browse Source

adding

release/0.2
Björn 3 years ago
parent
499336c532
commit
22e148c710
24 changed files with 1558 additions and 816 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +488
    -0
      dist/Impressum.html
  2. +54
    -66
      dist/components.html
  3. +500
    -0
      dist/helpers.html
  4. +65
    -426
      dist/index.html
  5. +287
    -212
      dist/plain-ui.css
  6. +1
    -0
      mix-manifest.json
  7. +1
    -0
      src/scss/_core.scss
  8. +10
    -4
      src/scss/_variables.scss
  9. +4
    -3
      src/scss/components/_badge.scss
  10. +1
    -0
      src/scss/components/_bar.scss
  11. +3
    -0
      src/scss/components/_group.scss
  12. +4
    -0
      src/scss/components/_hero.scss
  13. +4
    -3
      src/scss/components/_icon.scss
  14. +6
    -3
      src/scss/components/_loading.scss
  15. +7
    -4
      src/scss/components/_panel.scss
  16. +12
    -15
      src/scss/components/_slider.scss
  17. +31
    -34
      src/scss/components/_table.scss
  18. +46
    -31
      src/scss/components/_tabs.scss
  19. +26
    -1
      src/scss/core/_content.scss
  20. +0
    -6
      src/scss/core/_heading.scss
  21. +1
    -1
      src/scss/core/_normalize.scss
  22. +6
    -0
      src/scss/helpers/_spacing.scss
  23. +1
    -2
      src/scss/helpers/_typography.scss
  24. +0
    -5
      src/scss/plain-ui.scss

+ 488
- 0
dist/Impressum.html View File

@ -0,0 +1,488 @@
<!doctype html>
<html lang="en_EN">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>
Plain UI | Lightweight CSS UI Framework for Building Apps and Websites
</title>
<meta name="description" content="Lightweight UI Framework for building fast and clean Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="plain-ui.css">
</head>
<body class="overflow-x-hidden">
<header class="header">
<div class="bar">
<div class="bar__main">
<h1 class="m-top-4 m-bottom-4 h4">
Plain UI 0.1-alpha
</h1>
</div>
</div>
</header>
<div class="container m-top-6">
<div class="grid">
<div class="col-12">
<nav>
<div class="tabs">
<a href="index.html" class="tabs__item">
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-6">
<div class="content">
<p>
Some Text
<p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2>Components</h2>
<h3>Buttons</h3>
<button class="button">
Default
</button>
<button class="button">
Default
<svg class="icon fill-success" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
</button>
<button class="button button--danger">
Danger
</button>
<button class="button button--selected">
Hover
</button>
<button class="button button--outline">
Outline
</button>
<button class="button button--danger button--outline">
Danger Outline
</button>
</div>
<div class="col-12">
<button class="button" disabled>
Disabled
</button>
</div>
<div class="col-12">
<button class="button button--small">
Small
</button>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Icon</h2>
<svg class="icon" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
<svg class="icon icon--danger" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-camera"></use>
</svg>
<svg class="icon icon--success" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-clock"></use>
</svg>
</div>
</div>
<div class="grid">
<div class="col-12">
<h3>
Bar
</h3>
<div class="bar">
<div class="bar__start">
<button class="button button--transparent">
<svg class="icon fill-white marginless" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-close"></use>
</svg>
</button>
</div>
<div class="bar__main">
Bar
</div>
</div>
</div>
</div>
<div class="grid">
<div class="col-12">
<h3>
Tabs
</h3>
<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>
</div>
</div>
<div class="grid">
<div class="col-12">
<h3>
Tabs + Bar
</h3>
<div class="bar">
<div class="bar__start">
<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>
</div>
</div>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Badge</h2>
<span class="badge">
Category
</span>
<span class="badge badge--round">
99+
</span>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Loading</h2>
<div>
<div class="loading">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Panel</h2>
<div class="panel">
<div class="bar">
<div class="bar__start">
<button type="button" class="button button--transparent">
<svg class="icon fill-white" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-expand"></use>
</svg>
</button>
</div>
<div class="bar__main">Test</div>
<div class="bar__end">
<button type="button" class="button button--transparent">
<svg class="icon fill-white" 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-white" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-close"></use>
</svg>
</button>
</div>
</div>
<div class="panel__body">
<div class="content">
<p>
Hallo
</p>
</div>
</div>
</div>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>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-white" 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>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Field</h2>
<form>
<div class="field-group">
<label class="field-label">
Name
<input class="field-text" />
</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-circle"></use>
</svg>
<svg class="icon field-choice__checked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-circle-check"></use>
</svg>
Do it!
</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>
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>
B
</label>
</div>
</form>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Table</h2>
<table class="table table--striped">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2>
Hero
</h2>
<div class="hero">
<img style="max-height: 400px;" src="/image.jpg" />
</div>
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2>
Media
</h2>
<figure class="figure">
<img class="media" src="/image.jpg" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2>Slider</h3>
</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" 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 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>
</body>
</html

+ 54
- 66
dist/components.html View File

@ -4,9 +4,12 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge"> <meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Plain UI | Lightweight CSS UI Framework for Building Apps and Websites</title>
<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="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"> <meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="plain-ui.css"> <link rel="stylesheet" href="plain-ui.css">
</head> </head>
@ -59,8 +62,10 @@
<div class="container"> <div class="container">
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<h2 class="m-bottom-2">Components</h2>
<h2>Components</h2>
<h3>Buttons</h3> <h3>Buttons</h3>
<button class="button"> <button class="button">
Default Default
</button> </button>
@ -97,6 +102,24 @@
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<h2>Icon</h2>
<svg class="icon" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
<svg class="icon icon--danger" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-camera"></use>
</svg>
<svg class="icon icon--success" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-clock"></use>
</svg>
</div>
</div>
<div class="grid">
<div class="col-12">
<h3>
Bar
</h3>
<div class="bar"> <div class="bar">
<div class="bar__start"> <div class="bar__start">
<button class="button button--transparent"> <button class="button button--transparent">
@ -114,6 +137,9 @@
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<h3>
Tabs
</h3>
<div class="tabs"> <div class="tabs">
<a class="tabs__item tabs__item--selected"> <a class="tabs__item tabs__item--selected">
Tab A Tab A
@ -130,30 +156,23 @@
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<h2>Icon</h2>
<svg class="icon" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
<svg class="icon icon--danger" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-camera"></use>
</svg>
<svg class="icon icon--success" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-clock"></use>
</svg>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Content</h2>
<div class="content">
<p>
</p>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<h3>
Tabs + Bar
</h3>
<div class="bar">
<div class="bar__start marginless">
<div class="tabs tabs--secondary">
<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>
</div> </div>
</div> </div>
</div> </div>
@ -185,9 +204,7 @@
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<h2>Panel</h2> <h2>Panel</h2>
<div class="panel"> <div class="panel">
<div class="bar"> <div class="bar">
<div class="bar__start"> <div class="bar__start">
@ -219,7 +236,6 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -389,21 +405,22 @@
<div class="container"> <div class="container">
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<h2 class="">Hero</h2>
<h2>
Hero
</h2>
<div class="hero">
<img style="max-height: 400px;" src="/image.jpg" />
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="hero">
<img style="max-height: 400px;" src="/image.jpg" />
</div>
<div class="container"> <div class="container">
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<h2 class="">Media</h2>
</div>
<div class="col-12">
<h2>
Media
</h2>
<figure class="figure"> <figure class="figure">
<img class="media" src="/image.jpg" /> <img class="media" src="/image.jpg" />
<figcaption class="figure__caption"> <figcaption class="figure__caption">
@ -416,9 +433,6 @@
<div class="container"> <div class="container">
<div class="grid"> <div class="grid">
<div class="col-12">
<h2>Layout</h2>
</div>
<div class="col-12"> <div class="col-12">
<h2>Slider</h3> <h2>Slider</h3>
</div> </div>
@ -470,31 +484,5 @@
</div> </div>
</div> </div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2>Masonry</h3>
<div class="masonry">
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
</div>
</div>
</div>
</div>
</body> </body>
</html </html

+ 500
- 0
dist/helpers.html View File

@ -0,0 +1,500 @@
<!doctype html>
<html lang="en_EN">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Plain UI | Lightweight CSS UI Framework for Building Apps and Websites</title>
<meta name="description" content="Lightweight UI Framework for building fast and clean Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="plain-ui.css">
</head>
<body class="overflow-x-hidden">
<header class="header">
<div class="bar">
<div class="bar__main">
<h1 class="m-top-4 m-bottom-4 h4">
Plain UI 0.1-alpha
</h1>
</div>
</div>
</header>
<div class="container m-top-6">
<div class="grid">
<div class="col-12">
<nav>
<div class="tabs">
<a href="index.html" class="tabs__item">
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-6">
<div class="content">
<p>
Some Text
<p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2 class="m-bottom-2">Components</h2>
<h3>Buttons</h3>
<button class="button">
Default
</button>
<button class="button">
Default
<svg class="icon fill-success" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
</button>
<button class="button button--danger">
Danger
</button>
<button class="button button--selected">
Hover
</button>
<button class="button button--outline">
Outline
</button>
<button class="button button--danger button--outline">
Danger Outline
</button>
</div>
<div class="col-12">
<button class="button" disabled>
Disabled
</button>
</div>
<div class="col-12">
<button class="button button--small">
Small
</button>
</div>
</div>
<div class="grid">
<div class="col-12">
<div class="bar">
<div class="bar__start">
<button class="button button--transparent">
<svg class="icon fill-white marginless" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-close"></use>
</svg>
</button>
</div>
<div class="bar__main">
Bar
</div>
</div>
</div>
</div>
<div class="grid">
<div class="col-12">
<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>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Icon</h2>
<svg class="icon" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
<svg class="icon icon--danger" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-camera"></use>
</svg>
<svg class="icon icon--success" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-clock"></use>
</svg>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Content</h2>
<div class="content">
<p>
</p>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Badge</h2>
<span class="badge">
Category
</span>
<span class="badge badge--round">
99+
</span>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Loading</h2>
<div>
<div class="loading">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Panel</h2>
<div class="panel">
<div class="bar">
<div class="bar__start">
<button type="button" class="button button--transparent">
<svg class="icon fill-white" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-expand"></use>
</svg>
</button>
</div>
<div class="bar__main">Test</div>
<div class="bar__end">
<button type="button" class="button button--transparent">
<svg class="icon fill-white" 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-white" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-close"></use>
</svg>
</button>
</div>
</div>
<div class="panel__body">
<div class="content">
<p>
Hallo
</p>
</div>
</div>
</div>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>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-white" 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>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Field</h2>
<form>
<div class="field-group">
<label class="field-label">
Name
<input class="field-text" />
</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-circle"></use>
</svg>
<svg class="icon field-choice__checked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-circle-check"></use>
</svg>
Do it!
</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>
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>
B
</label>
</div>
</form>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Table</h2>
<table class="table table--striped">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2 class="">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="">Media</h2>
</div>
<div class="col-12">
<figure class="figure">
<img class="media" src="/image.jpg" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2>Layout</h2>
</div>
<div class="col-12">
<h2>Slider</h3>
</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" 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 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>
<div class="container">
<div class="grid">
<div class="col-12">
<h2>Masonry</h3>
<div class="masonry">
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
</div>
</div>
</div>
</div>
</body>
</html

+ 65
- 426
dist/index.html View File

@ -47,17 +47,15 @@
</div> </div>
<div class="container"> <div class="container">
<div class="grid justify-center">
<div class="col-6">
<div class="grid">
<div class="col-12 col-md-8">
<div class="content"> <div class="content">
<p> <p>
<span class="bold">Plain UI</span> is a simple UI Framework. <span class="bold">Plain UI</span> is a simple UI Framework.
It uses strong Utility Classes and has a few Components. It uses strong Utility Classes and has a few Components.
</p> </p>
<p> <p>
Some ideas of this are based Work from the last 10 Years. But also Ideas from Frameworks TailwindCSS.
Some ideas of this are based Work from the last 10 Years. <span class="highlight">But</span> also Ideas from Frameworks TailwindCSS.
</p> </p>
<h3 class="h4 highlight"> <h3 class="h4 highlight">
Contribution Contribution
@ -86,14 +84,12 @@
<div class="container"> <div class="container">
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<h2 class="m-bottom-2 h-contrast">Heading</h2>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<h2 class="highlight">
Installation
</h2>
<div class="content">
<code>npm install plain-ui --save</code>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -101,95 +97,75 @@
<div class="container"> <div class="container">
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<h2 class="m-bottom-2">Components</h2>
<hr>
<h2 class="highlight">
Building
</h2>
<p>
For Buildung use Webpack or a similiar System. Plain UI is build by Laravel-Mix. Consider to use PurgeCSS,
with all Helper-Classes the CSS is really growning. PurgeCSS, with Laravel Mix it looks like this,
</p>
<code>
<h3>Buttons</h3>
<button class="button">
Default
</button>
<button class="button">
Default
<svg class="icon fill-success" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
</button>
<button class="button button--danger">
Danger
</button>
<button class="button button--selected">
Hover
</button>
<button class="button button--outline">
Outline
</button>
<button class="button button--danger button--outline">
Danger Outline
</button>
</div>
<div class="col-12">
<button class="button" disabled>
Disabled
</button>
</div>
<div class="col-12">
<button class="button button--small">
Small
</button>
</code>
</div> </div>
</div> </div>
</div>
<div class="container">
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<div class="bar">
<div class="bar__start">
<button class="button button--transparent">
<svg class="icon fill-white 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="highlight">
Variables + Themes
</h2>
</div> </div>
</div> </div>
</div>
<div class="container">
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<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>
</div>
</div>
<h2 class="m-bottom-2 highlight">
Basic Styles
</h2>
<div class="grid">
<div class="col-12">
<h2>Icon</h2>
<svg class="icon" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
<svg class="icon icon--danger" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-camera"></use>
</svg>
<svg class="icon icon--success" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-clock"></use>
</svg>
</div>
</div>
<h3 class="m-bottom-2 highlight">
Normalize
</h3>
<div class="grid">
<div class="col-12">
<h2>Content</h2>
<p>
For all elements is the same, try set a basic style without anything, no margin, no padding. The Reason is to use Components, Layout and
Helpers for the styling or make your own rules for the elements.
</p>
<h3 class="m-bottom-2 highlight">
Heading + .highlight
</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>
<h2 class="m-bottom-2 highlight">
Heading
</h2>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<h3 class="m-bottom-2 highlight">
Heading + .highlight
</h3>
<h3>
Content
</h3>
<div class="content"> <div class="content">
<p> <p>
</p> </p>
@ -201,344 +177,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="grid">
<div class="col-12">
<h2>Badge</h2>
<span class="badge">
Category
</span>
<span class="badge badge--round">
99+
</span>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Loading</h2>
<div>
<div class="loading">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Panel</h2>
<div class="panel">
<div class="bar">
<div class="bar__start">
<button type="button" class="button button--transparent">
<svg class="icon fill-white" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-expand"></use>
</svg>
</button>
</div>
<div class="bar__main">Test</div>
<div class="bar__end">
<button type="button" class="button button--transparent">
<svg class="icon fill-white" 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-white" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-close"></use>
</svg>
</button>
</div>
</div>
<div class="panel__body">
<div class="content">
<p>
Hallo
</p>
</div>
</div>
</div>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Modal</h2>
<button class="button" onclick="openModal()">
Open
</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-white" 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>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Field</h2>
<form>
<div class="field-group">
<label class="field-label">
Name
<input class="field-text" />
</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-circle"></use>
</svg>
<svg class="icon field-choice__checked" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-circle-check"></use>
</svg>
Do it!
</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>
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>
B
</label>
</div>
</form>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Table</h2>
<table class="table table--striped">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2 class="">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="">Media</h2>
</div>
<div class="col-12">
<figure class="figure">
<img class="media" src="/image.jpg" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2>Layout</h2>
</div>
<div class="col-12">
<h2>Slider</h3>
</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" 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 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> </div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2>Masonry</h3>
<div class="masonry">
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="/image.jpg" />
</figure>
</div>
</div>
</div>
</div>
</body> </body>
</html </html

+ 287
- 212
dist/plain-ui.css View File

@ -1616,6 +1616,7 @@
:root { :root {
--primary: #3e3e3e; --primary: #3e3e3e;
--primary-active: #717171; --primary-active: #717171;
--primary-active-secondary: #ffffff;
--link: #3e3e3e; --link: #3e3e3e;
--link-hover: #d95959; --link-hover: #d95959;
--danger: #d95959; --danger: #d95959;
@ -1625,8 +1626,11 @@
--black: #212121; --black: #212121;
--text: #363636; --text: #363636;
--text-secondary: #ffffff; --text-secondary: #ffffff;
--background: #f9f9f9;
--border: #dfdfdf;
--background: #3e3e3e;
--background-secondary: #ffffff;
--body: #f9f9f9;
--border: #3e3e3e;
--border-secondary: #ffffff;
} }
/** /**
@ -1680,7 +1684,7 @@ legend {
body { body {
font-family: "IBM Plex Mono", sans-serif; font-family: "IBM Plex Mono", sans-serif;
color: var(--text); color: var(--text);
background-color: var(--background);
background-color: var(--body);
direction: ltr; direction: ltr;
font-size: 1rem; font-size: 1rem;
line-height: 1.618; line-height: 1.618;
@ -1834,119 +1838,6 @@ samp {
font-size: 1rem; font-size: 1rem;
} }
/**
* Heading
*
*
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/crispy-css
*
*/
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
display: table;
font-family: "IBM Plex Mono", sans-serif;
font-weight: bold;
line-height: 1.2;
padding: 0.25rem 0.5rem;
background: var(--primary);
color: var(--text-secondary);
margin: 0 0 1.2rem;
}
@media only screen and (min-width: 992px) {
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
margin: 0 0 1.4rem;
}
}
h1, .h1 {
font-size: 2.25rem;
}
@media only screen and (min-width: 992px) {
h1, .h1 {
font-size: 2.7rem;
}
}
h2, .h2 {
font-size: 2rem;
}
@media only screen and (min-width: 992px) {
h2, .h2 {
font-size: 2.4rem;
}
}
h3, .h3 {
font-size: 1.8rem;
}
@media only screen and (min-width: 992px) {
h3, .h3 {
font-size: 2.16rem;
}
}
h4, .h4 {
font-size: 1.6rem;
}
@media only screen and (min-width: 992px) {
h4, .h4 {
font-size: 1.92rem;
}
}
h5, .h5 {
font-size: 1.4rem;
}
@media only screen and (min-width: 992px) {
h5, .h5 {
font-size: 1.68rem;
}
}
h6, .h6 {
font-size: 1.2rem;
}
@media only screen and (min-width: 992px) {
h6, .h6 {
font-size: 1.44rem;
}
}
/**
* <span class="badge">
* A
* </span>
*
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/plain-ui
*
*/
.badge {
display: inline-block;
background-color: var(--primary);
color: var(--white);
font-size: 0.85rem;
padding: 0.4rem 0.8rem;
}
.badge--round {
display: inline-flex;
justify-content: center;
border-radius: 50%;
width: 2.8em;
}
/** /**
* Heading * Heading
* *
@ -2016,7 +1907,7 @@ h6, .h6 {
.content blockquote { .content blockquote {
border-left: 1px solid var(--primary); border-left: 1px solid var(--primary);
margin-left: 0; margin-left: 0;
padding: 0.4rem 0.8rem;
padding: 0.6rem 0.8rem;
} }
.content blockquote p:last-child { .content blockquote p:last-child {
margin-bottom: 0; margin-bottom: 0;
@ -2059,6 +1950,153 @@ h6, .h6 {
.content dt { .content dt {
font-weight: bold; font-weight: bold;
} }
.content code {
white-space: pre;
display: block;
overflow-y: hidden;
overflow-x: auto;
border: 1px solid var(--primary);
border-radius: 2px;
background-color: var(--background-secondary);
margin: 0 0 1rem;
padding: 0.6rem 0.8rem;
}
@media only screen and (min-width: 992px) {
.content code {
margin: 0 0 0.8rem;
}
}
@media only screen and (min-width: 992px) {
.content code {
padding: 0.8rem 1rem;
}
}
.highlight {
padding: 0.15rem 0.4rem 0.25rem;
background: var(--primary);
color: var(--text-secondary);
border-radius: 2px;
}
/**
* Heading
*
*
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/crispy-css
*
*/
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
font-family: "IBM Plex Mono", sans-serif;
font-weight: bold;
line-height: 1.2;
margin: 0 0 1.2rem;
}
@media only screen and (min-width: 992px) {
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
margin: 0 0 1.4rem;
}
}
h1.highlight, .h1.highlight,
h2.highlight, .h2.highlight,
h3.highlight, .h3.highlight,
h4.highlight, .h4.highlight,
h5.highlight, .h5.highlight,
h6.highlight, .h6.highlight {
display: table;
}
h1, .h1 {
font-size: 2.25rem;
}
@media only screen and (min-width: 992px) {
h1, .h1 {
font-size: 2.7rem;
}
}
h2, .h2 {
font-size: 2rem;
}
@media only screen and (min-width: 992px) {
h2, .h2 {
font-size: 2.4rem;
}
}
h3, .h3 {
font-size: 1.8rem;
}
@media only screen and (min-width: 992px) {
h3, .h3 {
font-size: 2.16rem;
}
}
h4, .h4 {
font-size: 1.6rem;
}
@media only screen and (min-width: 992px) {
h4, .h4 {
font-size: 1.92rem;
}
}
h5, .h5 {
font-size: 1.4rem;
}
@media only screen and (min-width: 992px) {
h5, .h5 {
font-size: 1.68rem;
}
}
h6, .h6 {
font-size: 1.2rem;
}
@media only screen and (min-width: 992px) {
h6, .h6 {
font-size: 1.44rem;
}
}
/**
* <span class="badge">
* A
* </span>
*
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/plain-ui
*
*/
.badge {
display: inline-block;
background-color: var(--background);
color: var(--text-secondary);
font-size: 0.85rem;
padding: 0.4rem 0.8rem;
border: 1px solid var(--primary);
border-radius: 2px;
}
.badge--round {
display: inline-flex;
justify-content: center;
border-radius: 50%;
width: 2.8em;
}
/** /**
* *
@ -2290,9 +2328,11 @@ svg.field-choice__checked {
} }
/** /**
*
* *
*
*
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/plain-ui
* *
*/ */
.icon { .icon {
@ -2311,6 +2351,10 @@ svg.field-choice__checked {
* <img src="image.png" alt="image" /> * <img src="image.png" alt="image" />
* </div> * </div>
* *
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/plain-ui
*
*/ */
.hero { .hero {
position: relative; position: relative;
@ -2328,18 +2372,81 @@ svg.field-choice__checked {
* *
* *
*/ */
.tabs {
display: flex;
flex-direction: column;
width: 100%;
border-bottom: 1px solid var(--primary);
}
@media only screen and (min-width: 768px) {
.tabs {
width: auto;
flex-direction: row;
}
}
.tabs__item {
min-height: 2.8em;
display: flex;
align-items: center;
padding: 0 1em;
color: var(--text);
transition: background-color 0.1s;
border-bottom: 3px solid transparent;
background-color: transparent;
width: 100%;
}
@media only screen and (min-width: 768px) {
.tabs__item {
width: auto;
display: inline-flex;
}
}
.tabs__item:hover {
cursor: pointer;
background-color: var(--primary-active);
color: var(--text-secondary);
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
.tabs__item--selected {
color: var(--text);
border-color: var(--border);
}
.tabs--secondary {
border: 0;
}
.tabs--secondary .tabs__item {
color: var(--text-secondary);
}
.tabs--secondary .tabs__item:hover {
background-color: var(--primary-active-secondary);
color: var(--text);
border-radius: 0;
}
.tabs--secondary .tabs__item--selected {
border-color: var(--border-secondary);
}
/** /**
* *
* *
* *
*/ */
.panel { .panel {
border: 1px solid var(--primary);
border: 1px solid var(--border);
border-radius: 2px; border-radius: 2px;
background-color: var(--white);
background-color: var(--background-secondary);
} }
.panel__body { .panel__body {
padding: 0.25em 1em;
padding: 0.6rem 0.8rem;
}
@media only screen and (min-width: 992px) {
.panel__body {
padding: 0.8rem 1rem;
}
}
.panel--border-highlight {
border-left-width: 10px;
} }
/** /**
@ -2383,6 +2490,37 @@ svg.field-choice__checked {
* *
* *
*/ */
.table {
width: 100%;
border: 1px solid #cacaca;
background: var(--white);
}
.table--striped tr:nth-child(even) {
background-color: #fdfdfd;
}
.table--scroll {
overflow-x: auto;
}
.table td {
color: var(--text);
}
.table td,
.table th {
text-align: left;
border-bottom: 1px solid #cacaca;
padding: 0.5em 1.25em;
}
.table th {
color: white;
background-color: #3e3e3e;
}
.table tr:hover {
background-color: #585858;
}
.table tr:hover td {
color: white;
}
/** /**
* <div class="slider"> * <div class="slider">
* <div class="slider__inner"> * <div class="slider__inner">
@ -2391,6 +2529,21 @@ svg.field-choice__checked {
* </div> * </div>
* *
*/ */
.slider {
position: relative;
overflow-x: visible;
}
.slider__inner {
display: flex;
white-space: nowrap;
}
.slider__item {
padding: 0 0.6em;
display: inline-block;
white-space: normal;
flex-shrink: 0;
}
/** /**
* <div class="bar"> * <div class="bar">
* <div class="bar__start"> * <div class="bar__start">
@ -2411,6 +2564,7 @@ svg.field-choice__checked {
min-height: 2.8em; min-height: 2.8em;
background-color: var(--primary); background-color: var(--primary);
color: var(--text-secondary); color: var(--text-secondary);
border: 1px solid var(--primary);
border-radius: 2px; border-radius: 2px;
} }
.bar__start { .bar__start {
@ -2505,6 +2659,9 @@ svg.field-choice__checked {
/** /**
* *
* *
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/plain-ui
* *
*/ */
.loading { .loading {
@ -2518,7 +2675,7 @@ svg.field-choice__checked {
display: block; display: block;
width: 15px; width: 15px;
height: 80px; height: 80px;
background-color: var(--primary);
background-color: var(--background);
-webkit-animation-name: plain-ui__loading-animation; -webkit-animation-name: plain-ui__loading-animation;
animation-name: plain-ui__loading-animation; animation-name: plain-ui__loading-animation;
-webkit-animation-duration: 0.5s; -webkit-animation-duration: 0.5s;
@ -2527,8 +2684,8 @@ svg.field-choice__checked {
animation-iteration-count: infinite; animation-iteration-count: infinite;
-webkit-animation-delay: 0.15s; -webkit-animation-delay: 0.15s;
animation-delay: 0.15s; animation-delay: 0.15s;
border-top: 1px solid var(--primary-dark);
border-bottom: 1px solid var(--primary-dark);
border-top: 1px solid var(--background);
border-bottom: 1px solid var(--background);
} }
.loading span:first-child { .loading span:first-child {
margin-right: 1px; margin-right: 1px;
@ -4096,7 +4253,7 @@ svg.field-choice__checked {
* *
* *
*/ */
.border, .badge {
.border {
border: 1px solid var(--primary); border: 1px solid var(--primary);
} }
@ -4822,6 +4979,10 @@ svg.field-choice__checked {
padding: 0; padding: 0;
} }
.marginless-last-child > *:last-child {
margin-bottom: 0;
}
/** /**
* spacing for single padding or margin * spacing for single padding or margin
* *
@ -7472,89 +7633,3 @@ svg.field-choice__checked {
font-size: 3rem; font-size: 3rem;
} }
} }
.table {
width: 100%;
border: 1px solid #cacaca;
background: var(--white);
}
.table--striped tr:nth-child(even) {
background-color: #fdfdfd;
}
.table--scroll {
overflow-x: auto;
}
.table td {
color: var(--text);
}
.table td,
.table th {
text-align: left;
border-bottom: 1px solid #cacaca;
padding: 0.5em 1.25em;
}
.table th {
color: white;
background-color: #3e3e3e;
}
.table tr:hover {
background-color: #585858;
}
.table tr:hover td {
color: white;
}
.slider {
position: relative;
overflow-x: visible;
}
.slider__inner {
display: flex;
white-space: nowrap;
}
.slider__item {
padding: 0 0.6em;
display: inline-block;
white-space: normal;
flex-shrink: 0;
}
.tabs {
display: flex;
flex-direction: column;
width: 100%;
border-bottom: 1px solid var(--primary);
}
@media only screen and (min-width: 768px) {
.tabs {
width: auto;
flex-direction: row;
}
}
.tabs__item {
min-height: 2.8em;
display: flex;
align-items: center;
padding: 0 1em;
color: var(--text);
transition: background-color 0.1s;
border-bottom: 3px solid transparent;
background-color: transparent;
width: 100%;
}
@media only screen and (min-width: 768px) {
.tabs__item {
width: auto;
display: inline-flex;
}
}
.tabs__item:hover {
cursor: pointer;
background-color: var(--primary-active);
color: var(--text-secondary);
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
.tabs__item--selected {
color: var(--text);
border-color: var(--primary);
}

+ 1
- 0
mix-manifest.json View File

@ -1,5 +1,6 @@
{ {
"/spritemap.js": "/spritemap.js", "/spritemap.js": "/spritemap.js",
"/dist/plain-ui.css": "/dist/plain-ui.css",
"/dist/fonts/demo.html": "/dist/fonts/demo.html", "/dist/fonts/demo.html": "/dist/fonts/demo.html",
"/dist/fonts/IBMPlexMono-Bold.eot": "/dist/fonts/IBMPlexMono-Bold.eot", "/dist/fonts/IBMPlexMono-Bold.eot": "/dist/fonts/IBMPlexMono-Bold.eot",
"/dist/fonts/IBMPlexMono-Bold.ttf": "/dist/fonts/IBMPlexMono-Bold.ttf", "/dist/fonts/IBMPlexMono-Bold.ttf": "/dist/fonts/IBMPlexMono-Bold.ttf",


+ 1
- 0
src/scss/_core.scss View File

@ -10,4 +10,5 @@
@import @import
'core/normalize', 'core/normalize',
'core/content',
'core/heading'; 'core/heading';

+ 10
- 4
src/scss/_variables.scss View File

@ -57,6 +57,7 @@ $plain-ui__line-height__breakpoints: (
$plain-ui__primary: #3e3e3e !default; $plain-ui__primary: #3e3e3e !default;
$plain-ui__primary-active: lighten($plain-ui__primary, 20%) !default; $plain-ui__primary-active: lighten($plain-ui__primary, 20%) !default;
$plain-ui__primary-active-secondary: #ffffff !default;
$plain-ui__secondary: #b3b2af !default; $plain-ui__secondary: #b3b2af !default;
$plain-ui__success: #64ac64 !default; $plain-ui__success: #64ac64 !default;
@ -69,9 +70,12 @@ $plain-ui__info: #0090d4 !default;
$plain-ui__info-light: lighten($plain-ui__info, 20%) !default; $plain-ui__info-light: lighten($plain-ui__info, 20%) !default;
$plain-ui__background: #f9f9f9 !default; $plain-ui__background: #f9f9f9 !default;
$plain-ui__background--secondary: #ffffff !default;
$plain-ui__body: #f9f9f9 !default;
$plain-ui__text: #363636 !default; $plain-ui__text: #363636 !default;
$plain-ui__text-secondary: #ffffff !default; $plain-ui__text-secondary: #ffffff !default;
$plain-ui__border: #dfdfdf !default;
$plain-ui__border: $plain-ui__primary !default;
$plain-ui__border-secondary: #ffffff !default;
$plain-ui__link: #fff !default; $plain-ui__link: #fff !default;
$plain-ui__colors: ( $plain-ui__colors: (
@ -83,6 +87,7 @@ $plain-ui__colors: (
:root { :root {
--primary: #{$plain-ui__primary}; --primary: #{$plain-ui__primary};
--primary-active: #{$plain-ui__primary-active}; --primary-active: #{$plain-ui__primary-active};
--primary-active-secondary: #{$plain-ui__primary-active-secondary};
--link: #{$plain-ui__primary}; --link: #{$plain-ui__primary};
--link-hover: #{$plain-ui__danger}; --link-hover: #{$plain-ui__danger};
--danger: #{$plain-ui__danger}; --danger: #{$plain-ui__danger};
@ -93,9 +98,10 @@ $plain-ui__colors: (
--text: #{$plain-ui__text}; --text: #{$plain-ui__text};
--text-secondary: #{$plain-ui__text-secondary}; --text-secondary: #{$plain-ui__text-secondary};
--background: #{$plain-ui__primary}; --background: #{$plain-ui__primary};
--background--contrast: #{$plain-ui__primary};
--background-secondary: #{$plain-ui__border-secondary};
--body: #{$plain-ui__body}; --body: #{$plain-ui__body};
--border: #{$plain-ui__border}; --border: #{$plain-ui__border};
--border-secondary: #{$plain-ui__border-secondary};
} }
/** /**
@ -113,9 +119,9 @@ $plain-ui__margin-breakpoints: (
* *
*/ */
$plain-ui__padding: 0.4rem 0.8rem !default;
$plain-ui__padding: 0.6rem 0.8rem !default;
$plain-ui__padding-breakpoints: ( $plain-ui__padding-breakpoints: (
$plain-ui__md: 0.6rem 1rem
$plain-ui__md: 0.8rem 1rem
) !default; ) !default;
/** /**


+ 4
- 3
src/scss/components/_badge.scss View File

@ -12,13 +12,14 @@
.badge { .badge {
display: inline-block; display: inline-block;
background-color: var(--primary);
color: var(--white);
background-color: var(--background);
color: var(--text-secondary);
font-size: 0.85rem; font-size: 0.85rem;
padding: 0.4rem 0.8rem; padding: 0.4rem 0.8rem;
@extend .border;
border: $plain-ui__border;
border-radius: $plain-ui__border-radius;
&--round { &--round {
display: inline-flex; display: inline-flex;


+ 1
- 0
src/scss/components/_bar.scss View File

@ -21,6 +21,7 @@
background-color: var(--primary); background-color: var(--primary);
color: var(--text-secondary); color: var(--text-secondary);
border: $plain-ui__border;
border-radius: $plain-ui__border-radius; border-radius: $plain-ui__border-radius;
&__start { &__start {


+ 3
- 0
src/scss/components/_group.scss View File

@ -6,6 +6,9 @@
* </span> * </span>
* </div> * </div>
* *
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/plain-ui
* *
*/ */


+ 4
- 0
src/scss/components/_hero.scss View File

@ -3,6 +3,10 @@
* <img src="image.png" alt="image" /> * <img src="image.png" alt="image" />
* </div> * </div>
* *
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/plain-ui
*
*/ */
.hero { .hero {


+ 4
- 3
src/scss/components/_icon.scss View File

@ -1,7 +1,9 @@
/** /**
*
* *
*
*
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/plain-ui
* *
*/ */
@ -14,7 +16,6 @@
vertical-align: middle; vertical-align: middle;
overflow: hidden; overflow: hidden;
font-size: 1.4rem; font-size: 1.4rem;
fill: var(--text); fill: var(--text);

+ 6
- 3
src/scss/components/_loading.scss View File

@ -1,6 +1,9 @@
/** /**
* *
* *
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/plain-ui
* *
*/ */
@ -17,7 +20,7 @@
width: 15px; width: 15px;
height: 80px; height: 80px;
background-color: var(--primary);
background-color: var(--background);
animation-name: plain-ui__loading-animation; animation-name: plain-ui__loading-animation;
animation-duration: 0.5s; animation-duration: 0.5s;
@ -25,8 +28,8 @@
animation-delay: 0.15s; animation-delay: 0.15s;
border-top: 1px solid var(--primary-dark);
border-bottom: 1px solid var(--primary-dark);
border-top: 1px solid var(--background);
border-bottom: 1px solid var(--background);
&:first-child { &:first-child {
margin-right: 1px; margin-right: 1px;


+ 7
- 4
src/scss/components/_panel.scss View File

@ -5,13 +5,16 @@
*/ */
.panel { .panel {
border: 1px solid var(--primary);
border: 1px solid var(--border);
border-radius: $plain-ui__border-radius; border-radius: $plain-ui__border-radius;
background-color: var(--white);
background-color: var(--background-secondary);
&__body { &__body {
padding: 0.25em 1em;
padding: $plain-ui__padding;
@include media-breakpoints('padding', $plain-ui__padding-breakpoints);
} }
// bar left, right, top, bottom
&--border-highlight {
border-left-width: 10px;
}
} }

+ 12
- 15
src/scss/components/_slider.scss View File

@ -7,22 +7,19 @@
* *
*/ */
@mixin plain-ui__component__slider()
{
.slider {
position: relative;
overflow-x: visible;
.slider {
position: relative;
overflow-x: visible;
&__inner {
display: flex;
white-space: nowrap;
}
&__inner {
display: flex;
white-space: nowrap;
}
&__item {
padding: 0 .6em;
display: inline-block;
white-space: normal;
flex-shrink: 0;
}
&__item {
padding: 0 0.6em;
display: inline-block;
white-space: normal;
flex-shrink: 0;
} }
} }

+ 31
- 34
src/scss/components/_table.scss View File

@ -4,49 +4,46 @@
* *
*/ */
@mixin plain-ui__component__table()
{
.table {
width: 100%;
border: 1px solid lighten($plain-ui__primary, 55%);
background: var(--white);
&--striped {
tr {
&:nth-child(even) {
background-color: lighten($plain-ui__primary, 75%);
}
.table {
width: 100%;
border: 1px solid lighten($plain-ui__primary, 55%);
background: var(--white);
&--striped {
tr {
&:nth-child(even) {
background-color: lighten($plain-ui__primary, 75%);
} }
} }
}
&--scroll {
overflow-x: auto;
}
&--scroll {
overflow-x: auto;
}
td {
color: var(--text);
}
td {
color: var(--text);
}
td,
th {
text-align: left;
border-bottom: 1px solid lighten($plain-ui__primary, 55%);
td,
th {
text-align: left;
border-bottom: 1px solid lighten($plain-ui__primary, 55%);
padding: 0.5em 1.25em;
//@include crispy__media-breakpoints('padding', $crispy__table__padding-breakpoints);
}
padding: 0.5em 1.25em;
//@include crispy__media-breakpoints('padding', $crispy__table__padding-breakpoints);
}
th {
color: white;
background-color: $plain-ui__primary;
}
th {
color: white;
background-color: $plain-ui__primary;
}
tr:hover {
background-color: lighten($plain-ui__primary, 10%);
tr:hover {
background-color: lighten($plain-ui__primary, 10%);
td {
color: white;
}
td {
color: white;
} }
} }
} }

+ 46
- 31
src/scss/components/_tabs.scss View File

@ -4,53 +4,68 @@
* *
*/ */
@mixin plain-ui__component__tabs()
{
.tabs {
.tabs {
display: flex;
flex-direction: column;
width: 100%;
border-bottom: $plain-ui__border;
@include plain-ui__media-sm() {
width: auto;
flex-direction: row;
}
&__item {
min-height: 2.8em;
display: flex; display: flex;
flex-direction: column;
align-items: center;
padding: 0 1em;
color: var(--text);
transition: background-color 0.1s;
border-bottom: 3px solid transparent;
background-color: transparent;
width: 100%; width: 100%;
border-bottom: $plain-ui__border;
@include plain-ui__media-sm() { @include plain-ui__media-sm() {
width: auto; width: auto;
flex-direction: row;
display: inline-flex;
} }
&__item {
min-height: 2.8em;
&:hover {
cursor: pointer;
background-color: var(--primary-active);
color: var(--text-secondary);
display: flex;
align-items: center;
padding: 0 1em;
color: var(--text);
transition: background-color 0.1s;
border-top-left-radius: $plain-ui__border-radius;
border-top-right-radius: $plain-ui__border-radius;
}
border-bottom: 3px solid transparent;
background-color: transparent;
&--selected {
color: var(--text);
border-color: var(--border);
}
}
width: 100%;
&--secondary {
border: 0;
@include plain-ui__media-sm() {
width: auto;
display: inline-flex;
}
.tabs__item {
color: var(--text-secondary);
&:hover { &:hover {
cursor: pointer;
background-color: var(--primary-active);
color: var(--text-secondary);
border-top-left-radius: $plain-ui__border-radius;
border-top-right-radius: $plain-ui__border-radius;
}
&--selected {
background-color: var(--primary-active-secondary);
color: var(--text); color: var(--text);
border-color: var(--primary);
border-radius: 0;
} }
} }
.tabs__item--selected {
border-color: var(--border-secondary);
}
} }
} }

src/scss/components/_content.scss → src/scss/core/_content.scss View File

@ -122,4 +122,29 @@
dt { dt {
font-weight: bold; font-weight: bold;
} }
}
code {
white-space: pre;
display: block;
overflow-y: hidden;
overflow-x: auto;
border: $plain-ui__border;
border-radius: $plain-ui__border-radius;
background-color: var(--background-secondary);
margin: $plain-ui__margin;
@include media-breakpoints('margin', $plain-ui__margin-breakpoints);
padding: $plain-ui__padding;
@include media-breakpoints('padding', $plain-ui__padding-breakpoints);
}
}
.highlight {
padding: 0.15rem 0.4rem 0.25rem;
background: var(--primary);
color: var(--text-secondary);
border-radius: $plain-ui__border-radius;
}

+ 0
- 6
src/scss/core/_heading.scss View File

@ -49,12 +49,6 @@ h6, .h6 {
} }
} }
.highlight {
padding: 0.25rem 0.5rem;
background: var(--primary);
color: var(--text-secondary);
}
@each $h, $font-size in $plain-ui__heading__font-sizes { @each $h, $font-size in $plain-ui__heading__font-sizes {
#{$h}, .#{$h} { #{$h}, .#{$h} {
font-size: $font-size; font-size: $font-size;


+ 1
- 1
src/scss/core/_normalize.scss View File

@ -30,7 +30,7 @@ body {
font-family: $plain-ui__font-family; font-family: $plain-ui__font-family;
color: var(--text); color: var(--text);
background-color: var(--background);
background-color: var(--body);
direction: $plain-ui__direction; direction: $plain-ui__direction;
font-size: $plain-ui__font-size; font-size: $plain-ui__font-size;


+ 6
- 0
src/scss/helpers/_spacing.scss View File

@ -22,6 +22,12 @@ $plain-ui__spacing-steps: 10 !default;
padding: 0; padding: 0;
} }
.marginless-last-child {
> *:last-child {
margin-bottom: 0;
}
}
/** /**
* spacing for single padding or margin * spacing for single padding or margin


+ 1
- 2
src/scss/helpers/_typography.scss View File

@ -88,5 +88,4 @@
@include plain-ui__media-xlg() { @include plain-ui__media-xlg() {
@include add_font_size('xlg-' + $name, $font-size); @include add_font_size('xlg-' + $name, $font-size);
} }
}
}

+ 0
- 5
src/scss/plain-ui.scss View File

@ -9,7 +9,6 @@
'core', 'core',
'components/badge', 'components/badge',
'components/content',
'components/button', 'components/button',
'components/field', 'components/field',
'components/icon', 'components/icon',
@ -31,7 +30,3 @@
'helpers/spacing', 'helpers/spacing',
'helpers/colors', 'helpers/colors',
'helpers/typography'; 'helpers/typography';
@include plain-ui__component__table();
@include plain-ui__component__slider();
@include plain-ui__component__tabs();

Write Preview
Loading…
Cancel
Save