tiny-components
/
plain-ui
1
0
Fork 0
Code Issues 13 Pull Requests Projects Releases 5 Wiki Activity

adding purgeCSS

Browse Source
release/0.2
Björn 1 year ago
parent 7eb6cfcc31
commit 0e01003acb
27 changed files with 875 additions and 11554 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 233
      dist/fonts/demo.html
  2. 24
      dist/fonts/stylesheet.css
  3. 7936
      dist/plain-ui.css
  4. 12
      mix-manifest.json
  5. 4164
      package-lock.json
  6. 1
      package.json
  7. 0
      public/Impressum.html
  8. 0
      public/components.html
  9. 0
      public/fonts/IBMPlexMono-Bold.eot
  10. 0
      public/fonts/IBMPlexMono-Bold.ttf
  11. 0
      public/fonts/IBMPlexMono-Bold.woff
  12. 0
      public/fonts/IBMPlexMono-Bold.woff2
  13. 0
      public/fonts/IBMPlexMono.eot
  14. 0
      public/fonts/IBMPlexMono.ttf
  15. 0
      public/fonts/IBMPlexMono.woff
  16. 0
      public/fonts/IBMPlexMono.woff2
  17. 0
      public/helpers.html
  18. 0
      public/image.jpg
  19. 0
      public/index.html
  20. 0
      public/layout.html
  21. 4
      public/mix-manifest.json
  22. 1
      public/plain-ui.css
  23. 1
      public/spritemap.js
  24. 0
      public/symbol-defs.svg
  25. 13
      spritemap.js
  26. 20
      src/fonts/stylesheet.css
  27. 20
      webpack.mix.js

233
dist/fonts/demo.html vendored
Unescape View File

@ -1,233 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, noarchive">
<meta name="format-detection" content="telephone=no">
<title>Transfonter demo</title>
<link href="stylesheet.css" rel="stylesheet">
<style>
/*
http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* demo styles */
body {
background: #f0f0f0;
color: #000;
}
.page {
background: #fff;
width: 920px;
margin: 0 auto;
padding: 20px 20px 0 20px;
overflow: hidden;
}
.font-container {
overflow-x: auto;
overflow-y: hidden;
margin-bottom: 40px;
line-height: 1.3;
white-space: nowrap;
padding-bottom: 5px;
}
h1 {
position: relative;
background: #444;
font-size: 32px;
color: #fff;
padding: 10px 20px;
margin: 0 -20px 12px -20px;
}
.letters {
font-size: 25px;
margin-bottom: 20px;
}
.s10:before {
content: '10px';
}
.s11:before {
content: '11px';
}
.s12:before {
content: '12px';
}
.s14:before {
content: '14px';
}
.s18:before {
content: '18px';
}
.s24:before {
content: '24px';
}
.s30:before {
content: '30px';
}
.s36:before {
content: '36px';
}
.s48:before {
content: '48px';
}
.s60:before {
content: '60px';
}
.s72:before {
content: '72px';
}
.s10:before, .s11:before, .s12:before, .s14:before,
.s18:before, .s24:before, .s30:before, .s36:before,
.s48:before, .s60:before, .s72:before {
font-family: Arial, sans-serif;
font-size: 10px;
font-weight: normal;
font-style: normal;
color: #999;
padding-right: 6px;
}
pre {
display: block;
position: relative;
padding: 9px;
margin: 0 0 10px;
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
font-size: 13px;
line-height: 1.428571429;
color: #333;
font-weight: normal;
font-style: normal;
background-color: #f5f5f5;
border: 1px solid #ccc;
overflow-x: auto;
border-radius: 4px;
}
pre:after {
display: block;
position: absolute;
right: 0;
top: 0;
content: 'Usage';
line-height: 1;
padding: 5px 8px;
font-size: 12px;
color: #767676;
background-color: #fff;
border: 1px solid #ccc;
border-right: none;
border-top: none;
border-radius: 0 4px 0 4px;
z-index: 10;
}
/* responsive */
@media (max-width: 959px) {
.page {
width: auto;
margin: 0;
}
}
</style>
</head>
<body>
<div class="page">
<div class="demo">
<h1 style="font-family: 'IBM Plex Mono'; font-weight: normal; font-style: normal;">IBM Plex Mono</h1>
<pre>.your-style {
font-family: 'IBM Plex Mono';
font-weight: normal;
font-style: normal;
}</pre>
<div class="font-container" style="font-family: 'IBM Plex Mono'; font-weight: normal; font-style: normal;">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="demo">
<h1 style="font-family: 'IBM Plex Mono'; font-weight: bold; font-style: normal;">IBM Plex Mono Bold</h1>
<pre>.your-style {
font-family: 'IBM Plex Mono';
font-weight: bold;
font-style: normal;
}</pre>
<div class="font-container" style="font-family: 'IBM Plex Mono'; font-weight: bold; font-style: normal;">
<p class="letters">
abcdefghijklmnopqrstuvwxyz<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
0123456789.:,;()*!?'@#<>$%&^+-=~
</p>
<p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
<p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
</div>
</body>
</html>

24
dist/fonts/stylesheet.css vendored
Unescape View File

@ -1,24 +0,0 @@
@font-face {
font-family: 'IBM Plex Mono';
src: url('fonts/IBMPlexMono.eot');
src: url('fonts/IBMPlexMono.eot?#iefix') format('embedded-opentype'),
url('fonts/IBMPlexMono.woff2') format('woff2'),
url('fonts/IBMPlexMono.woff') format('woff'),
url('fonts/IBMPlexMono.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'IBM Plex Mono';
src: url('fonts/IBMPlexMono-Bold.eot');
src: url('fonts/IBMPlexMono-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/IBMPlexMono-Bold.woff2') format('woff2'),
url('fonts/IBMPlexMono-Bold.woff') format('woff'),
url('fonts/IBMPlexMono-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
font-display: swap;
}

7936
dist/plain-ui.css vendored
View File

File diff suppressed because it is too large Load Diff

12
mix-manifest.json
Unescape View File

@ -1,14 +1,4 @@
{
"/spritemap.js": "/spritemap.js",
"/dist/plain-ui.css": "/dist/plain-ui.css",
"/dist/fonts/demo.html": "/dist/fonts/demo.html",
"/dist/fonts/IBMPlexMono-Bold.eot": "/dist/fonts/IBMPlexMono-Bold.eot",
"/dist/fonts/IBMPlexMono-Bold.ttf": "/dist/fonts/IBMPlexMono-Bold.ttf",
"/dist/fonts/IBMPlexMono-Bold.woff": "/dist/fonts/IBMPlexMono-Bold.woff",
"/dist/fonts/IBMPlexMono-Bold.woff2": "/dist/fonts/IBMPlexMono-Bold.woff2",
"/dist/fonts/IBMPlexMono.eot": "/dist/fonts/IBMPlexMono.eot",
"/dist/fonts/IBMPlexMono.ttf": "/dist/fonts/IBMPlexMono.ttf",
"/dist/fonts/IBMPlexMono.woff": "/dist/fonts/IBMPlexMono.woff",
"/dist/fonts/IBMPlexMono.woff2": "/dist/fonts/IBMPlexMono.woff2",
"/dist/fonts/stylesheet.css": "/dist/fonts/stylesheet.css"
"/dist/plain-ui.css": "/dist/plain-ui.css"
}

4164
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
Unescape View File

@ -22,6 +22,7 @@
"svgo": "^1.3.2"
},
"dependencies": {
"laravel-mix-purgecss": "^6.0.0",
"normalize.css": "^8.0.1",
"reflex-grid": "^2.0.7"
}

0
dist/Impressum.html → public/Impressum.html
Unescape View File

0
dist/components.html → public/components.html
Unescape View File

0
dist/fonts/IBMPlexMono-Bold.eot → public/fonts/IBMPlexMono-Bold.eot
Unescape View File

0
dist/fonts/IBMPlexMono-Bold.ttf → public/fonts/IBMPlexMono-Bold.ttf
Unescape View File

0
dist/fonts/IBMPlexMono-Bold.woff → public/fonts/IBMPlexMono-Bold.woff
Unescape View File

0
dist/fonts/IBMPlexMono-Bold.woff2 → public/fonts/IBMPlexMono-Bold.woff2
Unescape View File

0
dist/fonts/IBMPlexMono.eot → public/fonts/IBMPlexMono.eot
Unescape View File

0
dist/fonts/IBMPlexMono.ttf → public/fonts/IBMPlexMono.ttf
Unescape View File

0
dist/fonts/IBMPlexMono.woff → public/fonts/IBMPlexMono.woff
Unescape View File

0
dist/fonts/IBMPlexMono.woff2 → public/fonts/IBMPlexMono.woff2
Unescape View File

0
dist/helpers.html → public/helpers.html
Unescape View File

0
dist/image.jpg → public/image.jpg
Unescape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 578 KiB

After

Width:  |  Height:  |  Size: 578 KiB

0
dist/index.html → public/index.html
Unescape View File

0
dist/layout.html → public/layout.html
Unescape View File

4
public/mix-manifest.json
Unescape View File

@ -0,0 +1,4 @@
{
"/spritemap.js": "/spritemap.js",
"/plain-ui.css": "/plain-ui.css"
}

1
public/plain-ui.css
View File

File diff suppressed because one or more lines are too long

1
public/spritemap.js
Unescape View File

@ -0,0 +1 @@
(self.webpackChunkplain_ui=self.webpackChunkplain_ui||[]).push([[355],{256:()=>{}}]);

0
dist/symbol-defs.svg → public/symbol-defs.svg
Unescape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 52 KiB

13
spritemap.js
Unescape View File

@ -1,13 +0,0 @@
(self["webpackChunkplain_ui"] = self["webpackChunkplain_ui"] || []).push([["spritemap"],{
/***/ "?4e0c":
/*!******************************!*\
!*** spritemap-dummy-module ***!
\******************************/
/***/ (() => {
/***/ })
}]);

20
src/fonts/stylesheet.css
Unescape View File

@ -1,10 +1,10 @@
@font-face {
font-family: 'IBM Plex Mono';
src: url('fonts/IBMPlexMono.eot');
src: url('fonts/IBMPlexMono.eot?#iefix') format('embedded-opentype'),
url('fonts/IBMPlexMono.woff2') format('woff2'),
url('fonts/IBMPlexMono.woff') format('woff'),
url('fonts/IBMPlexMono.ttf') format('truetype');
src: url('IBMPlexMono.eot');
src: url('IBMPlexMono.eot?#iefix') format('embedded-opentype'),
url('IBMPlexMono.woff2') format('woff2'),
url('IBMPlexMono.woff') format('woff'),
url('IBMPlexMono.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
@ -12,11 +12,11 @@
@font-face {
font-family: 'IBM Plex Mono';
src: url('fonts/IBMPlexMono-Bold.eot');
src: url('fonts/IBMPlexMono-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/IBMPlexMono-Bold.woff2') format('woff2'),
url('fonts/IBMPlexMono-Bold.woff') format('woff'),
url('fonts/IBMPlexMono-Bold.ttf') format('truetype');
src: url('IBMPlexMono-Bold.eot');
src: url('IBMPlexMono-Bold.eot?#iefix') format('embedded-opentype'),
url('IBMPlexMono-Bold.woff2') format('woff2'),
url('IBMPlexMono-Bold.woff') format('woff'),
url('IBMPlexMono-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
font-display: swap;

20
webpack.mix.js
Unescape View File

@ -1,5 +1,8 @@
const mix = require('laravel-mix')
const SvgSpritemapPlugin = require('svg-spritemap-webpack-plugin')
const path = require('path')
require('laravel-mix-purgecss')
/*
|--------------------------------------------------------------------------
@ -16,7 +19,7 @@ mix.webpackConfig({
plugins: [
new SvgSpritemapPlugin('src/icons/*.svg', {
output: {
filename: 'dist/symbol-defs.svg',
filename: 'symbol-defs.svg',
chunk: {
keep: true
},
@ -37,11 +40,18 @@ mix.webpackConfig({
})
mix
.sass('src/scss/plain-ui.scss', 'dist/plain-ui.css')
.copy('src/fonts/*', 'dist/fonts')
.setPublicPath('./public')
.sass('src/scss/plain-ui.scss', 'public/plain-ui.css')
.purgeCss({
extend: {
enabled: true,
content: [
path.join(__dirname, 'public/*.html'),
]
}
})
.options({
terser: {
extractComments: false,
},
processCssUrls: false
}
})
Write Preview
Loading…
Cancel
Save