This is a collection of small snippets from all over the internet (mainly from stackoverflow) that I found handy.
Variables in css
This is useful for storing color values in a variable and using it in rest of the code. Helps you quickly change colors for various elements in one place.
/* Instantiation */
:root {
--bg-color: #FFFFFF;
}
/* referring */
background-color: var(--bg-color);
Centering text in a div vertically
For single line:
text-align: center;
vertical-align: middle;
line-height: 90px; /* The same as your div height */
For multiple lines:
position: relative;
top: 50%;
transform: translateY(-50%);
Using Font Awesome icons in css
font-weight: 900 is needed for this to work. The content \f00d is the unicode value of the icon you want to use.
font-family: Font Awesome 5 Free;
font-weight: 900;
content: '\f00d';
Simple list animations
Minimal CSS Navbar
Overlay a div on top of another
position: relative
z-index: 3;
Fixing On hover bug on Safari
On hover actions convert to a long press on Safari and cause an ugly selection around the element. On some pages depending on layout the on hover doesn’t translate well to on-click events either rendering elements unresponsive. This is specific to Safari browser alone. Adding this line to your head fixes this. This bug was really painful to fix and took me hours to fix. Courtesy stack overflow.
<script>
document.addEventListener("touchstart", function() {},false);
</script>
Side by side alignment of divs/text
display: inline-block to the the div.