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="viewport" content="width=device-width,initial-scale=1">
<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>
<body class="overflow-x-hidden">
@ -330,40 +329,40 @@
<div class="slider">
<div class="slider__inner">
<div class="slider__item">
<figure class="figure">
<div class="slider__item w-col-12">
<figure class="figure w-col-12">
<img class="media" src="https://via.placeholder.com/600/200" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="slider__item">
<figure class="figure">
<div class="slider__item w-col-12">
<figure class="figure w-col-12">
<img class="media" src="https://via.placeholder.com/600/200" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="slider__item">
<figure class="figure">
<div class="slider__item w-col-12">
<figure class="figure w-col-12">
<img class="media" src="https://via.placeholder.com/600/200" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="slider__item">
<figure class="figure">
<div class="slider__item w-col-12">
<figure class="figure w-col-12">
<img class="media" src="https://via.placeholder.com/600/200" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="slider__item">
<figure class="figure">
<div class="slider__item w-col-12">
<figure class="figure w-col-12">
<img class="media" src="https://via.placeholder.com/600/200" />
<figcaption class="figure__caption">
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__heading();
//@include plain__core__typography();
@include plain-ui__core__typography();
@mixin plain-ui__core() {

24
src/scss/_variables.scss
Unescape View File

@ -92,30 +92,6 @@ $plain-ui__padding-breakpoints: (
) !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
*

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

@ -10,7 +10,9 @@
appearance: none;
position: relative;
display: inline-block;
display: inline-flex;
align-items: center;
text-decoration: none;
font-family: $plain-ui__font-family;
@ -23,7 +25,9 @@
transition: background-color 0.1s;
margin-bottom: 0.5em;
padding: 0.5em 1.3em;
padding: 0 1.3em;
min-height: 2.8em;
font-size: 1rem;
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()
{
$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,
h2, .h2,
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;
}
/**
* 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';
$reflex-prefix: 'flex';
$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 {
display: flex;
width: 100%;
@ -19,24 +34,10 @@
@include plain-ui__media-sm() {
height: 300px;
&:nth-child(4n+1) {
width: 25%;
}
&:nth-child(4n+2) {
width: 55%;
}
&:nth-child(4n+3) {
width: 20%;
}
&:nth-child(4n+4) {
width: 67%;
}
&:nth-child(4n+5) {
width: 33%;
@each $index, $size in $plain-ui__masonry_sizes {
&:nth-child(4n+#{$index}) {
width: #{$size};
}
}
}
}

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

@ -1,13 +1,14 @@
@import
'../fonts/stylesheet',
'node_modules/reflex-grid/scss/reflex',
'functions',
'mixins',
'variables',
'core',
'core/helpers/core',
'helpers/core',
'components/badge',
'components/button',
@ -21,7 +22,8 @@
'components/slider',
'components/bar',
'layout/masonry';
'layout/masonry',
'layout/flex';
@include plain-ui__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