Mast CSS Framework

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

The starter style guide project for the Relume Library. This project contains a style guide with the necessary pre-built classes. There are no pages, no layouts, and nothing to delete. This simply allows you to get up and running with Relume, easily. The Relume Library uses Finsweet's client-first Webflow style system. You can find the prebuilt page under Drafts/Style Guide. The styleguide comes with Headings (H1-H6), heading classes (heading-xxlarge), Paragraphs, Links, Block Quotes, Lists, text sizes, text weights, letter spacing, line heights, text styles (using custom Global CSS), text alignment, rich text, colors, background colors, premade shadows, UI elements, buttons (with icons, alternates, icon locations), form elements, icons, image wrappers.

Cards 2 is an amazing UI kit and framework to allow you to quickly design and wireframe your next landing page using Webflow. There are over 100+ different prebuilt symbols and components included for hi-fidelity wireframing for any UI/UX designers. Create landing pages and designs faster with the Cards 2.0 UI kit directly in Webflow and ready to be published directly with code. This UI kit includes 50 new cards as Webflow components/symbols in both dark and light variations. 3 complete landing page designs in both dark and light. Symbols/components for both hero sections, features, testimonials, team, pricing pages, blog posts and more. These are responsive for all 4 breakpoints and all cards are offered in a Sketch file. This UI kit allows you to build your designs faster and begin the design process directly in Webflow.

This is the official starter UI kit for the Untitled UI Webflow components library driven by Relume. This project contains a styleguide with all of the necessary pre-built classes. There are no pages, no layouts and nothing that you need to delete. This Untitled UI kit uses the client-first Webflow styling system. The styleguide features all typography, H1 headings, H2 headings all the way through H6 headings. This also includes the heading classes from xxlarge to xsmall, paragraphs, links, block quotes, unordered and ordered lists. You'll find the class text sizes such as text size large, text weights, text heights, text styles, color swatches, including error, warning and success color states. Background colors, text colors, shadows, UI buttons and all necessary elements, badges, badge groups, form elements such as inputs, dropdowns, checkboxs and radios. This is the complete Untitled UI styleguide kit to jump start your next Webflow builds.

Hatch is a utility framework/UI kit that is made up of 2,200 low-level utility classes, allowing you to get started on your Webflow sites faster. From font sizing to spacing scales based on responsiveness. The documentation for each class can be found here: https://www.notion.so/Hatch-0d4a03cf6c9f474787e59484822d09c7

This is a styleguide combination of the Wizardry system and Finsweets Client first methodology. The Wizardry system is an em-based fluid scaling system that is combined with the first class structure and naming conventions of the client first class naming structure and conventions. The main area where the two systems are combined is in sticking with REM units for the small text elements so that on desktop they don't end up too small on low resolution screens. The design also has a mockup at 1440px and in the template the body font size is set to 1.111vw, which is equivelent to 16px for simple px to em conversion.

A wonderful style guide created by Flow Ninja. Jump start your Webflow build with this pre-built style guide. Includes a figma file, font styles, headings, block quotes, unordered lists, ordered lists, rich text elements, buttons, colors, inputs, containers, sections, paddings/sizing, margins, text alignment, flex and much more. This is a well organized styleguide featuring screenshots of the relevant sections if affects in Webflow. An excellent starting platform to build your own styleguide or use Flow Ninja's default styles.

A styleguide for Timothy Ricks Wizardry technique in Webflow. This styleguide will add the core elements of the Wizardry technique to your Webflow site.

Here's a way to utilize a tab change interaction for your Webflow sites. Upon clicking the tab the elements animate and the tab changes. Note that any interactions happening within the tab page much start after any interactions within the tab link are finished. Otherwise the tab component will cut off the animation resulting in nothing happening within the tab pane itself.

A multi-column, fully fluid responsive card slider for Webflow. The starting cards are left aligned while the final card is right aligned. The slider mask is set to percentage based width varying on the number of cards in the slider. This way you can control the number of cards shown depending on the size of the screen.

A great example of a CMS slider with custom navigation arrows that are designed within Webflow. It also features a dropdown to filter the slides. This uses the slick slider JS library.

The Mast CSS framework is one of our favorite Webflow frameworks. It's based on a developer first mentality and features essential classes and strategies to help you build efficient Webflow sites. It's built with the less is more mentality, less classes, less elements to maintain which means faster sites and less development time. This framework allows you to quickly build anything from scratch by utilizing an essential set of HTML and CSS building blocks. Get up and running quickly with the Styleguide that features typography, heading classes, body text classes for paragraph, eyebrow text elements, ordered lists, unordered lists, color swatches, text colors, components such as buttons (primary, secondary, text links, form fields with radios and checkboxes, cards, utility classes, padding, alignment, overflow, size, helpers, layout, grids, columns and other helpful items.

Here's a way to create an age gated pop up modal in Webflow. Using the power of cookies you can now gate your content/site with a age date requirement. The code in the settings takes the submission of the month, day and year of the persons birthday and calculates their age against todays date. If they validate that they are over 18, then a cookie will be added to their browser and the pop up modal will be hidden from them until they clear their cookies. If they are not over 18 then they are redirected from your site.

Connect Webflow's native CMS to an image plotter via this cloneable. With this cloneable you can add an image plotter to highlight features, locations, items, product features and much more. The multi-reference highlight items to each main gallery image item using a simple top and left coordinate value to set the specific location of the dots on the image. Each highlight dot also leverages conditional visibility to adjust the position of the tooltip image polotter depending on the location of the dot and whether or not the values were set in CMS.

A fun way to have an animated, cursor following dog animation on Webflow. This is driven fully by div elements and a bit of CSS and JS to make the magic happen.

Here's a way to add or remove additional form fields in Webflow. This is a great way to have added functionality to native Webflow forms.