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 f70bce077f
commit fcdc7c5207
7 changed files with 176 additions and 118 deletions
Show Stats Download Patch File Download Diff File

33
dist/index.html vendored
Unescape View File

@ -30,14 +30,39 @@
<div class="container m-top-7">
<div class="grid">
<div class="col-12">
<h2 class="m-bottom-0">Heading</h2>
<hr>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</div>
</div>
<div class="grid">
<div class="col-12">
<p>
<span class="t-bold">Plain UI</span> is a simple UI Framework. It uses strong Utility Classes and has a few Components.
</p>
<p>
Some ideas of this are based Work from the last 10 Years. But also Ideas from Frameworks TailwindCSS.
</p>
<p>
The Basic Idea was a quick
</p>
<div class="">
<a href=""></a>
<a href="https://gitea.teantakelfabrik.de/"></a>
<div class="center">
<a href="#">
<svg class="icon icon--success" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
</a>
<a href="https://gitea.teantakelfabrik.de/">
<svg class="icon icon--success" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-check"></use>
</svg>
</a>
</div>
<h2>Buttons</h2>

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

@ -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
*

57
src/scss/_core.scss
Unescape View File

@ -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);
}

13
src/scss/_variables.scss
Unescape View File

@ -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
*

4
src/scss/components/_content.scss
Unescape View File

@ -9,7 +9,9 @@
.content {
font-size: 1rem;
// list
a {
text-decoration: underline;
}
ul {
li {

74
src/scss/core/_normalize.scss
Unescape View File

@ -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);
}

2
src/scss/plain-ui.scss
Unescape View File

@ -29,7 +29,7 @@
'helpers/sizing',
'helpers/spacing';
@include plain-ui__core();
@include plain-ui__helpers__core();
@include plain-ui__component__badge();

Write Preview
Loading…
Cancel
Save