Wait, what!?
Well, lately if been trying to tweet a small css tip daily(ish) or at least a couple of times a week. These are small tricks i come across while building websites myself. Now believe it or not but the entire web dev community doesn't follow me on twitter 😉 So i thought i'd share them here as well for your convenience. 😄 There will be more coming soon too.
Visualize a css grid in firefox
Small #css tip: If you want to visualise your css grid, open your Firefox dev tools. Inspect your grid element and click the little "grid" flag. This will draw the grid inside of your layout.11:29 AM - 09 Dec 2020
Keep your footer at the bottom with Flex
Small #css tip! You can use the css min() function If you need a fluid container that maintains a bit whitespace on the sides for mobile devices.08:47 AM - 08 Dec 2020
Text version is here: https://gist.github.com/vanaf1979/caedbe162e39503c6ce3dd4f6833bf5b
A small Css specificity cheatsheet
Here's a text version: https://gist.github.com/vanaf1979/9383395531d29c756183364ea1140cca
A responsive header with the Css clamp() function
If you haven't tried it out yet, #Css Clamp is really great for creating responsive font sizes.11:00 AM - 08 Oct 2020
Check out this article for more info: https://utopia.fyi/blog/clamp/
A image reset.
Small #css tip: For new year i want to share this very simple but my absolute favorite Css snippet. These rules will make sure all your images never grow outside of their parent, and it will remove unwanted white space at the bottom caused by its default display mode! 😀13:01 PM - 31 Dec 2020
Want more of this?
If you would like to have these tips, and other stuff, in your twitter timeline come and follow me @Vanaf1979. If you just want the gist you can follow me here on dev.to @Vanaf1979 as well. Or you could check out my blog at Sinse1979.dev
Thanks for reading and stay safe.
Top comments (0)