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
3d209991d7
commit
ae348cceba
14 changed files with 3658 additions and 465 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +10
    -11
      dist/index.html
  2. +3558
    -393
      dist/plain-ui.css
  3. +1
    -2
      src/scss/_core.scss
  4. +0
    -24
      src/scss/_variables.scss
  5. +6
    -2
      src/scss/components/_button.scss
  6. +16
    -0
      src/scss/core/_content.scss
  7. +18
    -0
      src/scss/core/_heading.scss
  8. +0
    -11
      src/scss/core/helpers/_sizing.scss
  9. +25
    -0
      src/scss/helpers/_core.scss
  10. +0
    -1
      src/scss/layout/_flex.scss
  11. +20
    -19
      src/scss/layout/_masonry.scss
  12. +4
    -2
      src/scss/plain-ui.scss
  13. +0
    -0
      src/scss/themes/_dark.scss
  14. +0
    -0
      src/scss/themes/_light.scss

+ 10
- 11
dist/index.html 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">
<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" /> <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">
<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" /> <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">
<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" /> <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">
<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" /> <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">
<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" /> <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


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


+ 1
- 2
src/scss/_core.scss 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__core__typography();
@include plain-ui__core__typography();
@mixin plain-ui__core() { @mixin plain-ui__core() {


+ 0
- 24
src/scss/_variables.scss 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
* *


+ 6
- 2
src/scss/components/_button.scss 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
- 0
src/scss/core/_content.scss 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
- 0
src/scss/core/_heading.scss 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,


+ 0
- 11
src/scss/core/helpers/_sizing.scss View File

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

src/scss/core/helpers/_core.scss → src/scss/helpers/_core.scss 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));
}
}
/** /**
* *
* *

+ 0
- 1
src/scss/layout/_flex.scss View File

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

+ 20
- 19
src/scss/layout/_masonry.scss 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) {
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};
}
} }
} }
} }


+ 4
- 2
src/scss/plain-ui.scss 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();


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


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


Write Preview
Loading…
Cancel
Save