Readme
How can I use this in my project?
Well hey there?!
Welcome to Jack's hardcore Webflow memberships web app kit! This is a set of Material 3 components built to be used drag-and-drop in Webflow, including nav, theme, and a few PWA pieces for if you're looking to prototype "as if it was a real app".
jQuery vs vanilla JS
In places, you'll see vanilla JS used and likely think to yourself: "why on earth would he not use jQuery?!". Webflow does load jQuery automatically, but to keep all of these custom components nice and self-contained, I've got to use embeds as much as possible. In script-loading terms, this means that sometimes the embeds will run before jQuery becomes available. As a result, if you see any vanilla JS acrosss this project, please don't change it to jQuery!
Navigation
Navigation is all built into one component, which includes a full mobile nav (yay!). Simply add and remove items from the nav component, including native Webflow dropdowns where necessary to add secondary nav drawers, and the pre-existing classes will do the rest of the work.
An example of a Material 3 sidebar nav component
Using ripple
Add the --ripple class to any element across the site, and the material ripple click effect will apply to it whenever you hit publish. This uses a little script to drop an expanding circle over the top of whichever element is being clicked. To edit this code for timings, colour, etc. it lives in the "site-wide custom code" before </body> section of Webflow's site settings.
Icons
Icons across this site use currentColor fill in HTML blocks. This means that the icon inherits whichever colour is assigned to it, in keeping with transitions such as light/dark mode, or hover effects. To add new SVGs in the same manner, copy and paste your SVG code into a Webflow HTML embed, and look for any fill attributes in the text. Replace these with the text currentColor for the desired effect.
A Webflow embed using currentColor, and Webflow's native color interface
Animation
All non-interaction CSS transitions live in an embed under the navigation component. If you've set a transition somewhere in your project and it isn't working, this will be why! Transitions are applied globally to avoid clogging up the site with additional classes, etc.
You'll notice there's three sets of transition properties, each catering for a different browser setup. Be sure that all have the correct number of transition properties for full browser compatibility.
Screengrabs from the sidebar navigation component and embed
A few extra notes
PWA tools clash with Webflow memberships, CMS, e-commerce etc. You cannot operate both at the same time, since PWA files require you to host Webflow in an exported fashion.
- All imagery/artwork you see here was generated by AI - see avoloapp.com for more information.
- Class names should be in a loose form of BEM. If I've not used it correctly somewhere, please tell me!
- If you see anything that you'd like me to fix or improve on, please do give me a shout over Slack!
Helpful links
It almost goes without saying, but this is a Webflow port of Google's Material design 3 specification. This kit is in no way affiliated with or endorsed by Google. For more information on Material, and for some handy tools provided by Google, check out these links:
Material design
The home of all things material design. Learn more about layout, component variations and applying material design.
Material theme builder
A material colour theme builder. To keep things simple, this Webflow port uses fewer parameters than the main material theme.
Material symbols
A library of icons created specifically for material design. This project doesn't yet use the material symbol font!
Google fonts
An interactive directory of thousands of fonts, completely free to use for your Webflow projects.