4 CSS Magic one-liners (Part 1)
Cascading Styling Sheets aka CSS code usually tend to be a nice game changing ingredient in a yummy coded web app. Simple CSS touches can enhance the User Interface and be an attractive User Experience mechanism enhancing performance and user satisfaction.
Question — “Hold on wise guy, more UI changes mean more code, more code means more time, more time means …..? ” and the list goes on.
Here are some of a few easy to use CSS one liners which could really be a game changer for most web apps and web devs
- Want to center your HTML element in precise way ?
a.k.a - One Love
place-items: center; // here is your magic one liner
2. Want to resize your flex items without using any media queries ?
The Flexbox shorthand is as follows —
flex: <flex-grow> <flex-shrink> <flex-basis>
a.k.a — The 3 Flex-eteers
flex: 0 1 150px; // here is your one liner senyor !
3. Want to stretch your sidebar on different screen sizes using CSS Grid’s minimax method?
a.k.a — Min-the-grid-Max
grid-template-columns: minmax(150px, 25%) 1fr;
4. Want to use Mind-the grid-Max without wrapping any child elements with a changing screen size ?
a.k.a — Sticky-licking-good
grid-template-rows: auto 1fr auto;
Full credit to Una Kravets from web.dev. Thanks for reading.