From 499336c53238901f3513aeaf43a0bf35d1804b33 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn?= Date: Sat, 10 Jul 2021 10:50:52 +0200 Subject: [PATCH] adding --- dist/components.html | 500 +++++++++++++++++++++++++++++++ dist/index.html | 76 +++-- dist/layout.html | 103 +++++++ dist/plain-ui.css | 69 ++--- dist/symbol-defs.svg | 2 +- mix-manifest.json | 1 - src/icons/gitea.svg | 5 + src/icons/github.svg | 5 + src/scss/_variables.scss | 8 +- src/scss/components/_bar.scss | 10 +- src/scss/components/_button.scss | 1 + src/scss/components/_tabs.scss | 24 +- src/scss/core/_heading.scss | 37 ++- 13 files changed, 735 insertions(+), 106 deletions(-) create mode 100644 dist/components.html create mode 100644 dist/layout.html create mode 100644 src/icons/gitea.svg create mode 100644 src/icons/github.svg diff --git a/dist/components.html b/dist/components.html new file mode 100644 index 0000000..4090837 --- /dev/null +++ b/dist/components.html @@ -0,0 +1,500 @@ + + + + + + + Plain UI | Lightweight CSS UI Framework for Building Apps and Websites + + + + + + + +
+
+
+

+ Plain UI 0.1-alpha +

+
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+
+

+ Some Text +

+

+
+
+
+
+
+
+

Components

+

Buttons

+ + + + + + +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ Bar +
+
+
+
+ +
+
+
+ + Tab A + + + Tab B + + + Tab C + +
+
+
+ +
+
+

Icon

+ + + +
+
+ +
+
+

Content

+
+

+

+
    +
  • +
  • +
  • +
+
+
+
+ +
+
+

Badge

+ + Category + + + 99+ + +
+
+ +
+
+

Loading

+
+
+ + + +
+
+
+
+ +
+
+ +

Panel

+ +
+
+
+ +
+
Test
+
+ + +
+
+
+
+

+ Hallo +

+
+
+
+ +
+
+ +
+
+

Modal

+ + +
+
+
+ + Delete +
+
+ Do you really wan't to delete all files? +
+
+ + +
+
+
+
+
+ +
+
+

Field

+ +
+
+ +
+ +
+ +
+ +
+ + + String is not valid + +
+ +
+ +
+ +
+ +
+ +
+ + +
+ +
+ +
+
+ +
+
+

Table

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ABCD
1234
1234
1234
+
+
+
+ +
+
+
+

Hero

+
+
+
+ +
+ +
+ +
+
+
+

Media

+
+
+
+ +
+ food truck yr franzen pabst +
+
+
+
+
+ +
+
+
+

Layout

+
+
+

Slider

+
+
+
+ +
+
+
+
+ +
+ food truck yr franzen pabst +
+
+
+
+
+ +
+ food truck yr franzen pabst +
+
+
+
+
+ +
+ food truck yr franzen pabst +
+
+
+
+
+ +
+ food truck yr franzen pabst +
+
+
+
+
+ +
+ food truck yr franzen pabst +
+
+
+
+
+ +
+
+
+

Masonry

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+ + + +Plain UI | Lightweight CSS UI Framework for Building Apps and Websites + @@ -14,42 +15,67 @@
-
- -

- Plain UI + Plain UI 0.1-alpha

-
+
+ +
+
+
+ +
+
+

- Plain UI is a simple UI Framework. It uses strong Utility Classes and has a few Components. + 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 -

+

+ Contribution +

+
    +
  • TailwindCSS that have thought me a few new Ideas to handle Helper-Classes
    • +
  • TailwindCSS for showing new ideas and concepts to handle handle Helper-Classes
    • +
@@ -60,9 +86,8 @@
-

Heading

-
- +

Heading

+

Heading 1

Heading 2

Heading 3

@@ -133,15 +158,16 @@
-
-
- - Tab A - - - Tab B - -
+
+ + Tab A + + + Tab B + + + Tab C +
diff --git a/dist/layout.html b/dist/layout.html new file mode 100644 index 0000000..92a754b --- /dev/null +++ b/dist/layout.html @@ -0,0 +1,103 @@ + + + + + + + Plain UI | Lightweight CSS UI Framework for Building Apps and Websites + + + + + + + + +
+
+
+

+ Plain UI 0.1-alpha +

+
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+
+

+ Some Text +

+
+
+
+
+ +
+
+
+

+ Layout +

+ +

+ Grid +

+ +

+ The grid is a small modificated Version from the Reflex Grid +

+ +

+ Masonry +

+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+ + + + @@ -7530,6 +7522,7 @@ svg.field-choice__checked { display: flex; flex-direction: column; width: 100%; + border-bottom: 1px solid var(--primary); } @media only screen and (min-width: 768px) { .tabs { @@ -7542,28 +7535,26 @@ svg.field-choice__checked { display: flex; align-items: center; padding: 0 1em; - background-color: white; - transition: background-color 0.1s; - background-color: white; color: var(--text); - border: 1px solid var(--primary); - border-bottom-width: 0; + transition: background-color 0.1s; + border-bottom: 3px solid transparent; + background-color: transparent; width: 100%; } @media only screen and (min-width: 768px) { .tabs__item { width: auto; display: inline-flex; - border-right-width: 0; - border-bottom-width: 1px; } } -.tabs__item:hover, .tabs__item--selected { +.tabs__item:hover { cursor: pointer; background-color: var(--primary-active); - color: white; - border-color: var(--primary-active); + color: var(--text-secondary); + border-top-left-radius: 2px; + border-top-right-radius: 2px; } -.tabs__item:last-child { - border-bottom-width: 1px; +.tabs__item--selected { + color: var(--text); + border-color: var(--primary); } diff --git a/dist/symbol-defs.svg b/dist/symbol-defs.svg index aeca3fe..9437756 100644 --- a/dist/symbol-defs.svg +++ b/dist/symbol-defs.svg @@ -1 +1 @@ -addarchivearrow-downarrow-left-downarrow-left-uparrow-leftarrow-right-downarrow-right-uparrow-rightarrow-upattachmentbackspacebanbar-chart-altbar-chartboardbookbookmarkcalendarcallcameracaret-downcaret-leftcaret-rightcaret-upcheckchevron-double-downchevron-double-leftchevron-double-rightchevron-double-upchevron-downchevron-leftchevron-rightchevron-upcircle-addcircle-arrow-downcircle-arrow-leftcircle-arrow-rightcircle-arrow-upcircle-checkcircle-errorcircle-helpcircle-informationcircle-removecircle-warningcircleclipboard-checkclipboard-listclipboardclockclosecloud-downloadcloud-uploadcloudcomputercopycredit-carddelete-altdeletedocument-adddocument-checkdocument-downloaddocument-emptydocument-removedocumentdownloaddragedit-alteditemailenterexpandexportexternal-linkeye-offeyefavoritefilter-altfilterfolder-addfolder-checkfolder-downloadfolder-removefoldergridhearthomeimageinboxlaptoplink-altlinklistlocationlocklog-outmapmegaphonemenumessage-altmessagemobilemoonnextnotification-offnotificationoptions-horizontaloptions-verticalpausepercentagepinplaypreviousrefreshremoverepeatsearchselectsendsettingsshareshopping-cart-addshopping-cartshufflesortspeakersstopsunsunriseswitchtabletablettagundounlockuser-adduser-checkuser-removeuserusersvolume-offvolume-upwarningwebcamzoom-inzoom-out \ No newline at end of file +addarchivearrow-downarrow-left-downarrow-left-uparrow-leftarrow-right-downarrow-right-uparrow-rightarrow-upattachmentbackspacebanbar-chart-altbar-chartboardbookbookmarkcalendarcallcameracaret-downcaret-leftcaret-rightcaret-upcheckchevron-double-downchevron-double-leftchevron-double-rightchevron-double-upchevron-downchevron-leftchevron-rightchevron-upcircle-addcircle-arrow-downcircle-arrow-leftcircle-arrow-rightcircle-arrow-upcircle-checkcircle-errorcircle-helpcircle-informationcircle-removecircle-warningcircleclipboard-checkclipboard-listclipboardclockclosecloud-downloadcloud-uploadcloudcomputercopycredit-carddelete-altdeletedocument-adddocument-checkdocument-downloaddocument-emptydocument-removedocumentdownloaddragedit-alteditemailenterexpandexportexternal-linkeye-offeyefavoritefilter-altfilterfolder-addfolder-checkfolder-downloadfolder-removefoldergiteagithubgridhearthomeimageinboxlaptoplink-altlinklistlocationlocklog-outmapmegaphonemenumessage-altmessagemobilemoonnextnotification-offnotificationoptions-horizontaloptions-verticalpausepercentagepinplaypreviousrefreshremoverepeatsearchselectsendsettingsshareshopping-cart-addshopping-cartshufflesortspeakersstopsunsunriseswitchtabletablettagundounlockuser-adduser-checkuser-removeuserusersvolume-offvolume-upwarningwebcamzoom-inzoom-out \ No newline at end of file diff --git a/mix-manifest.json b/mix-manifest.json index 1e623b6..6bff7ea 100644 --- a/mix-manifest.json +++ b/mix-manifest.json @@ -1,6 +1,5 @@ { "/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", diff --git a/src/icons/gitea.svg b/src/icons/gitea.svg new file mode 100644 index 0000000..ecbd2a8 --- /dev/null +++ b/src/icons/gitea.svg @@ -0,0 +1,5 @@ + + +gitea + + diff --git a/src/icons/github.svg b/src/icons/github.svg new file mode 100644 index 0000000..985f3e3 --- /dev/null +++ b/src/icons/github.svg @@ -0,0 +1,5 @@ + + +github + + diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 66e1d3c..c29ed65 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -92,7 +92,9 @@ $plain-ui__colors: ( --black: #212121; --text: #{$plain-ui__text}; --text-secondary: #{$plain-ui__text-secondary}; - --background: #{$plain-ui__background}; + --background: #{$plain-ui__primary}; + --background--contrast: #{$plain-ui__primary}; + --body: #{$plain-ui__body}; --border: #{$plain-ui__border}; } @@ -111,9 +113,9 @@ $plain-ui__margin-breakpoints: ( * */ -$plain-ui__padding: 0.5rem 1rem !default; +$plain-ui__padding: 0.4rem 0.8rem !default; $plain-ui__padding-breakpoints: ( - $plain-ui__md: 0.25rem 0.75rem + $plain-ui__md: 0.6rem 1rem ) !default; /** diff --git a/src/scss/components/_bar.scss b/src/scss/components/_bar.scss index b3b504c..08835d8 100644 --- a/src/scss/components/_bar.scss +++ b/src/scss/components/_bar.scss @@ -21,9 +21,7 @@ background-color: var(--primary); color: var(--text-secondary); - .icon { - font-size: 1.5rem; - } + border-radius: $plain-ui__border-radius; &__start { justify-content: start; @@ -46,10 +44,4 @@ margin-right: 0.75em; } } - - .button { - &:active, &:focus { - outline: none; - } - } } \ No newline at end of file diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss index d5c2329..4d1ca07 100644 --- a/src/scss/components/_button.scss +++ b/src/scss/components/_button.scss @@ -43,6 +43,7 @@ padding: 0; border: none; background: transparent; + border-radius: 0; &:focus, &:active { outline: none; diff --git a/src/scss/components/_tabs.scss b/src/scss/components/_tabs.scss index f04edcd..74d18ce 100644 --- a/src/scss/components/_tabs.scss +++ b/src/scss/components/_tabs.scss @@ -11,6 +11,7 @@ flex-direction: column; width: 100%; + border-bottom: $plain-ui__border; @include plain-ui__media-sm() { width: auto; @@ -23,35 +24,32 @@ display: flex; align-items: center; padding: 0 1em; + color: var(--text); - background-color: white; transition: background-color 0.1s; - background-color: white; - color: var(--text); - - border: $plain-ui__border; - border-bottom-width: 0; + border-bottom: 3px solid transparent; + background-color: transparent; width: 100%; @include plain-ui__media-sm() { width: auto; display: inline-flex; - border-right-width: 0; - border-bottom-width: 1px; } - &:hover, &--selected { + &:hover { cursor: pointer; background-color: var(--primary-active); - color: white; + color: var(--text-secondary); - border-color: var(--primary-active); + border-top-left-radius: $plain-ui__border-radius; + border-top-right-radius: $plain-ui__border-radius; } - &:last-child { - border-bottom-width: 1px; + &--selected { + color: var(--text); + border-color: var(--primary); } } } diff --git a/src/scss/core/_heading.scss b/src/scss/core/_heading.scss index bfebfd8..fb5013f 100644 --- a/src/scss/core/_heading.scss +++ b/src/scss/core/_heading.scss @@ -9,22 +9,27 @@ */ $plain-ui__heading__font-sizes: ( - 'h1': $plain-ui__font-size * 2.5, - 'h2': $plain-ui__font-size * 2, - 'h3': $plain-ui__font-size * 1.75, - 'h4': $plain-ui__font-size * 1.5, - 'h5': $plain-ui__font-size * 1.25, - 'h6': $plain-ui__font-size + 'h1': 2.25rem, + 'h2': 2rem, + 'h3': 1.8rem, + 'h4': 1.6rem, + 'h5': 1.4rem, + 'h6': 1.2rem ) !default; $plain-ui__heading__font-sizes__breakpoints: ( $plain-ui__md: 1.2rem ) !default; -$plain-ui__heading__font-weight: bold !default; +$plain-ui__heading__font-weight: bold!default; $plain-ui__heading__font-family: $plain-ui__font-family !default; -$plain-ui__heading__margin: $plain-ui__margin !default; -$plain-ui__heading__margin-breakpoints: $plain-ui__margin-breakpoints !default; + +$plain-ui__heading__line-height: 1.2 !default; + +$plain-ui__heading__margin: 0 0 1.2rem !default; +$plain-ui__heading__margin-breakpoints: ( + $plain-ui__md: 0 0 1.4rem +) !default; h1, .h1, h2, .h2, @@ -34,18 +39,20 @@ h5, .h5, h6, .h6 { font-family: $plain-ui__heading__font-family; font-weight: $plain-ui__heading__font-weight; - line-height: 1.2; + line-height: $plain-ui__heading__line-height; margin: $plain-ui__heading__margin; @include plain-ui__breakpoints('margin', $plain-ui__heading__margin-breakpoints); -} -h5 { - line-height: 1.4; + &.highlight { + display: table; + } } -h6 { - line-height: $plain-ui__line-height; +.highlight { + padding: 0.25rem 0.5rem; + background: var(--primary); + color: var(--text-secondary); } @each $h, $font-size in $plain-ui__heading__font-sizes {