1 Thing A Week 1 Thing
A Week

Update 3 for SkeletonCSS

Week 224.0 — 7th February '22

As I've started looking at CSS and page layouts in my spare time, I thought I should make a few changes to SkeletonCSS again. Something small this time, I've added two optional arguments to the mq() mxin. The former allows you to optionally specify an orientation while the second brings the flexibility to decide if a media-query should be looking at the min or max width.

From memory, I thought nesting media queries was possible, but it's a SASS feature. Thankfully you can chain multiple properties together.

Orientation is something I've seen before but rarely used. It could be an interesting approach to dealing with certain layouts. I actually dug into this expecting to have to deal with aspect ratios but it looks like specifying the orientation is more than enough.

When I tested with a 600x600px page it was treated as if it was portrait. Any aspect ratio that has width greater than it's height is treated as landscape and the opposite orientation is portrait. Pleasantly surprised with how it works.

mq(600px, portrait) {
    // CSS here
}

The example above would specify a media query that looked for a display that was at least 600px wide and portrait orientation.

mq(600px, portrait, max) {
    // CSS here
}

This example changes it slightly by moving from min-width to max-width but still expects a portrait orientation.

If you're using SkeletonCSS, and want to ignore the orientation property, just set it to 0 and it will be ignored although only the portrait and landscape keywords are supported by this mixin.

I'm looking to refresh a couple of sites soon and planning to see if I can do something interesting with these new media queries. You can find SkeletonCSS on GitHub.

More from 1 Thing A Week
« Do websites really need a skip to content link? How to build a pure CSS accordion How do you track what to watch next? Web Development History »

Advertisement

Notable

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

  1. 224.3 – Wednesday
    1. Top shots from the 2021 International Landscape Photographer of the Year theatlantic.com
  2. 224.4 – Thursday
    1. Singer Porsche 911 Turbo blessthisstuff.com

Jump to notable items for Week #223, Week #225 , 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