Browse Source

change process for generating examples

main
HerrHase 4 months ago
parent
commit
35a74124d8
  1. 962
      examples/components.html
  2. 34
      examples/helpers.html
  3. 105
      examples/index.html
  4. 18
      examples/layout.html
  5. 14973
      examples/plain-ui.css
  6. 14
      examples/spritemap.js
  7. 9905
      package-lock.json
  8. 1
      package.json
  9. 56
      src/html/basics.html
  10. 541
      src/html/components.html
  11. 20
      src/html/helpers.html
  12. 124
      src/html/layout.html
  13. 53
      src/html/layout.html.ejs
  14. 54
      webpack.mix.js
  15. 9143
      yarn.lock

962
examples/components.html

File diff suppressed because it is too large

34
examples/helpers.html

@ -5,10 +5,9 @@
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>
Helpers | Plain UI 0.5 | Simple UI Framework for Apps and Websites
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>
@ -23,13 +22,13 @@
</div>
<div class="bar__main justify-center">
<div class="tabs tabs--contrast">
<a href="index.html" class="tabs__item">
<a href="index.html" class="tabs__item ">
Basics
</a>
<a href="components.html" class="tabs__item">
<a href="components.html" class="tabs__item ">
Components
</a>
<a href="layout.html" class="tabs__item">
<a href="layout.html" class="tabs__item ">
Layout
</a>
<a href="helpers.html" class="tabs__item tabs__item--selected">
@ -41,25 +40,25 @@
</header>
<div class="container">
<div class="grid">
<div class="col-12">
<div class="grid">
<div class="col-12">
<h1 class="highlight m-top-5 m-bottom-5">
Helpers
</h1>
<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 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">
@ -69,4 +68,5 @@
</div>
</footer>
</body>
</html

105
examples/index.html

@ -8,7 +8,6 @@
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>
@ -26,13 +25,13 @@
<a href="index.html" class="tabs__item tabs__item--selected">
Basics
</a>
<a href="components.html" class="tabs__item">
<a href="components.html" class="tabs__item ">
Components
</a>
<a href="layout.html" class="tabs__item">
<a href="layout.html" class="tabs__item ">
Layout
</a>
<a href="helpers.html" class="tabs__item">
<a href="helpers.html" class="tabs__item ">
Helpers
</a>
</div>
@ -41,61 +40,61 @@
</header>
<div class="container">
<div class="grid">
<div class="col-12">
<div class="grid">
<div class="col-12">
<h1 class="highlight m-top-5 m-bottom-5">
Basics
</h1>
<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">
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>
<!-- -->
<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">

18
examples/layout.html

@ -5,10 +5,9 @@
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>
Layout | Plain UI 0.5 | Simple UI Framework for Apps and Websites
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>
@ -23,16 +22,16 @@
</div>
<div class="bar__main justify-center">
<div class="tabs tabs--contrast">
<a href="index.html" class="tabs__item">
<a href="index.html" class="tabs__item ">
Basics
</a>
<a href="components.html" class="tabs__item">
<a href="components.html" class="tabs__item ">
Components
</a>
<a href="layout.html" class="tabs__item tabs__item--selected">
Layout
</a>
<a href="helpers.html" class="tabs__item">
<a href="helpers.html" class="tabs__item ">
Helpers
</a>
</div>
@ -170,15 +169,8 @@
<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

14973
examples/plain-ui.css

File diff suppressed because one or more lines are too long

14
examples/spritemap.js

@ -1 +1,13 @@
(self.webpackChunk_tiny_components_plain_ui=self.webpackChunk_tiny_components_plain_ui||[]).push([[355],{256:()=>{}}]);
(self["webpackChunk_tiny_components_plain_ui"] = self["webpackChunk_tiny_components_plain_ui"] || []).push([["spritemap"],{
/***/ "?c20d":
/*!******************************!*\
!*** spritemap-dummy-module ***!
\******************************/
/***/ (() => {
/***/ })
}]);

9905
package-lock.json

File diff suppressed because it is too large

1
package.json

@ -9,6 +9,7 @@
"author": "Björn Hase",
"license": "MIT",
"devDependencies": {
"html-webpack-plugin": "^5.5.0",
"laravel-mix": "^6.0.43",
"laravel-mix-purgecss": "^6.0.0",
"postcss-css-variables": "^0.18.0",

56
src/html/basics.html

@ -0,0 +1,56 @@
<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>

541
src/html/components.html

@ -0,0 +1,541 @@
<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>

20
src/html/helpers.html

@ -0,0 +1,20 @@
<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>

124
src/html/layout.html

@ -0,0 +1,124 @@
<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>&lt;div class=&quot;masonry&quot;&gt;
&lt;figure class=&quot;masonry__item&quot;&gt;
&lt;img class=&quot;media object-fit-cover h-100&quot; src=&quot;/image.jpg&quot; /&gt;
&lt;/figure&gt;
&lt;/div&gt;
</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>&#x3C;div class=&#x22;slider&#x22;&#x3E;
&#x3C;div class=&#x22;slider__inner&#x22;&#x3E;
&#x3C;div class=&#x22;slider__item w-col-12&#x22;&#x3E;
&#x3C;figure class=&#x22;figure w-col-12&#x22;&#x3E;
&#x3C;img class=&#x22;media&#x22; src=&#x22;/image.jpg&#x22; /&#x3E;
&#x3C;figcaption class=&#x22;figure__caption&#x22;&#x3E;
food truck yr franzen pabst
&#x3C;/figcaption&#x3E;
&#x3C;/figure&#x3E;
&#x3C;/div&#x3E;
&#x3C;div class=&#x22;slider__item w-col-12&#x22;&#x3E;
&#x3C;figure class=&#x22;figure w-col-12&#x22;&#x3E;
&#x3C;img class=&#x22;media&#x22; src=&#x22;/image.jpg&#x22; /&#x3E;
&#x3C;figcaption class=&#x22;figure__caption&#x22;&#x3E;
food truck yr franzen pabst
&#x3C;/figcaption&#x3E;
&#x3C;/figure&#x3E;
&#x3C;/div&#x3E;
&#x3C;div class=&#x22;slider__item w-col-12&#x22;&#x3E;
&#x3C;figure class=&#x22;figure w-col-12&#x22;&#x3E;
&#x3C;img class=&#x22;media&#x22; src=&#x22;/image.jpg&#x22; /&#x3E;
&#x3C;figcaption class=&#x22;figure__caption&#x22;&#x3E;
food truck yr franzen pabst
&#x3C;/figcaption&#x3E;
&#x3C;/figure&#x3E;
&#x3C;/div&#x3E;
&#x3C;/div&#x3E;
&#x3C;/div&#x3E;
</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>

53
src/html/layout.html.ejs

@ -0,0 +1,53 @@
<!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

54
webpack.mix.js

@ -1,9 +1,13 @@
const mix = require('laravel-mix')
const SvgSpritemapPlugin = require('svg-spritemap-webpack-plugin')
const path = require('path')
const fs = require('fs')
const SvgSpritemapPlugin = require('svg-spritemap-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
require('laravel-mix-purgecss')
/*
|--------------------------------------------------------------------------
| Mix Asset Management
@ -15,17 +19,12 @@ require('laravel-mix-purgecss')
|
*/
const strings = {
'title' : 'Plain UI',
'description' : 'Simple UI Framework for Apps and Websites',
'version' : '0.5'
}
/**
* svgo: {
* plugins: [{
* removeAttrs: {
* attrs: 'fill'
* }
* }]
*},*
* @type {Array}
*/
mix.webpackConfig({
plugins: [
new SvgSpritemapPlugin([
@ -56,6 +55,39 @@ mix.webpackConfig({
sprite: {
prefix: 'icon-'
}
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'src/html/layout.html.ejs',
current: 'index.html',
strings: strings,
content: fs.readFileSync(__dirname + '/src/html/basics.html'),
inject: false
}),
new HtmlWebpackPlugin({
filename: 'components.html',
template: 'src/html/layout.html.ejs',
current: 'components.html',
strings: strings,
content: fs.readFileSync(__dirname + '/src/html/components.html'),
inject: false
}),
new HtmlWebpackPlugin({
filename: 'layout.html',
template: 'src/html/layout.html.ejs',
current: 'layout.html',
strings: strings,
content: fs.readFileSync(__dirname + '/src/html/layout.html'),
inject: false
}),
new HtmlWebpackPlugin({
filename: 'helpers.html',
template: 'src/html/layout.html.ejs',
current: 'helpers.html',
strings: strings,
content: fs.readFileSync(__dirname + '/src/html/helpers.html'),
inject: false
})
]
})

9143
yarn.lock

File diff suppressed because it is too large
Loading…
Cancel
Save