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

adding

Browse Source
release/0.2
Björn 3 years ago
parent 43a3821625
commit 7eb6cfcc31
3 changed files with 59 additions and 58 deletions
Show Stats Download Patch File Download Diff File

35
dist/index.html vendored
Unescape View File

@ -15,11 +15,25 @@
<header class="header"> <header class="header">
<div class="bar"> <div class="bar">
<div class="bar__main"> <div class="bar__start">
<h1 class="m-top-4 m-bottom-4 h4"> <h1 class="m-top-4 m-bottom-4 h4">
Plain UI 0.1-alpha Plain UI 0.1-alpha
</h1> </h1>
</div> </div>
<div class="bar__main justify-end">
<a class="button button--small m-bottom-0" href="#">
Github
<svg class="m-left-3 icon fill-text" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-github"></use>
</svg>
</a>
<a class="button button--small m-left-sm-3 m-bottom-0" href="https://gitea.tentakelfabrik.de/">
Gitea
<svg class="m-left-3 icon fill-text" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-gitea"></use>
</svg>
</a>
</div>
</div> </div>
</header> </header>
@ -48,20 +62,19 @@
<div class="container"> <div class="container">
<div class="grid"> <div class="grid">
<div class="col-12 col-md-8"> <div class="col-12">
<div class="content"> <div class="content">
<div class="panel panel--border-highlight border-color-danger m-bottom-4"> <div class="panel panel--border-highlight border-color-danger m-bottom-4">
<div class="panel__body"> <div class="panel__body">
<div class="content marginless-last-child"> <div class="content marginless-last-child">
<p> <p>
The Class "content" will trigger a few styles for On development, a few styles and names will be change until release
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<p> <p>
<span class="bold">Plain UI</span> is a simple UI Framework. The first Idea to create this was <span class="bold">Plain UI</span> is a simple UI Framework.
a simple Solution to build Prototypes. But while i was working on this,
</p> </p>
<p> <p>
@ -75,18 +88,6 @@
<li><span class="bold">Reflex Grid</span> </li> <li><span class="bold">Reflex Grid</span> </li>
</ul> </ul>
</div> </div>
<div class="center">
<a href="#">
<svg class="icon fill-success" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-github"></use>
</svg>
</a>
<a href="https://gitea.tentakelfabrik.de/">
<svg class="icon fill-success" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-gitea"></use>
</svg>
</a>
</div>
</div> </div>
</div> </div>
</div> </div>

78
dist/plain-ui.css vendored
Unescape View File

@ -1696,12 +1696,12 @@ body {
color: var(--text); color: var(--text);
background-color: var(--body); background-color: var(--body);
direction: ltr; direction: ltr;
font-size: 1rem; font-size: 0.9rem;
line-height: 1.618; line-height: 1.618;
} }
@media only screen and (min-width: 992px) { @media only screen and (min-width: 992px) {
body { body {
font-size: 1.1rem; font-size: 1rem;
} }
} }
@ -1845,7 +1845,7 @@ kbd,
pre, pre,
samp { samp {
font-family: "IBM Plex Mono", sans-serif; font-family: "IBM Plex Mono", sans-serif;
font-size: 1rem; font-size: 0.9rem;
} }
/** /**
@ -2036,7 +2036,7 @@ h1, .h1 {
} }
@media only screen and (min-width: 992px) { @media only screen and (min-width: 992px) {
h1, .h1 { h1, .h1 {
font-size: 2.7rem; font-size: 2.82rem;
} }
} }
@ -2045,7 +2045,7 @@ h2, .h2 {
} }
@media only screen and (min-width: 992px) { @media only screen and (min-width: 992px) {
h2, .h2 { h2, .h2 {
font-size: 2.4rem; font-size: 2.52rem;
} }
} }
@ -2054,7 +2054,7 @@ h3, .h3 {
} }
@media only screen and (min-width: 992px) { @media only screen and (min-width: 992px) {
h3, .h3 { h3, .h3 {
font-size: 2.16rem; font-size: 2.28rem;
} }
} }
@ -2063,7 +2063,7 @@ h4, .h4 {
} }
@media only screen and (min-width: 992px) { @media only screen and (min-width: 992px) {
h4, .h4 { h4, .h4 {
font-size: 1.92rem; font-size: 2.04rem;
} }
} }
@ -2072,7 +2072,7 @@ h5, .h5 {
} }
@media only screen and (min-width: 992px) { @media only screen and (min-width: 992px) {
h5, .h5 { h5, .h5 {
font-size: 1.68rem; font-size: 1.8rem;
} }
} }
@ -2081,7 +2081,7 @@ h6, .h6 {
} }
@media only screen and (min-width: 992px) { @media only screen and (min-width: 992px) {
h6, .h6 { h6, .h6 {
font-size: 1.44rem; font-size: 1.56rem;
} }
} }
@ -7790,147 +7790,147 @@ svg.field-choice__checked {
} }
.size-default { .size-default {
font-size: 1rem; font-size: 0.9rem;
} }
@media only screen and (min-width: 576px) { @media only screen and (min-width: 576px) {
.size-xs-default { .size-xs-default {
font-size: 1rem; font-size: 0.9rem;
} }
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
.size-sm-default { .size-sm-default {
font-size: 1rem; font-size: 0.9rem;
} }
} }
@media only screen and (min-width: 992px) { @media only screen and (min-width: 992px) {
.size-md-default { .size-md-default {
font-size: 1rem; font-size: 0.9rem;
} }
} }
@media only screen and (min-width: 1200px) { @media only screen and (min-width: 1200px) {
.size-lg-default { .size-lg-default {
font-size: 1rem; font-size: 0.9rem;
} }
} }
@media only screen and (min-width: 1600px) { @media only screen and (min-width: 1600px) {
.size-xlg-default { .size-xlg-default {
font-size: 1rem; font-size: 0.9rem;
} }
} }
.size-small { .size-small {
font-size: 0.75rem; font-size: 0.675rem;
} }
@media only screen and (min-width: 576px) { @media only screen and (min-width: 576px) {
.size-xs-small { .size-xs-small {
font-size: 0.75rem; font-size: 0.675rem;
} }
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
.size-sm-small { .size-sm-small {
font-size: 0.75rem; font-size: 0.675rem;
} }
} }
@media only screen and (min-width: 992px) { @media only screen and (min-width: 992px) {
.size-md-small { .size-md-small {
font-size: 0.75rem; font-size: 0.675rem;
} }
} }
@media only screen and (min-width: 1200px) { @media only screen and (min-width: 1200px) {
.size-lg-small { .size-lg-small {
font-size: 0.75rem; font-size: 0.675rem;
} }
} }
@media only screen and (min-width: 1600px) { @media only screen and (min-width: 1600px) {
.size-xlg-small { .size-xlg-small {
font-size: 0.75rem; font-size: 0.675rem;
} }
} }
.size-medium { .size-medium {
font-size: 1.5rem; font-size: 1.35rem;
} }
@media only screen and (min-width: 576px) { @media only screen and (min-width: 576px) {
.size-xs-medium { .size-xs-medium {
font-size: 1.5rem; font-size: 1.35rem;
} }
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
.size-sm-medium { .size-sm-medium {
font-size: 1.5rem; font-size: 1.35rem;
} }
} }
@media only screen and (min-width: 992px) { @media only screen and (min-width: 992px) {
.size-md-medium { .size-md-medium {
font-size: 1.5rem; font-size: 1.35rem;
} }
} }
@media only screen and (min-width: 1200px) { @media only screen and (min-width: 1200px) {
.size-lg-medium { .size-lg-medium {
font-size: 1.5rem; font-size: 1.35rem;
} }
} }
@media only screen and (min-width: 1600px) { @media only screen and (min-width: 1600px) {
.size-xlg-medium { .size-xlg-medium {
font-size: 1.5rem; font-size: 1.35rem;
} }
} }
.size-large { .size-large {
font-size: 2rem; font-size: 1.8rem;
} }
@media only screen and (min-width: 576px) { @media only screen and (min-width: 576px) {
.size-xs-large { .size-xs-large {
font-size: 2rem; font-size: 1.8rem;
} }
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
.size-sm-large { .size-sm-large {
font-size: 2rem; font-size: 1.8rem;
} }
} }
@media only screen and (min-width: 992px) { @media only screen and (min-width: 992px) {
.size-md-large { .size-md-large {
font-size: 2rem; font-size: 1.8rem;
} }
} }
@media only screen and (min-width: 1200px) { @media only screen and (min-width: 1200px) {
.size-lg-large { .size-lg-large {
font-size: 2rem; font-size: 1.8rem;
} }
} }
@media only screen and (min-width: 1600px) { @media only screen and (min-width: 1600px) {
.size-xlg-large { .size-xlg-large {
font-size: 2rem; font-size: 1.8rem;
} }
} }
.size-big { .size-big {
font-size: 3rem; font-size: 2.7rem;
} }
@media only screen and (min-width: 576px) { @media only screen and (min-width: 576px) {
.size-xs-big { .size-xs-big {
font-size: 3rem; font-size: 2.7rem;
} }
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
.size-sm-big { .size-sm-big {
font-size: 3rem; font-size: 2.7rem;
} }
} }
@media only screen and (min-width: 992px) { @media only screen and (min-width: 992px) {
.size-md-big { .size-md-big {
font-size: 3rem; font-size: 2.7rem;
} }
} }
@media only screen and (min-width: 1200px) { @media only screen and (min-width: 1200px) {
.size-lg-big { .size-lg-big {
font-size: 3rem; font-size: 2.7rem;
} }
} }
@media only screen and (min-width: 1600px) { @media only screen and (min-width: 1600px) {
.size-xlg-big { .size-xlg-big {
font-size: 3rem; font-size: 2.7rem;
} }
} }

4
src/scss/_variables.scss
Unescape View File

@ -30,9 +30,9 @@ $plain-ui__direction: ltr !default;
$plain-ui__font-family: 'IBM Plex Mono', sans-serif !default; $plain-ui__font-family: 'IBM Plex Mono', sans-serif !default;
$plain-ui__font-weight: normal !default; $plain-ui__font-weight: normal !default;
$plain-ui__font-size: 1rem !default; $plain-ui__font-size: 0.9rem !default;
$plain-ui__font-size-breakpoints: ( $plain-ui__font-size-breakpoints: (
$plain-ui__md: 1.1rem $plain-ui__md: 1rem
) !default; ) !default;
$plain-ui__font-sizes: ( $plain-ui__font-sizes: (

Write Preview
Loading…
Cancel
Save