🍰CSS Utilities

Utilities

Visuallyhidden

Sometimes you want to hide your content from users but not hide it from robots. In this case .visuallyhidden class can help you. Extremely useful with headings! Why? Read HERE

.full-width makes element full screen with even if it placed in container.

.visuallyhidden {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(0 0 99.9% 99.9%);
	clip-path: inset(0 0 99.9% 99.9%);
	overflow: hidden;
	height: 1px;
	width: 1px;
	padding: 0;
	border: 0;
}

Full width element

This allows an element to be set to the full screen width, even if it is inside a container. For example, if your website's container is limited to 1000px but you want a section with a full-screen background, this can be useful.

/* Full screen width element even if it placed in container */
.full-width {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

Sticky element

CSS driven solution for sticky elements.

.sticky-element {
	position: sticky;
	top: 0;
	height: fit-content;
}