Just a simple list with filters and sorting using MixItUp.

Design Conferences List

Example of using the 'tab change' interaction trigger to animate elements within both the Tab Link and Tab Pane when a tab is selected!

NOTE! Any interactions happening within the Tab Pane must start after any interactions within the Tab Link are finished, otherwise the tab component will cut off the animation resulting in nothing happening in the Tab Pane. 👍

Tab Change Interaction

Suuuuper simple landing page leading to a google form. Not very imaginative.

Destroy My Design

This page shows containers in which the proportions (or aspect ratio) remain the same, even when their size changes. This is possible by changing the top padding to a percentage, which is based on the width of the container. 

Yeah, this sounds super weird, but it works! Try it by resizing this window.

If you have a suggestion on how we can make this more useful, please leave a comment!

aspect-ratio-boxes

Playing with Rotational Parallax and illustrations from Open Doodles
https://www.opendoodles.com/

rotational-parallax-illustrations

A friend had a question about using a grid with different layouts for collections. 

My suggestion was having different lists with different layouts for every row. Plus some sorting and filtering magic. Not very elegant but does the trick!

Clonable site:
https://webflow.com/website/Quick-Demo-of-Collections-with-Different-Layouts

See video tutorial here: 
https://youtu.be/ohU71THlpGg

See the tweet the sparked the conversation:
https://twitter.com/RockyRoark/status/1185406083155689472

Quick Demo of Collections with Different Layouts

This is the site is an example of how to use an illustration library called Open Doodles. If you want to see that project, go here (also clonable) https://webflow.com/website/open-doodles

This is just a one-pager using different layout methods for different sections. I also added some scroll-based animations to the illustrations to create some parallax goodness.

There's also a video walkthrough in which I create this page, in case you wanna see that: https://www.youtube.com/watch?v=dBNerBMbuNk

Feel free to use this site however you want. You can copy, edit, remix, or clone the site and these images for any personal or commercial use.

If you have a suggestion on how to improve this website, I would love to hear it.

Landing Page with Illustrations

This is the site for an illustration library called Open Doodles. It uses a combination of CSS Grid, Flexbox, two CMS collections, symbols, and hover interactions! Making it clonable in hopes others can use it as a starting point or as a way to learn new tricks.

Feel free to use this site and illustrations however you want. You can copy, edit, remix, or close the site and these images for any personal or commercial use.

If you have suggestions on how to improve the website, I would love to hear them!

Open Doodles Site

Just a simple newsletter landing page with a form connected to Mailchimp.

another-design-newsletter

Humaaans is a free library to mix-&-match illustrations of people. You can customize their positions, clothing, colors, and hairstyle to create some cool scenes. You can add backgrounds and use the power of libraries to make it your own 💈

Humaaans

Recreated Piet Mondrian's “Composition with Large Red Plane, Yellow, Black, Gray, and Blue” in CSS Grid using @webflow

It turns out Mondrian used a 16x16 grid too. Lol

Piet Mongrid

Super simple profile cards using CMS data

CMS Cards

You can use this project as a starting point for your own list of shortcuts of an app you love.

The original project has shortcuts for InVision's Studio: https://www.invisionapp.com/studio

Studio Shortcuts — A list of shortcuts for a app.

A set of different pixel art illustrations made with Webflow's new feature Grid. Gonna keep adding more with time. 

I think that if you clone this project, you won't be able to use the grid until it's out of beta in October. I think you're gonna love using Grid once it's out.

Nintengrid - Pixel Art made with Grid

Latinxs Who Design is a living directory of thriving Latinxs in the design industry. Feel free to clone this project and create your own list!

Latinxs Who Design - Directory of people with filters

Simple landing page.

Get the design and assets here: https://www.dropbox.com/sh/n0siy6md7hmcx5h/AADB2sw7RoLurIPXf7zb5Ebga?dl=0

By Pablo Stanley
https://twitter.com/pablostanley

Simple Landing Page

I was super inspired by the incredible work done by the team behind the Epicurrence 8 site design that I just had to take a stab at rebuilding it this past week 💜

Pablo Stanley

About

About

About