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 1306b883d5
commit 3d209991d7
6 changed files with 141 additions and 55 deletions
Show Stats Download Patch File Download Diff File

81
dist/index.html vendored
Unescape View File

@ -10,6 +10,7 @@
<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"> <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">
<header id="header" class="header"> <header id="header" class="header">
@ -297,7 +298,7 @@
</div> </div>
<div class="hero"> <div class="hero">
<img style="max-height: 400px;" src="https://picsum.photos/seed/picsum/1200/600" /> <img style="max-height: 400px;" src="https://picsum.photos/seed/picsum/1200/600" />
</div> </div>
<div class="container"> <div class="container">
@ -308,9 +309,9 @@
<div class="col-12"> <div class="col-12">
<figure class="figure"> <figure class="figure">
<img class="media" src="https://via.placeholder.com/150" /> <img class="media" src="https://via.placeholder.com/150" />
<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> </div>
@ -330,12 +331,12 @@
<div class="slider"> <div class="slider">
<div class="slider__inner"> <div class="slider__inner">
<div class="slider__item"> <div class="slider__item">
<figure class="figure"> <figure class="figure">
<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">
<figure class="figure"> <figure class="figure">
@ -379,53 +380,27 @@
</div> </div>
<div class="col-12"> <div class="col-12">
<div class="masonry"> <div class="masonry">
<div class="masonry__item"> <figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="https://via.placeholder.com/400/600" />
</div> </figure>
<div class="masonry__item"> <figure class="masonry__item marginless">
<figure class="figure"> <img class="media object-fit-cover h-100" src="https://via.placeholder.com/800/400" />
<img class="media" src="https://via.placeholder.com/400/600" /> </figure>
<figcaption class="figure__caption"> <figure class="masonry__item marginless">
food truck yr franzen pabst <img class="media object-fit-cover h-100" src="https://via.placeholder.com/600/400" />
</figcaption> </figure>
</figure> <figure class="masonry__item marginless">
</div> <img class="media object-fit-cover h-100" src="https://via.placeholder.com/400/600" />
<div class="masonry__item"> </figure>
<figure class="figure"> <figure class="masonry__item marginless">
<img class="media" src="https://via.placeholder.com/800/400" /> <img class="media object-fit-cover h-100" src="https://via.placeholder.com/800/400" />
<figcaption class="figure__caption"> </figure>
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="masonry__item">
<figure class="figure">
<img class="media" src="https://via.placeholder.com/600/400" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="masonry__item">
<figure class="figure">
<img class="media" src="https://via.placeholder.com/400/600" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
<div class="masonry__item">
<figure class="figure">
<img class="media" src="https://via.placeholder.com/800/400" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</body> </body>
</html </html

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

@ -468,6 +468,12 @@ h6, .h6 {
* *
* *
*/ */
/**
*
*
*
*
*/
a { a {
color: #fff; color: #fff;
} }
@ -702,6 +708,14 @@ body {
vertical-align: baseline; vertical-align: baseline;
} }
.marginless {
margin: 0 !important;
}
.h-100 {
height: 100% !important;
}
/** /**
* *
* *
@ -714,6 +728,11 @@ body {
overflow-y: hidden; overflow-y: hidden;
} }
.object-fit-cover {
-o-object-fit: cover;
object-fit: cover;
}
.badge { .badge {
display: inline-block; display: inline-block;
background-color: #3e3e3e; background-color: #3e3e3e;
@ -1129,3 +1148,35 @@ img.media {
.tabs__item:last-child { .tabs__item:last-child {
border-bottom-width: 1px; border-bottom-width: 1px;
} }
.masonry {
display: flex;
width: 100%;
flex-flow: row wrap;
}
.masonry__item {
height: 200px;
padding-left: 1px;
padding-bottom: 1px;
width: 100%;
}
@media only screen and (min-width: 768px) {
.masonry__item {
height: 300px;
}
.masonry__item:nth-child(4n+1) {
width: 25%;
}
.masonry__item:nth-child(4n+2) {
width: 55%;
}
.masonry__item:nth-child(4n+3) {
width: 20%;
}
.masonry__item:nth-child(4n+4) {
width: 67%;
}
.masonry__item:nth-child(4n+5) {
width: 33%;
}
}

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

@ -199,6 +199,14 @@
vertical-align: baseline; vertical-align: baseline;
} }
.marginless {
margin: 0 !important;
}
.h-100 {
height: 100% !important;
}
/** /**
* *
* *
@ -211,4 +219,8 @@
.overflow-y-hidden { .overflow-y-hidden {
overflow-y: hidden; overflow-y: hidden;
} }
.object-fit-cover {
object-fit: cover;
}
} }

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

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

@ -0,0 +1,44 @@
/**
*
*
*
*
*/
@mixin plain-ui__layout__masonry() {
.masonry {
display: flex;
width: 100%;
flex-flow: row wrap;
&__item {
height: 200px;
padding-left: 1px;
padding-bottom: 1px;
width: 100%;
@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%;
}
}
}
}
}

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

@ -19,7 +19,9 @@
'components/media', 'components/media',
'components/table', 'components/table',
'components/slider', 'components/slider',
'components/bar'; 'components/bar',
'layout/masonry';
@include plain-ui__core(); @include plain-ui__core();
@include plain-ui__helpers__core(); @include plain-ui__helpers__core();
@ -38,3 +40,5 @@
@include plain-ui__component__slider(); @include plain-ui__component__slider();
@include plain-ui__component__bar(); @include plain-ui__component__bar();
@include plain-ui__component__tabs(); @include plain-ui__component__tabs();
@include plain-ui__layout__masonry();
Write Preview
Loading…
Cancel
Save