tentakelfabrik
/
plain-ui
1
0
Fork 0
Code Issues 9 Pull Requests 0 Projects 0 Releases 3 Wiki Activity
Browse Source

adding

release/0.2
Björn 3 years ago
parent
43a3821625
commit
7eb6cfcc31
3 changed files with 59 additions and 58 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +18
    -17
      dist/index.html
  2. +39
    -39
      dist/plain-ui.css
  3. +2
    -2
      src/scss/_variables.scss

+ 18
- 17
dist/index.html View File

@ -15,11 +15,25 @@
<header class="header">
<div class="bar">
<div class="bar__main">
<div class="bar__start">
<h1 class="m-top-4 m-bottom-4 h4">
Plain UI 0.1-alpha
</h1>
</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>
</header>
@ -48,20 +62,19 @@
<div class="container">
<div class="grid">
<div class="col-12 col-md-8">
<div class="col-12">
<div class="content">
<div class="panel panel--border-highlight border-color-danger m-bottom-4">
<div class="panel__body">
<div class="content marginless-last-child">
<p>
The Class "content" will trigger a few styles for
On development, a few styles and names will be change until release
</p>
</div>
</div>
</div>
<p>
<span class="bold">Plain UI</span> is a simple UI Framework. The first Idea to create this was
a simple Solution to build Prototypes. But while i was working on this,
<span class="bold">Plain UI</span> is a simple UI Framework.
</p>
<p>
@ -75,18 +88,6 @@
<li><span class="bold">Reflex Grid</span> </li>
</ul>
</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>


+ 39
- 39
dist/plain-ui.css View File

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

+ 2
- 2
src/scss/_variables.scss View File

@ -30,9 +30,9 @@ $plain-ui__direction: ltr !default;
$plain-ui__font-family: 'IBM Plex Mono', sans-serif !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__md: 1.1rem
$plain-ui__md: 1rem
) !default;
$plain-ui__font-sizes: (


Write Preview
Loading…
Cancel
Save