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="https://cdn.jsdelivr.net/npm/reflex-grid@2.0.4/css/reflex.min.css">
</head>
<body class="overflow-x-hidden">
<header id="header" class="header">
@ -297,7 +298,7 @@
</div>
<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 class="container">
@ -308,9 +309,9 @@
<div class="col-12">
<figure class="figure">
<img class="media" src="https://via.placeholder.com/150" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure>
</div>
</div>
@ -330,12 +331,12 @@
<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>
<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">
@ -379,53 +380,27 @@
</div>
<div class="col-12">
<div class="masonry">
<div class="masonry__item">
</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 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>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="https://via.placeholder.com/400/600" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="https://via.placeholder.com/800/400" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="https://via.placeholder.com/600/400" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="https://via.placeholder.com/400/600" />
</figure>
<figure class="masonry__item marginless">
<img class="media object-fit-cover h-100" src="https://via.placeholder.com/800/400" />
</figure>
</div>
</div>
</div>
</div>
</div>
</body>
</html

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

@ -468,6 +468,12 @@ h6, .h6 {
*
*
*/
/**
*
*
*
*
*/
a {
color: #fff;
}
@ -702,6 +708,14 @@ body {
vertical-align: baseline;
}
.marginless {
margin: 0 !important;
}
.h-100 {
height: 100% !important;
}
/**
*
*
@ -714,6 +728,11 @@ body {
overflow-y: hidden;
}
.object-fit-cover {
-o-object-fit: cover;
object-fit: cover;
}
.badge {
display: inline-block;
background-color: #3e3e3e;
@ -1129,3 +1148,35 @@ img.media {
.tabs__item:last-child {
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;
}
.marginless {
margin: 0 !important;
}
.h-100 {
height: 100% !important;
}
/**
*
*
@ -211,4 +219,8 @@
.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%;
}
}
}
}
}

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

@ -19,7 +19,9 @@
'components/media',
'components/table',
'components/slider',
'components/bar';
'components/bar',
'layout/masonry';
@include plain-ui__core();
@include plain-ui__helpers__core();
@ -37,4 +39,6 @@
@include plain-ui__component__hero();
@include plain-ui__component__slider();
@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