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

adding #9

release/0.2
Björn 3 years ago
parent
f7be2c0e5c
commit
bdcd8c18dc
6 changed files with 1943 additions and 1933 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +26
    -3
      dist/index.html
  2. +1866
    -1904
      dist/plain-ui.css
  3. +43
    -1
      src/scss/components/_loading.scss
  4. +1
    -18
      src/scss/helpers/_core.scss
  5. +0
    -2
      src/scss/helpers/_spacing.scss
  6. +7
    -5
      src/scss/plain-ui.scss

+ 26
- 3
dist/index.html View File

@ -4,8 +4,8 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge"> <meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Crispy CSS | Lightweight CSS Framework for Building Apps and Websites</title>
<meta name="description" content="Lightweight Framework for building fast and clean Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers">
<title>Plain UI | Lightweight CSS UI Framework for Building Apps and Websites</title>
<meta name="description" content="Lightweight UI Framework for building fast and clean Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements, Functions and Helpers">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="plain-ui.css"> <link rel="stylesheet" href="plain-ui.css">
</head> </head>
@ -27,9 +27,19 @@
</div> </div>
</header> </header>
<div class="container">
<div class="container m-top-7">
<div class="grid"> <div class="grid">
<div class="col-12"> <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>
<div class="">
<a href=""></a>
<a href="https://gitea.teantakelfabrik.de/"></a>
</div>
<h2>Buttons</h2> <h2>Buttons</h2>
<button class="button"> <button class="button">
Default Default
@ -124,6 +134,19 @@
</div> </div>
</div> </div>
<div class="grid">
<div class="col-12">
<h2>Loading</h2>
<div>
<div class="loading">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">


+ 1866
- 1904
dist/plain-ui.css
File diff suppressed because it is too large
View File


+ 43
- 1
src/scss/components/_loading.scss View File

@ -4,7 +4,49 @@
* *
*/ */
@mixin component__loading()
$plain-ui__loading__background-color: $plain-ui__danger-light !default;
@mixin plain-ui__component__loading()
{ {
.loading {
height: 60px;
width: 47px;
margin: 0 auto;
display: flex;
align-items: center;
span {
display: block;
width: 15px;
height: 80px;
background: $plain-ui__loading__background-color;
animation-name: plain-ui__loading-animation;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-delay: 0.15s;
border-top: 1px solid darken($plain-ui__loading__background-color, 20%);
border-bottom: 1px solid darken($plain-ui__loading__background-color, 20%);
&:first-child {
margin-right: 1px;
animation-delay: 0s;
}
&:last-child {
margin-left: 1px;
animation-delay: 0.3s;
}
}
}
@keyframes plain-ui__loading-animation {
0% { height: 60px; }
50% { height: 40px; }
100% { height: 60px; }
}
} }

+ 1
- 18
src/scss/helpers/_core.scss View File

@ -43,24 +43,7 @@
} }
} }
/**
*
*
*/
@for $i from 1 through $reflex-columns {
.w-col-#{$i} {
width: percentage(($i / $reflex-columns));
}
}
$plain-ui__width: 12;
@for $i from 1 through $plain-ui__width {
.w-#{$i} {
width: #{$i}em;
}
}
/** /**
* *
@ -134,7 +117,7 @@
} }
@each $name, $font-size in $plain-ui__font-sizes { @each $name, $font-size in $plain-ui__font-sizes {
.text-size-#{$name} {
.t-size-#{$name} {
font-size: $font-size !important; font-size: $font-size !important;
//@include plain-ui__breakpoints-font-size($plain-ui__font-size-breakpoints, $font-size, getDefault($plain-ui__font-sizes), true); //@include plain-ui__breakpoints-font-size($plain-ui__font-size-breakpoints, $font-size, getDefault($plain-ui__font-sizes), true);
} }


+ 0
- 2
src/scss/helpers/_spacing.scss View File

@ -27,7 +27,6 @@ $plain-ui__helpers__spacing-steps: 10 !default;
@for $i from 2 through $plain-ui__helpers__spacing-steps { @for $i from 2 through $plain-ui__helpers__spacing-steps {
$value: $plain-ui__helpers__spacing-gap * factor($i - 1) * 1rem; $value: $plain-ui__helpers__spacing-gap * factor($i - 1) * 1rem;
@include spacing('m', 'margin', $direction, $i, $value); @include spacing('m', 'margin', $direction, $i, $value);
//@include plain-ui__breakpoints-calculate('margin-'#{$direction}, factor($i), $plain-ui__helpers__spacing-breakpoints, true);
} }
} }
@ -39,6 +38,5 @@ $plain-ui__helpers__spacing-steps: 10 !default;
@for $i from 0 through $plain-ui__helpers__spacing-steps { @for $i from 0 through $plain-ui__helpers__spacing-steps {
$value: $plain-ui__helpers__spacing-gap * factor($i - 1) * 1rem; $value: $plain-ui__helpers__spacing-gap * factor($i - 1) * 1rem;
@include spacing('p', 'padding', $direction, $i, $value); @include spacing('p', 'padding', $direction, $i, $value);
//@include plain-ui__breakpoints-calculate('padding-'#{$direction}, factor($i), $plain-ui__helpers__spacing-breakpoints, true);
} }
} }

+ 7
- 5
src/scss/plain-ui.scss View File

@ -8,10 +8,6 @@
'variables', 'variables',
'core', 'core',
'helpers/core',
'helpers/sizing',
'helpers/spacing',
'components/badge', 'components/badge',
'components/button', 'components/button',
'components/field', 'components/field',
@ -24,9 +20,14 @@
'components/slider', 'components/slider',
'components/bar', 'components/bar',
'components/modal', 'components/modal',
'components/loading',
'layout/masonry', 'layout/masonry',
'layout/flex';
'layout/flex',
'helpers/core',
'helpers/sizing',
'helpers/spacing';
@include plain-ui__core(); @include plain-ui__core();
@include plain-ui__helpers__core(); @include plain-ui__helpers__core();
@ -46,5 +47,6 @@
@include plain-ui__component__bar(); @include plain-ui__component__bar();
@include plain-ui__component__tabs(); @include plain-ui__component__tabs();
@include plain-ui__component__modal(); @include plain-ui__component__modal();
@include plain-ui__component__loading();
@include plain-ui__layout__masonry(); @include plain-ui__layout__masonry();

Write Preview
Loading…
Cancel
Save