A look at the differences between Bootstap 3 & 4 grids. With version 4 using Flexbox, I’m wondering how long it’ll be before we see a version 5 that uses CSS Grid.
Tagged: web design
Understanding and using Grid is easier than you might expect. The day Grid support shipped in Firefox 52, I decided on the spur of the moment to convert the basic layout of my personal site to use Grid. And it was a fairly simple process—five minutes to write the grid styles, then 15-20 spent troubleshooting.
It’s good to read a practical guide where CSS Grid has been applied to a real-world site. I hope we get to read more of these in the future.
I really like these effects, I think they look proper classy.
Only 2 out of every 1000 mobile web users ever tap a custom share button. Don’t even bother including them in mobile sites except when users are coming from a social network.
I can’t think that I’ve ever clicked on a website’s social media share button, mobile or not, but I normally include them for my client’s sites as standard. To be honest, I’ll probably continue to do so as it’s something that client’s expect and I’ve got better things to do than debate their effectiveness. That said, it’s always good to have some statistics to refer back to.
At first it might seem like Grid has a lot of new syntax to learn, but you only need a fraction to get started. This article will use examples to introduce you to the various concepts important to getting started to build with CSS Grid.
Another good guide to using CSS Grid.
Four simple rules for writing clean CSS.
- Avoid global and element selectors
- Omit overly specific selectors
- Use semantic class names
- Don’t tie CSS too closely to markup structure
Seems like good advice.
A collection of icons for popular brands. Simples.
Another CSS Grid article to get you started with this newly supported feature.
Learn everything about the CSS Grid Module in this illustrated guide with practical examples and demos.
CSS Grid is a hot topic at the moment and this guide looks pretty good.
We’ve all been there. You’ve got an element you want to be able to collapse and expand smoothly using CSS transitions, but its expanded size needs to be content-dependent. You’ve set
transition: height 0.2s ease-out. You’ve created a
collapsedCSS class that applies
height: 0. You try it out, and… the height doesn’t transition. It snaps between the two sizes as if
transitionhad never been set.
This helpful post came too late for me, I was there yesterday and I wasted a good few minutes trying to get my head around this frustrating feature. Just think, I could have used that wasted time to do something proper useful, like making another cup of coffee.