Dark Theme | Category:
The Boot Camp Diaries Week 11: CSSomebody Save Me
background: I’m good at CSS but it’s a pain;
display: Oh man I hope it’s decent;
During week 11, I took over CSS duties for our group simply because I had the most experience with it and could bang it out pretty fast. There was a lot to do, so even with my relatively quick speed, it took me all week and prevented me from focusing on things I actually wanted to practice, like routing paths in rails and writing fetches. It was still fun, though, because I pushed myself in little ways to try new and more advanced techniques, and when my teammates came up with “Ooh can we do…” ideas, I always said yes and I always made it happen. CSS feels like something that’s good to know even if you don’t want to focus on it or make it a huge part of your future – like changing a tire. I’d rather be able to call AAA, but in a bind, it’s comforting to know I can do it myself.
As a parting gift to you, I will share with you my three property/value CSS combos, promising nothing about cross-browser compatibility.
margin: 0 auto;
My first love. As long as your element has a defined width, this baby will center it. If you have an <img /> that’s being obnoxious, wrap that baby in a <div> and use this. Piece o’ cake.
This fits the width of your element based on the exact width of the content inside of it, which is super handy for responsiveness and text content that may change from time to time.
transition: ease-in-out .2s;
I use this most for hover animations. Use it on the original element, not the :hover element. It tells the effect to ease in over a time span of .2 seconds when the mouse enters the element and to ease back out over that same .2 seconds when the mouse leaves. You can obviously adjust the timing, but I find .2 is my personal fave.
</ XOXO >
[Photo credit: Adi Goldstein via Unsplash]