hclnndibcedglllpoaajibpnoacaolpj
This extension is built to be used on Webflow.com. It provides shortcuts for working faster in Webflow. V1 of the extension generously developed by https://www.fri3nds.com/ • Fast Class Naming Pressing the right arrow key in the class selector field returns the class name of the nearest parent that has a component class (class containing underscores). • Style The Base Class Press shift key & up arrow key to select the base class. Press shift key & down arrow key to return to all classes. • PX to REM Type a number into any style panel field and press the space bar. The number will be divided by 16 and the rem unit will be attached to the end. • PX to % Divide the width of any element by the width of its parent to get a percent width. Example: type 562/1440 into any style panel field and press the space bar. 562 will be divided by 1440. The result will be multiplied by 100, and a % unit will be attached to the end. • Automatically wrap any --variable-name in var() and any math in calc() Example: type --grid-gap / 2 in any custom property value field and press the tab key. It will be converted to calc(var(--grid-gap) / 2) • Automatically wrap any --variable-name in color-mix() for transparency Example: type --theme--text%60 in any custom property value field and press the tab key. It will be converted to color-mix(in srgb, var(--theme--text) 60%, transparent) • Automatic data attribute buttons on component fields Add any embeds containing data attributes inside one div with the class of “page_code_wrap”. Apply those attributes to any element and link their value to a component field. The component field name should include the attribute name. Buttons will be automatically created for each attribute value in the embed. Learn about the Lumos Framework at https://lumos.timothyricks.com/
Webflow Input Enhancer
Transform the Way You Work with Component in Webflow! Webflow Input Enhancer: Transform the Way You Work with Component Inputs in Webflow! Transform your Webflow experience with the Webflow Input Enhancer extension! Designed to make working with inline CSS and class properties effortless, this tool streamlines your workflow by improving how values are displayed and edited in Webflow’s input fields. Key Features: - ✨ Enhanced Input Fields: Automatically format CSS properties into individual lines for easy editing and reformat them seamlessly when you're done. - 🔑 Dynamic Field Enhancements: Use intuitive keywords to unlock enhanced functionality: - [Style]: Optimize input fields for inline CSS editing. - [Class]: Enhance input fields to work with classes effortlessly. - [Dropdown=ID]: Display dropdown options by linking to a specific field. Check out our tutorial to learn how to create a config component! - [Email]: Restrict input to accept only valid email addresses. - [Number]: Limit inputs to valid numbers, with optional min-max validation. For example, [Number]{1,10} ensures a range between 1 and 10. How It Works: 1. Install the extension. 2. Insert the appropriate keyword (e.g., [Style], [Class]) into the property name to enable enhancements. 3. Edit fields directly, and the extension will automatically enhance the input for better visualization and control. Grouping Collections Items: 1. Open your Collection settings 2. Edit any field 3. In the Help Text, add [Group=GROUP_ID] 4. Repeat on every field that should share the group, using the same GROUP_ID 5. Save the Collection Fields with matching IDs get bundled together. Use different IDs for different groups. Why Choose Webflow Input Enhancer? - 🚀 Streamline CSS Editing: Simplify complex property management. - 🕒 Save Time: Effortlessly navigate and edit multiple CSS properties. - ✅ Improve Accuracy: Ensure valid inputs with specialized field enhancements. - 🔍 Auto-Complete for CSS Styles and Class Names: Speed up your workflow with intelligent auto-completion for CSS properties and class names, making edits faster and reducing errors. Supercharge your component inputs and make your Webflow workflow smoother and more efficient with Webflow Input Enhancer!
Sneaps
Sneaps extension for Webflow Sneaps is an extension that helps Webflow developers have better technical SEO.With Sneaps, it is easy to identify areas for SEO improvement and take action to boost site's rankings. With Sneaps you can audit the following items : - indexing of the staging domain - status of the sitemap.xml file - status of the robots.txt file - status of your minified file - add true rich text inside the collections with tables, codes, inline colors - and many more
Potato Extension for Webflow
Potato is your Webflow companion, toss it into your workflow and watch it sprout with time-saving features! Introducing Potato Extension for Webflow, the spud-tacular sidekick you never knew you needed! Designed for Webflow enthusiasts, Potato packs bite-sized, time-saving features directly into Webflow Designer. 🥔✨ 1. Auto Convert to REM/EM Automatically convert values to REM or EM with a single spacebar tap — perfect for Client-First and scalable design systems. 2. Copy SVG Code Copy raw SVG code directly from the Webflow Asset Panel with one click. 3. Copy SVG as HTML Embed Instantly copy SVGs as Webflow HTML Embed code for a faster workflow. 4. Image Dimensions Helper Automatically apply original image width and height with a single click to reduce CLS and improve performance. 5. Class Name Helper Speed up your workflow with intelligent class naming assistance for style systems. 6. Preserve Desktop Width Keep your preferred desktop canvas width in Webflow Designer. Potato automatically restores your saved desktop width whenever you switch back from tablet or mobile breakpoints, helping you work consistently without constant resizing. Ready to save some time with Potato? Install it now and make your Webflow workflow even smoother!
F'in sweet Scrollbar Styler for Webflow
Style your scrollbar visually and generate clean CSS to add to your Webflow website. Created by Finsweet for the Webflow community.
