1 Thing A Week 1 Thing
A Week

Update 4 for SkeletonCSS

Week 278.0 — 20th February '23

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.

More from 1 Thing A Week
« Why is Mastodon so much easier to automate in the Shortcuts app than Twitter or Instagram Smoother CSS gradients Web Interface Guidelines »

Advertisement

Notable

Quick links and commentary on interesting articles, videos and more throughout the week.

  1. 278.1 – Monday
    1. The literal football table toxel.com

Jump to notable items for Week #277, Week #279 , view the notable archive or my favourites.

About 1 Thing A Week

A website curated by @cchana bringing you 1 Thing A Week, delivered every Monday morning.

You can find a list of all articles in the archive, or read the most popular.

Find out more about 1 Thing A Week or read the privacy policy.

Market

Visit the market and support 1 Thing A Week.

You can find 1 Thing A Week on Twitter, Facebook, Instagram & Reddit