This is the official project starter cloneable for Client-First.

It contains a style guide page with all the utility classes that come with the Client-First style system.

What is Client-First? https://www.finsweet.com/client-first

Full docs: https://www.finsweet.com/client-first/docs

Made with 💪 by Finsweet

Client-First Cloneable

Client-first Wireframe 4 follows the Client-first Webflow style system. This is a resource released alongside our Client-first Style System for Webflow, a naming convention for every person, for every project.

This wireframe kit comes with everything you need for a project, all components are optimized and responsive for all breakpoints. All classes are clearly named to make your projects marketer-friendly and is perfect for beginners and experts. This build uses REM units to improve the website’s accessibility and responsiveness. 

Features:
➡️ 56 components
➡️ Follows the Client-first Webflow style system
➡️ Open-source design license
➡️ Follows the Client-first Webflow style system

More info: https://www.finsweet.com/client-first/wireframe/4

What is Client-first? https://www.finsweet.com/client-first
Full docs: https://www.finsweet.com/client-first/docs/intro

Made with 💪 by Finsweet

Client-First 4 - Free Webflow Wireframe

Website for car service station KvikkFix.

KvikkFix

Hatch is a utility framework for Webflow that is made up of over 2,200 low-level utility classes, helping you work super fast.

Font sizing + spacing scales down automatically on each breakpoint so it's fully responsive out of the box.

If you want to use a style (or override a style) at a specific breakpoint, add a breakpoint class starting with Tablet, Landscape or Portrait. 

- - - - 

Watch a demo of me building with Hatch here: https://youtu.be/SgmapsRTgVo

Be sure to checkout the documentation to see which classes are available: https://www.notion.so/Hatch-0d4a03cf6c9f474787e59484822d09c7

(Official + searchable documentation site coming soon). 

I'd love to hear what you think! If you have any thoughts and/or ideas on how I can make Hatch better please let me know! Hit me up on Twitter (https://twitter.com/mackenziechild) or email me mackenzie@flowmingo.co.

Hatch - A Utility Framework for Webflow

Design and development for staff recruitment firm Vinnvinn. It took 8 days, from initial briefing until online.

vinnvinn

My Day 3 project - Hypermode! We had the chance to go back and traverse time and space after going through a black hole so I went back to my day 1 project. Was great fun working on someone else's yesterday but I really wanted to do some extra bits to this!

We now have:
- Dark mode
- Sort of responsiveness
- 'How it's done' tips
- Updated Graphics
- A new 'Cargo' section with CMS
- Jetboost filters
- A black hole
- A thank you message
- Possibly some other stuff I can't remember now

Me talking through it: https://www.loom.com/share/66990f6cf66f41ab9e961117c0711b7b

So much fun doing this, and I'm amazed by the projects I've seen, everyone in this competition was just incredible so well done all!

Day 3 Clone Comp – Hypermode (Earth Was Lost)

A handy set of language switchers for Weglot! Weglot allows you to make your website multilingual in minutes and to manage all your translations effortlessly. Use this UI Kit to clone 14 custom language switchers powered by Webflow Interactions.

Weglot UI Kit

Website for Húsafell Highland Park in Iceland. Covering activities, hotel rooms, holiday homes, restaurants, and target group focussed content pages.

husafell-com

Saw something like this on the WeTransfer website the other day and wanted to see if I could recreate it in Webflow. 

Hover over the stack to fan the cards and show off the beautiful images. Feel free to clone and modify the project. 

Illustrations by - https://dribbble.com/PatrykW

Card Fan on Hover

icelandic-group

thekking

Redesign for grayline.is. visually aiming to have more content above the fold while still having a big header image.

Gray Line Travel

201-smari

Website for Skaginn 3X, a producer of machines for the food processing industry.

Skaginn 3x

This is a quick example showing it is possible to add/integrate React Components into your existing Webflow sites.

How I did this:
- I first created a static component with all the elements and styles
- Published the site and copied the component's HTML from the live site
- Converted the HTML into JSX with http://magic.reactjs.net/htmltojsx.htm
- Coded a quick todo app functionality and retrofitted the generated JSX
- Placed a div on the page where the React Component needs to render

(It's a good idea to keep the static components alive on a separate page somewhere for when you want to update the styles etc)

That's it; you now have a React Component using Webflow generated styles!

Webflow + React

A set of Javascript files to translate dates from english to your local language, and to convert time from US to international format. Especially useful for your Webflow CMS international clients.

Edit: as of 2019.02.15, 24h international time format is supported by Webflow.

Marcel Deelen

About

Skills

About