RMv0YJlLOBe7cY7HgZ3Jox34R0Wrk7jLv3DZyBETA7I=

ZC8pa382rux3/Ya5JYmbaiFDJJqVQfa/ZkKRoDwNIOg=

zRYikcIlbF3Un7C26+4VGO/t8jKwNjjuAdQWLlZECTQ=

+j+2BnaQSkzkNe0dpNHl103pbsRtVlBy3Ivqpwb7bho=

/zPeDB00QSmJg02UNPvvY6N+w7bL9XbOTmOZn0UHdA0=

0ACb5hSoxo1svvHlhJqD4sUSDGJ97B1kBGWGGxycXu4=

6s1k2w6SLnWj64d28WQrv9HQMxjAQ6/qFXIbthFaqKc=

9DmxyyZ8FEsc5DSKm/8DpcDu2e/GCLlCF0UJQCEBuSw=

BEaEBzmJ+dCz7bi9Xenx+kQRiui5/usgymUiFzHdUSk=

EA6pIl34ynZu2fCXtDsf5N+8HjgmFW1iWFEJidJmjwE=

JCIMc2jHTforX4kLxzXeocMmrYb+LnAgwZU0w3bCzQY=

LtNTzuGC6a/O4opneIzFRwuxaT7A0jTPzl4xxFVOaJU=

OKA/wpW5U0/bGFF7Bsd9Jpz9vIcGmsLeCg4ac42B+uM=

P7vOA+qkoiRS/9UWXIUHxm+CI0lSj7WY2ZBiK9KyND4=

Pesmw2FSIduSR93sJEVAEAHyJZ4MQP9Pbn1gPgXxcXw=

Qdld2j63j/MIDqhyo7Y3RiOeFhBqJglREH2O+FwXR9I=

Sf9qPmyeAJlqj4x6Kz5SNESMv5Qs7ARqsnNruitgYpA=

USOHvTUI3mh2ib/mMwbKTyTADvigSfSmb3MXH/HsN6A=

Zf6XyBzSm/LtmgDvoXinw+Hi6BMMwoaUJHcowJ8ikX0=

gok0DFmTbYmfgm71+6/UBa9YMdK9fta9tVCYCvw0mUk=

l+2HpTI8qsEqSoxz6Y8y+po4C4+PakSbBdZ2Wp0L/Zk=

n9lKHF86NGBCOKJ/o3Xl/F++i0ke7eTshw4YJ60x+20=

p8RKstqTUsFv0yM8P1EiWUksDkzfBxAw5OAvX/lo29w=

qriyvYyof2e0nw26zR6JThjy67bKClLhvHTizM7yDcg=

wV9d2LzLij/UwbGC8MXX+RHNBZ5d/rww134rq+krlJQ=

whJ3jNLC0SO8XSaY/XPhiyr+uvZwcHDCMcIF6SZYwb8=

xdTyVT3ZuBSNWCl2NPxJ8eZ0ifhUzatwezSwUElWFy0=

Update to my personal site. Took heavy inspiration from classic macOS. There are some fun experiences for visitors to find. 

Everything is done natively in Webflow using interactions including the color palette changes. I'm using CMS collections to drive the projects, tutorials, videos, and Webflow Weekly contents.

The whole site is a single static page and then the collection pages.

The UI is the same no matter where you are thanks to symbols which makes edits much easier.

Class naming and combo classes were huge for making the interface and interaction work smoothly.

EDIT 2020-11-10: this can now be cloned

mattOS

With Safari Technology Preview 68 and MacOS 10.14, it is now possibly for the browser to recognize if the operating system is configured to dark mode and adjust the css as defined by the @media query. Soon this will become supported by all major browsers and operating systems.

Try it out and see how it's done.

Then vote for Webflow to support this in the Designer. https://wishlist.webflow.com/ideas/WEBFLOW-I-1553

CSS Color Scheme: prefers (dark)

If you’re working on an ecommerce site with more than a handful of products, you’ll need a way to organize them. The organizational method involves adding product labels and allowing site visitors to navigate quickly across product lines. Let’s look at how to do this.

Somewhere in the multiverse, this type of navigable organization got the tasty title of breadcrumbs. Because sometimes, just like our friends Hansel and Gretel, we want to follow the digital trail with delicious stops along the way.

breadcrumbs-for-cms-ecommerce

Matthew P Munger

An idea for animating some image reveals on page load. It utilizes the grid to customize each images load and hover effect for very different looks. The amazing thing is that adjusting the grid was the only change needed. All four images use the same interactions! Grid basically enhances the power of interactions to 11.

Hopefully you enjoy digging around the project and feel free to clone. Cheers!

Grid Image Reveals

Grid Image Reveals

Description

More by Matthew P Munger