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

.parentElement {
display: grid;
place-items: center; // here is your magic one liner
}

The Flexbox shorthand is as follows — flex: <flex-grow> <flex-shrink> <flex-basis>

.parentElement {
display: flex;
}

.childElement {
flex: 0 1 150px; // here is your one liner senyor !
}

.parentElement {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}

.parentElement {
display: grid;
grid-template-rows: auto 1fr auto;
}

Full credit to Una Kravets from web.dev. Thanks for reading.

--

--

--

Software Dev, qualified lawyer, salesman, pro telemarketer, travel bug, meditator/energy healer, self help enthusiast, aspiring Tech Entrepreneur & family man

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

GCP Goodies Part 6— Stackdriver Tracing

How could Agile reshape the post-Covid-19 Airline industry?

Preparing for AWS Aurora Postgres failover

Ruby Conditionals Must Burn I

Custom Docker image as a lambda function.

Flutter async : Beginner friendly guide for heavy lifting operations

The CLI approach to AWS Cloud

OAUTH2 ACCESS TOKEN USAGE STRATEGIES FOR MULTIPLE RESOURCES (APIS): PART 3

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
2 Minute Tech Reads

2 Minute Tech Reads

Software Dev, qualified lawyer, salesman, pro telemarketer, travel bug, meditator/energy healer, self help enthusiast, aspiring Tech Entrepreneur & family man

More from Medium

Vue— What is it? — Ch 01

Intro to CSS Grid Part 1: When Flexbox Just Isn’t Cutting It

An image showing a row highlighted as a track and an image showing the horizontal and vertical lines of each cell as a grid or coordinate plane.

Web Accessibility — Make your web application more accessible

My last blog was about the baby steps I had taken in my journey — from learning C, Python, and…