release/0.2
Björn 3 years ago
parent b707a35703
commit a81e44d511

2
dist/index.html vendored

@ -31,6 +31,7 @@
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<div class="content">
<p> <p>
<span class="t-bold">Plain UI</span> is a simple UI Framework. It uses strong Utility Classes and has a few Components. <span class="t-bold">Plain UI</span> is a simple UI Framework. It uses strong Utility Classes and has a few Components.
</p> </p>
@ -42,6 +43,7 @@
</p> </p>
</div> </div>
</div> </div>
</div>
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">

207
dist/plain-ui.css vendored

@ -1625,6 +1625,7 @@
--black: #000000; --black: #000000;
--text: #363636; --text: #363636;
--background: #f9f9f9; --background: #f9f9f9;
--border: #dfdfdf;
} }
/** /**
@ -1671,6 +1672,26 @@ legend {
box-sizing: border-box; box-sizing: border-box;
} }
body {
font-family: "IBM Plex Mono", sans-serif;
color: var(--text);
background-color: var(--background);
direction: ltr;
font-size: 1rem;
line-height: 1.618;
}
a {
color: var(--link);
transition: color 0.5s;
}
a:hover {
color: var(--link-hover);
}
a:focus {
outline: none;
}
main { main {
display: block; display: block;
} }
@ -1687,18 +1708,17 @@ table {
} }
figure { figure {
margin: 0 0 15px; margin: 0 0 1rem;
} }
figcaption { figcaption {
margin: 10px 0; margin: 0;
} }
/** /**
* form elements * form elements
* *
* *
*
*/ */
button, button,
input, input,
@ -1708,30 +1728,34 @@ textarea {
margin: 0; margin: 0;
} }
fieldset {
margin: 0 0 1rem;
}
button, button,
select { select {
text-transform: none; text-transform: none;
} }
button,
[type=button], [type=button],
[type=reset], [type=reset],
[type=submit] { [type=submit],
button {
-webkit-appearance: button; -webkit-appearance: button;
} }
button::-moz-focus-inner,
[type=button]::-moz-focus-inner, [type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner, [type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner { [type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
border-style: none; border-style: none;
padding: 0; padding: 0;
} }
button:-moz-focusring,
[type=button]:-moz-focusring, [type=button]:-moz-focusring,
[type=reset]:-moz-focusring, [type=reset]:-moz-focusring,
[type=submit]:-moz-focusring { [type=submit]:-moz-focusring,
button:-moz-focusring {
outline: 1px dotted ButtonText; outline: 1px dotted ButtonText;
} }
@ -1771,7 +1795,7 @@ hr {
height: 0; height: 0;
overflow: visible; overflow: visible;
border: 0; border: 0;
border-top: 1px solid #b3b2af; border-top: 1px solid var(--border);
margin: 0 0 1rem; margin: 0 0 1rem;
} }
@ -1788,8 +1812,8 @@ summary {
} }
code, code,
pre,
kbd, kbd,
pre,
samp { samp {
font-family: "IBM Plex Mono", sans-serif; font-family: "IBM Plex Mono", sans-serif;
font-size: 1rem; font-size: 1rem;
@ -1804,14 +1828,6 @@ samp {
* @link https://github.com/tentakelfabrik/crispy-css * @link https://github.com/tentakelfabrik/crispy-css
* *
*/ */
/**
* typograhy
*
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/crispy-css
*
*/
h1, .h1, h1, .h1,
h2, .h2, h2, .h2,
h3, .h3, h3, .h3,
@ -1821,7 +1837,7 @@ h6, .h6 {
font-family: "IBM Plex Mono", sans-serif; font-family: "IBM Plex Mono", sans-serif;
font-weight: bold; font-weight: bold;
line-height: 1.2; line-height: 1.2;
margin: 0 0 15px; margin: 0 0 1rem;
} }
@media only screen and (min-width: 992px) { @media only screen and (min-width: 992px) {
h1, .h1, h1, .h1,
@ -1830,7 +1846,7 @@ h3, .h3,
h4, .h4, h4, .h4,
h5, .h5, h5, .h5,
h6, .h6 { h6, .h6 {
margin: 0 0 20px; margin: 0 0 1.5rem;
} }
} }
@ -1839,7 +1855,7 @@ h5 {
} }
h6 { h6 {
line-height: 1.4; line-height: 1.618;
} }
h1, .h1 { h1, .h1 {
@ -1896,137 +1912,107 @@ h6, .h6 {
} }
} }
p { /**
margin: 0 0 15px; * Heading
*
*
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/crispy-css
*
*/
.content {
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
/**
* blockquote
*
*
*/
/**
* lists
*
*/
} }
.content p {
a, margin: 0 0 1rem;
ins, }
u { .content a,
.content ins,
.content u {
-webkit-text-decoration-skip: ink edges; -webkit-text-decoration-skip: ink edges;
text-decoration-skip: ink edges; text-decoration-skip: ink edges;
} }
.content b,
b, .content strong {
strong {
font-weight: bolder; font-weight: bolder;
} }
.content small {
small {
font-size: 80%; font-size: 80%;
} }
.content sub,
/** .content sup {
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 70%; font-size: 70%;
line-height: 0; line-height: 0;
position: relative; position: relative;
vertical-align: baseline; vertical-align: baseline;
} }
.content sub {
sub {
bottom: -0.25em; bottom: -0.25em;
} }
.content sup {
sup {
top: -0.5em; top: -0.5em;
} }
.content abbr[title] {
abbr[title] {
border-bottom: 1px dotted; border-bottom: 1px dotted;
cursor: help; cursor: help;
text-decoration: none; text-decoration: none;
} }
.content mark {
mark {
padding: 0.25em; padding: 0.25em;
} }
.content blockquote {
/**
* blockquote
*
*
*/
blockquote {
border-left: 1px solid #3e3e3e; border-left: 1px solid #3e3e3e;
margin-left: 0; margin-left: 0;
padding: 5px 12px; padding: 5px 12px;
} }
blockquote p:last-child { .content blockquote p:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.content dl,
/** .content ol,
* lists .content ul {
*
*/
dl,
ol,
ul {
padding: 0; padding: 0;
margin: 0 0 15px; margin: 0 0 1rem;
} }
.content ol,
ol, .content ul {
ul {
margin-left: 1.5em; margin-left: 1.5em;
} }
.content ol ol,
ol ol, .content ul ul {
ul ul {
margin-top: 0; margin-top: 0;
margin-left: 1em; margin-left: 1em;
} }
.content ol {
ol {
list-style: decimal outside; list-style: decimal outside;
} }
.content ul {
ul {
list-style: disc outside; list-style: disc outside;
} }
.content dl {
dl {
margin-left: 0.5em; margin-left: 0.5em;
} }
.content dd,
dd, .content dt {
dt {
margin: 0; margin: 0;
} }
.content dt {
dt {
font-weight: bold; font-weight: bold;
} }
a {
color: var(--link);
transition: color 0.5s;
}
a:hover {
color: var(--link-hover);
}
a:focus {
outline: none;
}
/**
* body
*
*/
body {
font-family: "IBM Plex Mono", sans-serif;
color: var(--text);
background-color: var(--background);
direction: ltr;
font-size: 1rem;
line-height: 1.4;
}
/** /**
* <span class="badge"> * <span class="badge">
* A * A
@ -4869,7 +4855,7 @@ body {
.badge { .badge {
display: inline-block; display: inline-block;
background-color: #3e3e3e; background-color: var(--primary);
color: white; color: white;
font-size: 0.85rem; font-size: 0.85rem;
padding: 0.4em 0.8em; padding: 0.4em 0.8em;
@ -5149,7 +5135,7 @@ svg.field-choice__checked {
padding: 0.75em 1.1em; padding: 0.75em 1.1em;
font-size: 0.7rem; font-size: 0.7rem;
background: #3e3e3e; background: #3e3e3e;
line-height: 1.4; line-height: 1.618;
margin: 0; margin: 0;
color: white; color: white;
} }
@ -5214,7 +5200,7 @@ img.media {
display: flex; display: flex;
min-height: 2.8em; min-height: 2.8em;
background-color: #3e3e3e; background-color: #3e3e3e;
color: white; color: var(--white);
} }
.bar .icon { .bar .icon {
font-size: 1.5rem; font-size: 1.5rem;
@ -5236,6 +5222,9 @@ img.media {
.bar__start:last-child, .bar__main:last-child, .bar__end:last-child { .bar__start:last-child, .bar__main:last-child, .bar__end:last-child {
margin-right: 0.75em; margin-right: 0.75em;
} }
.bar .button:active {
outline: none;
}
.tabs { .tabs {
display: flex; display: flex;

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

@ -11,38 +11,4 @@
@import @import
'core/normalize', 'core/normalize',
'core/heading', 'core/heading',
'core/typography'; 'core/content';
@include plain-ui__core__heading();
@include plain-ui__core__typography();
a {
color: var(--link);
transition: color 0.5s;
&:hover {
color: var(--link-hover);
}
&:focus {
outline: none;
}
}
/**
* body
*
*/
body {
font-family: $plain-ui__font-family;
color: var(--text);
background-color: var(--background);
direction: $plain-ui__direction;
font-size: $plain-ui__font-size;
//@include crispy__media-breakpoints('line-height', $crispy__line-height__breakpoints);
line-height: $plain-ui__line-height;
//@include crispy__media-breakpoints('font-size', $crispy__font-size-breakpoints);
}

@ -1,175 +0,0 @@
/**
* normalize
*
* Thanks to https://necolas.github.io/normalize.css/, use a lot from them
*
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/crispy-css
*
*/
@mixin crispy__core__normalize()
{
html {
font-size: 100%;
line-height: 1.15; // Correct the line height in all browsers.
-webkit-text-size-adjust: 100%; // Prevent adjustments of font size after orientation changes in iOS.
}
body,
html {
margin: 0;
height: 100%;
}
html,
legend {
box-sizing: border-box;
}
main {
display: block; // Render the `main` element consistently in IE.
}
*,
*::after,
*::before {
box-sizing: inherit;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
figure {
margin: $crispy__margin;
@include crispy__media-breakpoints('margin', $crispy__margin-breakpoints);
}
figcaption {
margin: 10px 0;
}
/**
* form elements
*
*
*/
// Remove the margin in Firefox and Safari.
button,
input,
optgroup,
select,
textarea {
margin: 0;
}
fieldset {
padding: $crispy__padding;
}
// Remove the inheritance of text transform in Firefox
button,
select {
text-transform: none;
}
// Correct the inability to style clickable types in iOS and Safari.
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
// Remove the inner border and padding in Firefox.
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
// Restore the focus styles unset by the previous rule.
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
legend {
box-sizing: border-box; //Correct the text wrapping in Edge and IE.
display: table; // Correct the text wrapping in Edge and IE.
max-width: 100%; // Correct the text wrapping in Edge and IE.
padding: 0; // Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
white-space: normal; // Correct the text wrapping in Edge and IE.
}
// Correct the cursor style of increment and decrement buttons in Chrome.
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield; // Correct the odd appearance in Chrome and Safari.
outline-offset: -2px; // Correct the outline style in Safari.
}
// Remove the inner padding in Chrome and Safari on macOS.
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button; // Correct the inability to style clickable types in iOS and Safari.
font: inherit; // Change font properties to `inherit` in Safari.
}
/**
* hr
*
*/
hr {
box-sizing: content-box; // Add the correct box sizing in Firefox.
height: 0; // Add the correct box sizing in Firefox.
overflow: visible; // Show the overflow in Edge and IE.
border: 0;
border-top: 1px solid $crispy__color-secondary;
margin: 0.3em 0;
}
// Add the correct vertical alignment in Chrome, Firefox, and Opera.
progress {
vertical-align: baseline;
}
// Add the correct display in Firefox.
details {
display: block;
}
// Add the correct display in all browsers.
summary {
display: list-item;
}
code,
pre,
kbd,
samp {
font-family: $crispy__font-family-monospace;
font-size: $crispy__font-size-monospace;
@include crispy__media-breakpoints('font-size', $crispy__font-size-monospace__breakpoints);
}
}

@ -44,7 +44,7 @@ $plain-ui__font-sizes: (
'big' : $plain-ui__font-size * 3 'big' : $plain-ui__font-size * 3
) !default; ) !default;
$plain-ui__line-height: 1.4; $plain-ui__line-height: 1.618;
$plain-ui__line-height__breakpoints: ( $plain-ui__line-height__breakpoints: (
$plain-ui__md: $plain-ui__golden-ratio $plain-ui__md: $plain-ui__golden-ratio
) !default; ) !default;
@ -89,6 +89,7 @@ $plain-ui__colors: (
--black: #000000; --black: #000000;
--text: #{$plain-ui__text-light}; --text: #{$plain-ui__text-light};
--background: #{$plain-ui__background-light}; --background: #{$plain-ui__background-light};
--border: #{$plain-ui__border-light};
} }
/** /**
@ -96,9 +97,9 @@ $plain-ui__colors: (
* *
*/ */
$plain-ui__margin: 0 0 15px !default; $plain-ui__margin: 0 0 1rem !default;
$plain-ui__margin-breakpoints: ( $plain-ui__margin-breakpoints: (
$plain-ui__md: 0 0 20px $plain-ui__md: 0 0 1.5rem
) !default; ) !default;
$plain-ui__padding: 5px 12px !default; $plain-ui__padding: 5px 12px !default;

@ -11,7 +11,7 @@
.badge { .badge {
display: inline-block; display: inline-block;
background-color: $plain-ui__primary-light; background-color: var(--primary);
color: white; color: white;
font-size: 0.85rem; font-size: 0.85rem;

@ -12,7 +12,7 @@
min-height: 2.8em; min-height: 2.8em;
background-color: $plain-ui__primary-light; background-color: $plain-ui__primary-light;
color: white; color: var(--white);
.icon { .icon {
font-size: 1.5rem; font-size: 1.5rem;
@ -39,5 +39,11 @@
margin-right: 0.75em; margin-right: 0.75em;
} }
} }
.button {
&:active {
outline: none;
}
}
} }
} }

@ -8,9 +8,118 @@
* *
*/ */
@mixin plain-ui__core__content()
{
.content { .content {
// paragraphs
p {
margin: $plain-ui__margin;
//@include crispy__media-breakpoints('margin', $plain-ui__margin-breakpoints);
}
// Semantic text elements
a,
ins,
u {
text-decoration-skip: ink edges;
}
// Add the correct font weight in Chrome, Edge, and Safari.
b,
strong {
font-weight: bolder;
}
// Add the correct font size in all browsers.
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 70%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
abbr[title] {
border-bottom: 1px dotted;
cursor: help;
text-decoration: none;
}
mark {
padding: 0.25em;
}
/**
* blockquote
*
*
*/
blockquote {
border-left: $plain-ui__border;
margin-left: 0;
padding: $plain-ui__padding;
p:last-child {
margin-bottom: 0;
}
}
/**
* lists
*
*/
dl,
ol,
ul {
padding: 0;
margin: $plain-ui__margin;
//@include crispy__media-breakpoints('margin', $plain-ui__margin-breakpoints);
}
ol,
ul {
margin-left: 1.5em;
}
ol ol,
ul ul {
margin-top: 0;
margin-left: 1em;
}
ol {
list-style: decimal outside;
}
ul {
list-style: disc outside;
}
dl {
margin-left: 0.5em;
}
dd,
dt {
margin: 0;
}
dt {
font-weight: bold;
} }
} }

@ -8,8 +8,6 @@
* *
*/ */
@mixin plain-ui__core__heading()
{
$plain-ui__heading__font-sizes: ( $plain-ui__heading__font-sizes: (
'h1': $plain-ui__font-size * 2.5, 'h1': $plain-ui__font-size * 2.5,
'h2': $plain-ui__font-size * 2, 'h2': $plain-ui__font-size * 2,
@ -56,4 +54,3 @@
@include plain-ui__breakpoints-font-size($plain-ui__heading__font-sizes__breakpoints, $font-size, $plain-ui__font-size); @include plain-ui__breakpoints-font-size($plain-ui__heading__font-sizes__breakpoints, $font-size, $plain-ui__font-size);
} }
} }
}

@ -9,7 +9,6 @@
* *
*/ */
html { html {
font-size: 100%; font-size: 100%;
line-height: 1.15; // Correct the line height in all browsers. line-height: 1.15; // Correct the line height in all browsers.
@ -27,6 +26,33 @@
box-sizing: border-box; box-sizing: border-box;
} }
body {
font-family: $plain-ui__font-family;
color: var(--text);
background-color: var(--background);
direction: $plain-ui__direction;
font-size: $plain-ui__font-size;
//@include crispy__media-breakpoints('line-height', $crispy__line-height__breakpoints);
line-height: $plain-ui__line-height;
//@include crispy__media-breakpoints('font-size', $crispy__font-size-breakpoints);
}
a {
color: var(--link);
transition: color 0.5s;
&:hover {
color: var(--link-hover);
}
&:focus {
outline: none;
}
}
main { main {
display: block; // Render the `main` element consistently in IE. display: block; // Render the `main` element consistently in IE.
} }
@ -47,15 +73,13 @@
} }
figcaption { figcaption {
margin: 10px 0; margin: 0;
} }
/** /**
* form elements * form elements
* *
* *
*
*/ */
// Remove the margin in Firefox and Safari. // Remove the margin in Firefox and Safari.
@ -68,7 +92,7 @@
} }
fieldset { fieldset {
//padding: $plain-ui__padding; margin: $plain-ui__margin;
} }
// Remove the inheritance of text transform in Firefox // Remove the inheritance of text transform in Firefox
@ -78,27 +102,27 @@
} }
// Correct the inability to style clickable types in iOS and Safari. // Correct the inability to style clickable types in iOS and Safari.
button,
[type="button"], [type="button"],
[type="reset"], [type="reset"],
[type="submit"] { [type="submit"],
button {
-webkit-appearance: button; -webkit-appearance: button;
} }
// Remove the inner border and padding in Firefox. // Remove the inner border and padding in Firefox.
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner, [type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner { [type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
border-style: none; border-style: none;
padding: 0; padding: 0;
} }
// Restore the focus styles unset by the previous rule. // Restore the focus styles unset by the previous rule.
button:-moz-focusring,
[type="button"]:-moz-focusring, [type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring, [type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring { [type="submit"]:-moz-focusring,
button:-moz-focusring {
outline: 1px dotted ButtonText; outline: 1px dotted ButtonText;
} }
@ -131,20 +155,17 @@
font: inherit; // Change font properties to `inherit` in Safari. font: inherit; // Change font properties to `inherit` in Safari.
} }
/** /**
* hr * hr
* *
*/ */
hr { hr {
box-sizing: content-box; // Add the correct box sizing in Firefox. box-sizing: content-box; // Add the correct box sizing in Firefox.
height: 0; // Add the correct box sizing in Firefox. height: 0; // Add the correct box sizing in Firefox.
overflow: visible; // Show the overflow in Edge and IE. overflow: visible; // Show the overflow in Edge and IE.
border: 0; border: 0;
border-top: 1px solid $plain-ui__secondary; border-top: 1px solid var(--border);
margin: 0 0 1rem; margin: $plain-ui__margin;
} }
// Add the correct vertical alignment in Chrome, Firefox, and Opera. // Add the correct vertical alignment in Chrome, Firefox, and Opera.
@ -163,11 +184,10 @@ summary {
} }
code, code,
pre,
kbd, kbd,
pre,
samp { samp {
font-family: $plain-ui__font-family; font-family: $plain-ui__font-family;
font-size: $plain-ui__font-size; font-size: $plain-ui__font-size;
// @TODO
//@include crispy__media-breakpoints('font-size', $plain-ui__font-size-monospace__breakpoints);
} }

@ -1,130 +0,0 @@
/**
* typograhy
*
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/crispy-css
*
*/
@mixin plain-ui__core__typography()
{
// paragraphs
p {
margin: $plain-ui__margin;
//@include crispy__media-breakpoints('margin', $plain-ui__margin-breakpoints);
}
// Semantic text elements
a,
ins,
u {
text-decoration-skip: ink edges;
}
// Add the correct font weight in Chrome, Edge, and Safari.
b,
strong {
font-weight: bolder;
}
// Add the correct font size in all browsers.
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 70%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
abbr[title] {
border-bottom: 1px dotted;
cursor: help;
text-decoration: none;
}
mark {
padding: 0.25em;
}
/**
* blockquote
*
*
*/
blockquote {
border-left: $plain-ui__border;
margin-left: 0;
padding: $plain-ui__padding;
p:last-child {
margin-bottom: 0;
}
}
/**
* lists
*
*/
dl,
ol,
ul {
padding: 0;
margin: $plain-ui__margin;
//@include crispy__media-breakpoints('margin', $plain-ui__margin-breakpoints);
}
ol,
ul {
margin-left: 1.5em;
}
ol ol,
ul ul {
margin-top: 0;
margin-left: 1em;
}
ol {
list-style: decimal outside;
}
ul {
list-style: disc outside;
}
dl {
margin-left: 0.5em;
}
dd,
dt {
margin: 0;
}
dt {
font-weight: bold;
}
}
Loading…
Cancel
Save