Skip to content

Instantly share code, notes, and snippets.

@Rayraegah

Rayraegah/basic.cc

Created Mar 25, 2018
Embed
What would you like to do?
CSS bootstrap
/** Predictable Layout */
.mostly-everything {
box-sizing: border-box;
}
.maybe-everything {
position: relative;
}
/** Smooth Animations */
.enter {
animation-timing-function:
cubic-bezier(0, .5, .5, 1);
}
.move {
animation-timing-function:
cubic-bezier(.5, 0, .5, 1);
}
.exit {
animation-timing-function:
cubic-bezier(.5, 0, 0, 1);
}
/** Layered Grids */
.some-layer {
/* define the grid */
display: grid;
grid-gap: 10px;
grid-template-rows: auto 300px;
grid-template-columns: 3fr 1fr;
grid-template-areas:
'🤔 🤔'
'🤷‍♀️ 🍺'
'👞 👞';
/* position the layer */
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
/** Background Elements */
.background {
/* layer it */
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
border-radius: inherit;
}
/** Shadow Elements */
.background:before {
content: '';
/* layer it */
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
/* style it */
box-shadow:
0 .5rem 1rem rgba(0, 0, 0, 0.1);
opacity: 1;
}
/** Border Radius Transition */
@keyframes flip-border {
from {
border-top-left-radius:
8rem 6rem;
border-top-right-radius:
8rem 6rem;
border-bottom-left-radius:
8rem 6rem;
border-bottom-right-radius:
8rem 6rem;
}
to {
border-radius: 4rem;
}
}
/** Curved Motion Paths */
.wrap { // container
transform-origin: 0 -20vmin; // 𝚫y
animation: wrap-curve 1s;
will-change: transform;
}
@keyframes wrap-curve {
from { transform: none; }
to { transform: rotate(-90deg); }
}
/** Worst Case */
.sinful-layout-animation {
transition: height .3s ease-in-out;
// contain the layout to let the browser know
// that height changes are isolated
contain: layout;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment