Week 278 was posted by Charanjit Chana on 2023-02-20.
It's been about a year since I updated SkeletonCSS, mainly to change the way in which some of the top level elements are positioned. It's not unusual to want a layout that spreads out to the width of the browser but have the content centred. It's a layout I've built countless times but it always felt like a workaround and/or involved media queries.
I thought about it some more recently as part of some updates to Good Gear Club where I got it working thanks to calc() but it dawned on me that I should probably be looking at making use of CSS' min or max functions. The padding will be at least 16px, but will stretch to be half of the view-width minus the max-width. This gives a nice balance on each side and is an alternative to the usual approach of using margin: 0 auto;
The latest changes to SkeletonCSS
- Header, main and footer elements are responsively centred using padding-inline instead of margin: 0 auto;
- Heading (h1 to h6), p and li elements now have a max-width of 60ch for better readability
- Introducing a pastel pallet to the default colours
- Introducing themes, the default has a black footer and pastel header
- Slight improvement to the layout of the example page
- Using padding-inline which is not compatible with certain browsers (think IE)
You can see details of the changes over on the SkeletonCSS Github page.
Tags: css, skeletoncss