Skip to content
This repository has been archived by the owner on Oct 30, 2024. It is now read-only.

Commit

Permalink
add css3 columns demo
Browse files Browse the repository at this point in the history
  • Loading branch information
Patrick Kunka committed Jan 5, 2017
1 parent 2ff9173 commit 4dcb1de
Show file tree
Hide file tree
Showing 3 changed files with 266 additions and 0 deletions.
51 changes: 51 additions & 0 deletions demos/grid-columns/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="../reset.css" rel="stylesheet"/>
<link href="./style.css" rel="stylesheet"/>

<title>MixItUp Demo - Columns Grid</title>
</head>
<body>
<div class="controls">
<button type="button" class="control" data-filter="all">All</button>
<button type="button" class="control" data-filter=".green">Green</button>
<button type="button" class="control" data-filter=".blue">Blue</button>
<button type="button" class="control" data-filter=".pink">Pink</button>
<button type="button" class="control" data-filter="none">None</button>

<button type="button" class="control" data-sort="default:asc">Asc</button>
<button type="button" class="control" data-sort="default:desc">Desc</button>

<button type="button" class="control text" data-sort="random">Shuffle</button>
</div>

<div class="container">
<div class="mix green"></div>
<div class="mix green"></div>
<div class="mix blue"></div>
<div class="mix pink"></div>
<div class="mix green"></div>
<div class="mix blue"></div>
<div class="mix pink"></div>
<div class="mix blue"></div>
<div class="mix green"></div>
</div>

<script src="../mixitup.min.js"></script>

<script>
var containerEl = document.querySelector('.container');

var mixer = mixitup(containerEl, {
animation: {
animateResizeContainer: false // required to prevent column algorithm bug
}
});

// NB: See comments in stylesheet regarding fixes for chrome and safari "flickering"
</script>
</body>
</html>
214 changes: 214 additions & 0 deletions demos/grid-columns/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,214 @@
html,
body {
height: 100%;
background: #f2f2f2;
}

*,
*:before,
*:after {
box-sizing: border-box;
}

/* Controls
---------------------------------------------------------------------- */

.controls {
padding: 1rem;
background: #333;
font-size: 0.1px;
}

.control {
position: relative;
display: inline-block;
vertical-align: top;
width: 2.7rem;
height: 2.7rem;
background: #444;
cursor: pointer;
font-size: 0.1px;
color: white;
transition: background 150ms;
}

.control:hover {
background: #3f3f3f;
}

.control[data-filter]:after {
content: '';
position: absolute;
width: 10px;
height: 10px;
top: calc(50% - 6px);
left: calc(50% - 6px);
border: 2px solid currentColor;
border-radius: 2px;
background: currentColor;
transition: background-color 150ms, border-color 150ms;
}

.control[data-sort]:after {
content: '';
position: absolute;
width: 10px;
height: 10px;
border-top: 2px solid;
border-left: 2px solid;
top: calc(50% - 6px);
left: calc(50% - 6px);
transform: translateY(1px) rotate(45deg);
}

.control.text {
width: auto;
height: auto;
padding: 0 1rem;
font-size: .9rem;
height: 2.7rem;
font-weight: 800;
color: white;
margin-left: .75rem;
}

.control.text:after {
display: none;
}

.control[data-sort*=":desc"]:after {
transform: translateY(-4px) rotate(-135deg);
}

.mixitup-control-active {
background: #393939;
}

.mixitup-control-active[data-filter]:after {
background: transparent;
}

.control:first-of-type {
border-radius: 3px 0 0 3px;
}

.control:last-of-type {
border-radius: 0 3px 3px 0;
}

.control[data-filter] + .control[data-sort] {
margin-left: .75rem;
}

.control[data-filter=".green"] {
color: #91e6c7;
}

.control[data-filter=".blue"] {
color: #5ecdde;
}

.control[data-filter=".pink"] {
color: #d595aa;
}

.control[data-filter="none"] {
color: #2f2f2f;
}

/* Container
---------------------------------------------------------------------- */

.container {
padding: 1rem;

-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}

/* Target Elements
---------------------------------------------------------------------- */

.mix {
display: inline-block;
vertical-align: top;
width: 100%;
background: #fff;
border-top: .5rem solid currentColor;
border-radius: 2px;
margin-bottom: 1rem;
position: relative;

backface-visibility: hidden; /* prevents flicker in chrome */
will-change: transform, opacity; /* prevents flicker in safari */
}

.mix:before {
content: '';
display: inline-block;
padding-top: 56.25%;
}

.mix.green {
color: #91e6c7;
}

.mix.pink {
color: #d595aa;
}

.mix.blue {
color: #5ecdde;
}

.mix.pink:before {
padding-top: 75%;
}

.mix.blue:before {
padding-top: 100%;
}

/* Grid Breakpoints
---------------------------------------------------------------------- */

/* 2 Columns */

@media screen and (min-width: 401px) {
.container {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
}

/* 3 Columns */

@media screen and (min-width: 541px) {
.container {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
}

/* 4 Columns */

@media screen and (min-width: 961px) {
.container {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
}

/* 5 Columns */

@media screen and (min-width: 1281px) {
.container {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
}
1 change: 1 addition & 0 deletions demos/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ <h2>Grids</h2>
<li><a href="./grid-flex-box/">Flex-box Grid (HTML/CSS only)</a></li>
<li><a href="./grid-floats/">Float-based Grid (HTML/CSS only)</a></li>
<li><a href="./grid-flex-box-matching-heights/">Flex-box Grid with Matching Heights</a></li>
<li><a href="./grid-columns/">Columns Grid</a></li>
</ul>
</body>
</html>

0 comments on commit 4dcb1de

Please sign in to comment.