CSS Notes and Snippets

css-notes-and-snippets.md

CSS notes and snippets

Push elements off screen

• for UX where navigation flies in from the side of the screen or a rollup that swoops in from the bottom of the screen, use translate3d().
• the advantage is that you do not need to know the height or width. Whereas using negative margin or top, bottom, etc requires that an exact measurement to push off screen
• add transition: transform 0.5s to have it smoothly move in and out.

transform: translate3d(0, 100%, 0); // push off screen
...
transform: translate3d(0, 100%, 0); // back on screen

Enable Border Box

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

Create an overlay for modals and alike.

.site-header:before {
    background-color: #030814;
    content: '';
    display: block;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    transition: height 0s step-end .25s,opacity .25s linear,width 0s step-end .25s;
    z-index: 8;
}
.overlay-active .site-header:before {
    height: 100%;
    opacity: .5;
    transition: height 0s step-end 0s,opacity .25s linear,width 0s step-end 0s;
    width: 100%;
}
.overlay-active {
    overflow: hidden;
}

Intrinsic Sizing Helpers

// Wrapper styles for intrinsic ratio
// Mostly used by other extends
%intrinsic-wrapper {
    height: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
}

// 16:9 aspect ratio for intrinsic sizing
%intrinsic-16-9 {
    @extend %intrinsic-wrapper;
    padding-bottom: 56.25%;
}

// 4:3 aspect ratio for intrinsic sizing
%intrinsic-4-3 {
    @extend %intrinsic-wrapper;
    padding-bottom: 75%;
}

// 3:4 aspect ratio for intrinsic sizing
%intrinsic-3-4 {
    @extend %intrinsic-wrapper;
    padding-bottom: 133.33%;
}

// 1:3 aspect ratio for intrinsic sizing
%intrinsic-1-3 {
    @extend %intrinsic-wrapper;
    padding-bottom: 33.33%;
}

// Content styles for intrinsic ratio sizing method
%intrinsic-content {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}