Update 4 for SkeletonCSS

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.