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 1f27daf3d4
commit 1b57109133
17 changed files with 442 additions and 104 deletions
Show Stats Download Patch File Download Diff File

78
dist/index.html vendored
Unescape View File

@ -43,6 +43,9 @@
<button class="button button--danger">
Danger
</button>
<button class="button button--hover">
Hover
</button>
</div>
</div>
@ -62,6 +65,23 @@
</div>
</div>
<div class="grid">
<div class="col-12">
<div class="bar">
<div class="bar__start">
<button class="button button--no-style">
<svg class="icon fill-white marginless" aria-hidden="true">
<use xlink:href="symbol-defs.svg#icon-close"></use>
</svg>
</button>
</div>
<div class="bar__main">
Bar
</div>
</div>
</div>
</div>
<div class="grid">
<div class="col-12">
<h2>Icon</h2>
@ -284,18 +304,68 @@
<div class="col-12">
<h2>Layout</h2>
</div>
<div class="col-12">
<h2>Masonry</h3>
<h2>Slider</h3>
</div>
<div class="col-12">
<div class="masonry">
<div class="masonry__item">
</div>
</div>
<div class="slider">
<div class="slider__inner">
<div class="slider__item">
<figure class="figure">
<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">
<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">
<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">
<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">
<img class="media" src="https://via.placeholder.com/600/200" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2>Masonry</h3>
</div>
<div class="col-12">
<div class="masonry">
<div class="masonry__item">
</div>
<div class="masonry__item">
<figure class="figure">

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

@ -285,6 +285,12 @@ summary {
*
*
*/
/**
*
*
*
*
*/
/**
*
*
@ -328,12 +334,17 @@ summary {
*
*/
/**
* <figure class="media-figure">
* <img class="media__img" src="https://via.placeholder.com/150" />
* <figcaption class="media-figure__caption">
* food truck yr franzen pabst
* </figcaption>
* </figure>
* <div class="slider">
* <div class="slider__inner">
* <div class="slider__item w-10"></div>
* </div>
* </div>
*
*/
/**
*
*
*
*
*/
a {
@ -360,6 +371,200 @@ body {
line-height: 1.4;
}
/**
* borders
*
*
*/
.border {
border: 1px solid #3e3e3e !important;
}
.border-round {
border-radius: 2px !important;
}
.borderless {
border: 0 !important;
}
.radiusless {
border-radius: 0 !important;
}
/**
*
*
*/
.round {
border-radius: 50% !important;
}
/**
* typography
*
*
*/
.left {
text-align: left !important;
}
.right {
text-align: right !important;
}
.center {
text-align: center !important;
}
.justify {
text-align: justify !important;
}
.uppercase {
text-transform: uppercase !important;
}
.lowercase {
text-transform: lowercase !important;
}
.crossed {
text-decoration: line-through !important;
}
.underline {
text-decoration: underline !important;
}
.capitalize {
text-transform: capitalize !important;
}
.italic {
font-style: italic !important;
}
.light {
font-weight: lighter !important;
}
.normal {
font-weight: normal !important;
}
.medium {
font-weight: medium !important;
}
.bold {
font-weight: bolder !important;
}
.text-size-default {
font-size: 1rem !important;
}
.text-size-small {
font-size: 0.75rem !important;
}
.text-size-medium {
font-size: 1.5rem !important;
}
.text-size-large {
font-size: 2rem !important;
}
.text-size-big {
font-size: 3rem !important;
}
/**
* colors
*
*
*/
.text-color-primary {
color: #3e3e3e !important;
}
.text-color-white {
color: #fff !important;
}
.fill-primary {
fill: #3e3e3e !important;
}
.fill-white {
fill: #fff !important;
}
.border-color-primary {
border-color: #3e3e3e !important;
}
.border-color-white {
border-color: #fff !important;
}
.background-color-primary {
background-color: #3e3e3e !important;
}
.background-color-white {
background-color: #fff !important;
}
/**
* floating
*
*
*/
.float-left {
float: left;
}
.float-right {
float: right;
}
.float-none {
float: none;
}
.centered {
margin-left: auto;
margin-right: auto;
}
.clearfix::before, .clearfix::after {
display: table;
content: " ";
}
.clearfix::after {
clear: both;
}
/**
* position
*
*
*/
.absolute {
position: absolute !important;
}
.fixed {
position: fixed !important;
}
.relative {
position: relative !important;
}
.badge {
display: inline-block;
background-color: #3e3e3e;
@ -402,7 +607,13 @@ body {
.button--small {
font-size: 0.8em;
}
.button:hover {
.button--no-style {
margin: 0;
padding: 0;
border: none;
background: transparent;
}
.button:hover, .button--hover {
cursor: pointer;
text-decoration: none;
color: white;
@ -684,13 +895,32 @@ img.media {
object-fit: contain;
}
.masonry {
.slider {
display: flex;
}
.slider__inner {
display: flex;
overflow: hidden;
}
.slider__item {
flex: none;
width: 33%;
}
.bar {
display: flex;
flex-direction: column;
flex-wrap: wrap;
background-color: #3e3e3e;
color: white;
padding: 0.8em 1.2em;
}
.bar__start {
justify-content: start;
margin-right: 0.75em;
}
.bar__main {
width: 100%;
}
.masonry__item {
width: 33.3%;
flex: 1;
.bar__end {
justify-content: end;
margin-left: 0.75em;
}

6
src/scss/_mixins.scss
Unescape View File

@ -142,7 +142,7 @@
*
*/
@mixin plain-ui__media-breakpoints($property, $breakpoints, $important: false) {
@mixin plain-ui__breakpoints($property, $breakpoints, $important: false) {
@each $breakpoint, $value in $breakpoints {
@media only screen and (min-width: $breakpoint) {
@if $important == false {
@ -169,7 +169,7 @@
*
*/
@mixin plain-ui__media-breakpoints-calculate($property, $factor, $breakpoints, $important: false) {
@mixin plain-ui__breakpoints-calculate($property, $factor, $breakpoints, $important: false) {
@each $breakpoint, $value in $breakpoints {
@media only screen and (min-width: $breakpoint) {
@if $important == false {
@ -194,7 +194,7 @@
* @param {Boolean} $important [false]
*
*/
@mixin plain-ui__media-breakpoints-font-size($breakpoints, $font-size, $default, $important: false) {
@mixin plain-ui__breakpoints-font-size($breakpoints, $font-size, $default, $important: false) {
@each $breakpoint, $value in $breakpoints {
// getting diff

9
src/scss/_variables.scss
Unescape View File

@ -21,7 +21,6 @@ $plain-ui__md : 992px !default;
$plain-ui__lg : 1200px !default;
$plain-ui__xlg: 1600px !default;
/**
* fonts
*
@ -70,6 +69,11 @@ $plain-ui__border-light: #dfdfdf !default;
$plain-ui__link-light: #fff !default;
$plain-ui__colors: (
'primary' : $plain-ui__primary-light,
'white' : #fff
) !default;
/**
* padding & margin
*
@ -117,3 +121,6 @@ $plain-ui__heading__margin-breakpoints: $plain-ui__margin-breakpoints !default;
$plain-ui__z-index__modal: 1000 !default;
$plain-ui__z-index__overlay: 999 !default;
$plain-ui__border-radius: 2px;
$plain-ui__border: 1px solid $plain-ui__primary-light;

31
src/scss/components/_bar.scss
Unescape View File

@ -0,0 +1,31 @@
/**
*
*
*
*
*/
@mixin plain-ui__component__bar()
{
.bar {
display: flex;
background-color: $plain-ui__primary-light;
color: white;
padding: 0.8em 1.2em;
&__start {
justify-content: start;
margin-right: 0.75em;
}
&__main {
width: 100%;
}
&__end {
justify-content: end;
margin-left: 0.75em;
}
}
}

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

@ -37,7 +37,14 @@
font-size: 0.8em;
}
&:hover {
&--no-style {
margin: 0;
padding: 0;
border: none;
background: transparent;
}
&:hover, &--hover {
cursor: pointer;
text-decoration: none;
color: white;

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

@ -8,5 +8,13 @@
{
.content {
font-size: 1rem;
// list
ul {
li {
}
}
}
}

20
src/scss/components/_group.scss
Unescape View File

@ -5,21 +5,17 @@
*
*/
@mixin plain-ui__component__bar()
@mixin plain-ui__component__group()
{
.bar {
display: flex;
.group {
&__item {
width: auto;
display: inline-block;
margin: 0 1em 1em;
&__start {
justify-content: start;
&:last-child {
margin-right: 0;
}
&__title {
@extend .w-100;
}
&__end {
justify-content: end;
}
}
}

9
src/scss/components/_progress.scss
Unescape View File

@ -0,0 +1,9 @@
/**
*
*
*
*/
@mixin component__loading()
{
}

25
src/scss/components/_slider.scss
Unescape View File

@ -0,0 +1,25 @@
/**
* <div class="slider">
* <div class="slider__inner">
* <div class="slider__item w-10"></div>
* </div>
* </div>
*
*/
@mixin plain-ui__component__slider()
{
.slider {
display: flex;
&__inner {
display: flex;
overflow: hidden;
}
&__item {
flex: none;
width: 33%;
}
}
}

13
src/scss/core/helpers/_core.scss
Unescape View File

@ -14,11 +14,11 @@
*/
.border {
border: $crispy__border !important;
border: $plain-ui__border !important;
}
.border-round {
border-radius: $crispy__border-radius !important;
border-radius: $plain-ui__border-radius !important;
}
.borderless {
@ -100,11 +100,10 @@
font-weight: bolder !important;
}
// create
@each $name, $font-size in $plain-ui__font-sizes {
.text-size-#{$name} {
font-size: $font-size !important;
@include plain-ui__breakpoints-font-size($crispy__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);
}
}
@ -120,6 +119,12 @@
}
}
@each $name, $color in $plain-ui__colors {
.fill-#{$name} {
fill: $color !important;
}
}
@each $name, $color in $plain-ui__colors {
.border-color-#{$name} {
border-color: $color !important;

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

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

0
src/scss/layout/_masonary.scss
Unescape View File

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

@ -1,37 +0,0 @@
/**
* <figure class="media-figure">
* <img class="media__img" src="https://via.placeholder.com/150" />
* <figcaption class="media-figure__caption">
* food truck yr franzen pabst
* </figcaption>
* </figure>
*
*/
@mixin plain-ui__layout__masonry()
{
.masonry {
display: flex;
flex-flow: column wrap;
align-content: space-between;
&__item {
width: 32%;
margin-bottom: 2%; /* Optional */
}
/* Re-order items into 3 rows */
&__item:nth-child(3n+1) { order: 1; }
&__item:nth-child(3n+2) { order: 2; }
&__item:nth-child(3n) { order: 3; }
/* Force new columns */
&:before,
&:after {
content: "";
flex-basis: 100%;
width: 0;
order: 2;
}
}
}

20
src/scss/layout/_slider.scss
Unescape View File

@ -1,20 +0,0 @@
/**
* <figure class="media-figure">
* <img class="media__img" src="https://via.placeholder.com/150" />
* <figcaption class="media-figure__caption">
* food truck yr franzen pabst
* </figcaption>
* </figure>
*
*/
@mixin plain-ui__layout__slider()
{
.slider {
display: flex;
&__item {
}
}
}

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

@ -6,6 +6,8 @@
'variables',
'core',
'core/helpers/core',
'components/badge',
'components/button',
'components/field',
@ -14,10 +16,11 @@
'components/panel',
'components/media',
'components/table',
'layout/masonry';
'components/slider',
'components/bar';
@include plain-ui__core();
@include plain-ui__helpers__core();
@include plain-ui__component__badge();
@ -30,5 +33,5 @@
@include plain-ui__component__media();
@include plain-ui__component__table();
@include plain-ui__component__hero();
@include plain-ui__layout__masonry();
@include plain-ui__component__slider();
@include plain-ui__component__bar();
Write Preview
Loading…
Cancel
Save