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

49
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">
@ -379,47 +380,20 @@
</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>
<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> </figure>
</div> <figure class="masonry__item marginless">
<div class="masonry__item"> <img class="media object-fit-cover h-100" src="https://via.placeholder.com/800/400" />
<figure class="figure">
<img class="media" src="https://via.placeholder.com/800/400" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure> </figure>
</div> <figure class="masonry__item marginless">
<div class="masonry__item"> <img class="media object-fit-cover h-100" src="https://via.placeholder.com/600/400" />
<figure class="figure">
<img class="media" src="https://via.placeholder.com/600/400" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure> </figure>
</div> <figure class="masonry__item marginless">
<div class="masonry__item"> <img class="media object-fit-cover h-100" src="https://via.placeholder.com/400/600" />
<figure class="figure">
<img class="media" src="https://via.placeholder.com/400/600" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure> </figure>
</div> <figure class="masonry__item marginless">
<div class="masonry__item"> <img class="media object-fit-cover h-100" src="https://via.placeholder.com/800/400" />
<figure class="figure">
<img class="media" src="https://via.placeholder.com/800/400" />
<figcaption class="figure__caption">
food truck yr franzen pabst
</figcaption>
</figure> </figure>
</div> </div>
</div> </div>
@ -428,4 +402,5 @@
</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