From fcdc7c5207a7cba203531c9766b1afe432f3a1ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn?= Date: Sun, 4 Jul 2021 00:37:14 +0200 Subject: [PATCH] adding --- dist/index.html | 33 +++++++-- dist/plain-ui.css | 111 +++++++++++++++++++----------- src/scss/_core.scss | 57 +++++++-------- src/scss/_variables.scss | 13 ++++ src/scss/components/_content.scss | 4 +- src/scss/core/_normalize.scss | 74 ++++++++++---------- src/scss/plain-ui.scss | 2 +- 7 files changed, 176 insertions(+), 118 deletions(-) diff --git a/dist/index.html b/dist/index.html index 55abc50..1f564b8 100644 --- a/dist/index.html +++ b/dist/index.html @@ -30,14 +30,39 @@
- +

Heading

+
+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+
+
+
+

Plain UI is a simple UI Framework. It uses strong Utility Classes and has a few Components.

+

+ Some ideas of this are based Work from the last 10 Years. But also Ideas from Frameworks TailwindCSS. +

+

+ The Basic Idea was a quick +

-
- - +
+ + + + + +

Buttons

diff --git a/dist/plain-ui.css b/dist/plain-ui.css index f5337f0..6950915 100644 --- a/dist/plain-ui.css +++ b/dist/plain-ui.css @@ -1613,6 +1613,19 @@ * * */ +:root { + --primary: #3e3e3e; + --primary-active: #585858; + --link: #3e3e3e; + --link-hover: #d95959; + --danger: #d95959; + --success: #64ac64; + --white: #ffffff; + --black: #000000; + --text: #363636; + --background: #f9f9f9; +} + /** * padding & margin * @@ -1640,23 +1653,6 @@ * @link https://github.com/tentakelfabrik/crispy-css * */ -/** - * Heading - * - * - * @author Björn Hase, Tentakelfabrik - * @license http://opensource.org/licenses/MIT The MIT License - * @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 - * - */ html { font-size: 100%; line-height: 1.15; @@ -1689,6 +1685,10 @@ table { border-spacing: 0; } +figure { + margin: 0 0 15px; +} + figcaption { margin: 10px 0; } @@ -1697,6 +1697,7 @@ figcaption { * form elements * * + * */ button, input, @@ -1769,7 +1770,8 @@ hr { height: 0; overflow: visible; border: 0; - margin: 0.3em 0; + border-top: 1px solid #b3b2af; + margin: 0 0 1rem; } progress { @@ -1784,6 +1786,31 @@ summary { display: list-item; } +code, +pre, +kbd, +samp { + font-family: "IBM Plex Mono", sans-serif; + 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 + * + */ +/** + * typograhy + * + * @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, @@ -1975,6 +2002,30 @@ dt { 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; +} + /** * * @@ -4462,30 +4513,6 @@ dt { padding-right: 10.125rem; } -a { - color: #fff; -} -a:focus { - outline: none; -} - -/** - * body - * - * - * - * line-height and breakpoints - * font-size and breakpoints - * - */ -body { - font-family: "IBM Plex Mono", sans-serif; - background-color: #f9f9f9; - direction: ltr; - font-size: 1rem; - line-height: 1.4; -} - /** * borders * diff --git a/src/scss/_core.scss b/src/scss/_core.scss index a4a47fa..1ba2ab9 100644 --- a/src/scss/_core.scss +++ b/src/scss/_core.scss @@ -13,43 +13,36 @@ 'core/heading', 'core/typography'; -@include plain-ui__core__normalize(); @include plain-ui__core__heading(); @include plain-ui__core__typography(); -@mixin plain-ui__core() { +a { + color: var(--link); + transition: color 0.5s; - a { - color: $plain-ui__link-light; - - &:hover { - color: $plain-ui__link-hover; - } - - &:focus { - outline: none; - } + &:hover { + color: var(--link-hover); } - /** - * body - * - * - * - * line-height and breakpoints - * font-size and breakpoints - * - */ - body { - font-family: $plain-ui__font-family; - //color: $plain-ui__text-light; - background-color: $plain-ui__background-light; - 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); + &: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); } \ No newline at end of file diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 8155a60..399c047 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -76,6 +76,19 @@ $plain-ui__colors: ( 'white' : #fff ) !default; +:root { + --primary: #{$plain-ui__primary-light}; + --primary-active: #{$plain-ui__primary-light-active}; + --link: #{$plain-ui__primary-light}; + --link-hover: #{$plain-ui__danger-light}; + --danger: #{$plain-ui__danger-light}; + --success: #{$plain-ui__success-light}; + --white: #ffffff; + --black: #000000; + --text: #{$plain-ui__text-light}; + --background: #{$plain-ui__background-light}; +} + /** * padding & margin * diff --git a/src/scss/components/_content.scss b/src/scss/components/_content.scss index 7d6da00..b05647f 100644 --- a/src/scss/components/_content.scss +++ b/src/scss/components/_content.scss @@ -9,7 +9,9 @@ .content { font-size: 1rem; - // list + a { + text-decoration: underline; + } ul { li { diff --git a/src/scss/core/_normalize.scss b/src/scss/core/_normalize.scss index f3f1626..8d04dca 100644 --- a/src/scss/core/_normalize.scss +++ b/src/scss/core/_normalize.scss @@ -9,8 +9,7 @@ * */ -@mixin plain-ui__core__normalize() -{ + html { font-size: 100%; line-height: 1.15; // Correct the line height in all browsers. @@ -44,8 +43,7 @@ } figure { - //margin: $plain-ui__margin; - //@include crispy__media-breakpoints('margin', $plain-ui__margin-breakpoints); + margin: $plain-ui__margin; } figcaption { @@ -57,6 +55,7 @@ * form elements * * + * */ // Remove the margin in Firefox and Safari. @@ -138,38 +137,37 @@ * */ - 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 $plain-ui__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: $plain-ui__font-family-monospace; - //font-size: $plain-ui__font-size-monospace; - - //@include crispy__media-breakpoints('font-size', $plain-ui__font-size-monospace__breakpoints); - } +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 $plain-ui__secondary; + margin: 0 0 1rem; +} + +// 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: $plain-ui__font-family; + font-size: $plain-ui__font-size; + + //@include crispy__media-breakpoints('font-size', $plain-ui__font-size-monospace__breakpoints); } \ No newline at end of file diff --git a/src/scss/plain-ui.scss b/src/scss/plain-ui.scss index 655113a..d36c8bc 100644 --- a/src/scss/plain-ui.scss +++ b/src/scss/plain-ui.scss @@ -29,7 +29,7 @@ 'helpers/sizing', 'helpers/spacing'; -@include plain-ui__core(); + @include plain-ui__helpers__core(); @include plain-ui__component__badge();