Misc.
- Use
transform: translateinstead of top, left, right, bottom positioning, especially when animating box-sizing: border-box;object-fit: contain; /* maintains aspect ratio */place-items: center;user-select: none;pointer-events: none;height: 20vw;-
box-shadow: 0 4px 60px rgba(0, 0, 0, 0.5);
body::-webkit-scrollbar {
/* NICE TRICK : it hides the scrollbar, but the scrolling behavior is maintained*/
display: none;
}
Media Queries
Targeting Touch devices
/* For touch devices */
@media (hover: none) {
.mainLayout__sidebar {
padding-bottom: var(--main-layout-footer-height);
}
.mainLayout__body {
height: calc(100vh - var(--main-layout-footer-height));
}
}
Grid & Flex layouts
For those landing here looking for a way to have a sort of dynamic table, with items wrapping to new rows, and still being aligned across rows, a pretty good solution is to use flex with flex-wrap:
.container {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
}
CSS custom variables
:root {
--main-font-color: white;
--main-theme-color: 0, 0, 0;
--main-background-color: 4, 4, 4;
--main-interactive-text-color: #b3b3b3;
}
CSS animation
.someClass{
animation: name duration timing-function delay iteration-count direction fill-mode;
}
@keyframes wheel {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
REM units
10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem (base)
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
30px = 1.875rem
32px = 2rem
Examples :
html {
font-size: 16px;
}
h1 {
font-size: 2rem; /* 32px */
}
p {
font-size: 1rem; /* 16px */
}
li {
font-size: 1.5em; /* 24px */
}
html {
font-size: 62.5%; /* This makes a better base for REM units AND for accessibilty font adaptation*/
}
Top comments (0)