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

adding purgeCSS

release/0.2
Björn 1 year ago
parent
7eb6cfcc31
commit
0e01003acb
27 changed files with 875 additions and 11554 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
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
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
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
View File

File diff suppressed because it is too large

12
mix-manifest.json
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
View File

File diff suppressed because it is too large

1
package.json
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
View File

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

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

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

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

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

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

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

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

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

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

0
dist/image.jpg → public/image.jpg
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
View File

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

4
public/mix-manifest.json
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
View File

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

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

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 52 KiB

13
spritemap.js
View File

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

20
src/fonts/stylesheet.css
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
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