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 3d209991d7
commit ae348cceba
14 changed files with 3658 additions and 465 deletions
Show Stats Download Patch File Download Diff File

21
dist/index.html vendored
Unescape View File

@ -8,7 +8,6 @@
<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"> <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">
<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">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reflex-grid@2.0.4/css/reflex.min.css">
</head> </head>
<body class="overflow-x-hidden"> <body class="overflow-x-hidden">
@ -330,40 +329,40 @@
<div class="slider"> <div class="slider">
<div class="slider__inner"> <div class="slider__inner">
<div class="slider__item"> <div class="slider__item w-col-12">
<figure class="figure"> <figure class="figure w-col-12">
<img class="media" src="https://via.placeholder.com/600/200" /> <img class="media" src="https://via.placeholder.com/600/200" />
<figcaption class="figure__caption"> <figcaption class="figure__caption">
food truck yr franzen pabst food truck yr franzen pabst
</figcaption> </figcaption>
</figure> </figure>
</div> </div>
<div class="slider__item"> <div class="slider__item w-col-12">
<figure class="figure"> <figure class="figure w-col-12">
<img class="media" src="https://via.placeholder.com/600/200" /> <img class="media" src="https://via.placeholder.com/600/200" />
<figcaption class="figure__caption"> <figcaption class="figure__caption">
food truck yr franzen pabst food truck yr franzen pabst
</figcaption> </figcaption>
</figure> </figure>
</div> </div>
<div class="slider__item"> <div class="slider__item w-col-12">
<figure class="figure"> <figure class="figure w-col-12">
<img class="media" src="https://via.placeholder.com/600/200" /> <img class="media" src="https://via.placeholder.com/600/200" />
<figcaption class="figure__caption"> <figcaption class="figure__caption">
food truck yr franzen pabst food truck yr franzen pabst
</figcaption> </figcaption>
</figure> </figure>
</div> </div>
<div class="slider__item"> <div class="slider__item w-col-12">
<figure class="figure"> <figure class="figure w-col-12">
<img class="media" src="https://via.placeholder.com/600/200" /> <img class="media" src="https://via.placeholder.com/600/200" />
<figcaption class="figure__caption"> <figcaption class="figure__caption">
food truck yr franzen pabst food truck yr franzen pabst
</figcaption> </figcaption>
</figure> </figure>
</div> </div>
<div class="slider__item"> <div class="slider__item w-col-12">
<figure class="figure"> <figure class="figure w-col-12">
<img class="media" src="https://via.placeholder.com/600/200" /> <img class="media" src="https://via.placeholder.com/600/200" />
<figcaption class="figure__caption"> <figcaption class="figure__caption">
food truck yr franzen pabst food truck yr franzen pabst

3951
dist/plain-ui.css vendored
View File

File diff suppressed because it is too large Load Diff

3
src/scss/_core.scss
Unescape View File

@ -15,8 +15,7 @@
@include plain-ui__core__normalize(); @include plain-ui__core__normalize();
@include plain-ui__core__heading(); @include plain-ui__core__heading();
@include plain-ui__core__typography();
//@include plain__core__typography();
@mixin plain-ui__core() { @mixin plain-ui__core() {

24
src/scss/_variables.scss
Unescape View File

@ -92,30 +92,6 @@ $plain-ui__padding-breakpoints: (
) !default; ) !default;
/**
* heading
*
*/
$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
) !default;
$plain-ui__heading__font-sizes__breakpoints: (
$plain-ui__md: 1.2rem
) !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;
/** /**
* z-index * z-index
* *

8
src/scss/components/_button.scss
Unescape View File

@ -10,7 +10,9 @@
appearance: none; appearance: none;
position: relative; position: relative;
display: inline-block;
display: inline-flex;
align-items: center;
text-decoration: none; text-decoration: none;
font-family: $plain-ui__font-family; font-family: $plain-ui__font-family;
@ -23,7 +25,9 @@
transition: background-color 0.1s; transition: background-color 0.1s;
margin-bottom: 0.5em; margin-bottom: 0.5em;
padding: 0.5em 1.3em; padding: 0 1.3em;
min-height: 2.8em;
font-size: 1rem; font-size: 1rem;
width: 100%; width: 100%;

16
src/scss/core/_content.scss
Unescape View File

@ -0,0 +1,16 @@
/**
* Heading
*
*
* @author Björn Hase, Tentakelfabrik
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://github.com/tentakelfabrik/crispy-css
*
*/
@mixin plain-ui__core__content()
{
.content {
}
}

18
src/scss/core/_heading.scss
Unescape View File

@ -10,6 +10,24 @@
@mixin plain-ui__core__heading() @mixin plain-ui__core__heading()
{ {
$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
) !default;
$plain-ui__heading__font-sizes__breakpoints: (
$plain-ui__md: 1.2rem
) !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;
h1, .h1, h1, .h1,
h2, .h2, h2, .h2,
h3, .h3, h3, .h3,

11
src/scss/core/helpers/_sizing.scss
Unescape View File

@ -1,11 +0,0 @@
/**
*
*
*
*
*/
@mixin plain-ui__helpers__sizing()
{
}

25
src/scss/core/helpers/_core.scss → src/scss/helpers/_core.scss
Unescape View File

@ -29,6 +29,31 @@
border-radius: 0 !important; border-radius: 0 !important;
} }
/**
* z-index
*
*
*/
$plain-ui__z-index: 10;
@for $i from 1 through $plain-ui__z-index {
.z-index-#{$i} {
z-index: $i;
}
}
/**
*
*
*/
@for $i from 1 through $reflex-columns {
.w-col-#{$i} {
width: percentage(($i / $reflex-columns));
}
}
/** /**
* *
* *

1
src/scss/layout/_flex.scss
Unescape View File

@ -1,4 +1,3 @@
@import 'reflex-grid'; @import 'reflex-grid';
$reflex-prefix: 'flex';
$legacy-support: false; $legacy-support: false;

39
src/scss/layout/_masonry.scss
Unescape View File

@ -1,10 +1,25 @@
/** /**
* masonry
* *
* <div class="masonry">
* <div class="mansonry__iten">
* *
* </div>
* </div>
* *
* *
*/ */
@mixin plain-ui__layout__masonry() {
@mixin plain-ui__layout__masonry()
{
$plain-ui__masonry_sizes: (
1: 25%,
2: 55%,
3: 20%,
4: 67%,
5: 33%
) !default;
.masonry { .masonry {
display: flex; display: flex;
width: 100%; width: 100%;
@ -19,24 +34,10 @@
@include plain-ui__media-sm() { @include plain-ui__media-sm() {
height: 300px; height: 300px;
&:nth-child(4n+1) { @each $index, $size in $plain-ui__masonry_sizes {
width: 25%; &:nth-child(4n+#{$index}) {
} width: #{$size};
}
&:nth-child(4n+2) {
width: 55%;
}
&:nth-child(4n+3) {
width: 20%;
}
&:nth-child(4n+4) {
width: 67%;
}
&:nth-child(4n+5) {
width: 33%;
} }
} }
} }

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

@ -1,13 +1,14 @@
@import @import
'../fonts/stylesheet', '../fonts/stylesheet',
'node_modules/reflex-grid/scss/reflex',
'functions', 'functions',
'mixins', 'mixins',
'variables', 'variables',
'core', 'core',
'core/helpers/core', 'helpers/core',
'components/badge', 'components/badge',
'components/button', 'components/button',
@ -21,7 +22,8 @@
'components/slider', 'components/slider',
'components/bar', 'components/bar',
'layout/masonry'; 'layout/masonry',
'layout/flex';
@include plain-ui__core(); @include plain-ui__core();
@include plain-ui__helpers__core(); @include plain-ui__helpers__core();

0
src/scss/views/_dark.scss → src/scss/themes/_dark.scss
Unescape View File

0
src/scss/views/_light.scss → src/scss/themes/_light.scss
Unescape View File

Write Preview
Loading…
Cancel
Save