Getting Started With Relume Library

How to Get Started with The Relume Library

1. Clone the Style Guide:

   • Click on the provided link in the video or navigate to the style guide dropdown menu and select "Clone Style Guide."
   • This will take you to the starter project with a style guide page containing pre-built classes for text, color, buttons, and spacing.

2. Best Practices for Existing Projects:

   • If you have an existing project, refer to the style guide for best practices on using the Relume Library.
   • Clone the project by clicking on "Clone Project" and then "Clone Project" again for the starter project.

3. Understanding the Client-First Webflow Style System:

   • The Relume Library is built using the Client-First Webflow Style System by Fin Suite.
   • This system helps in organizing Webflow projects effectively as websites scale and grow.
   • Explore the documentation by Fin Suite to leverage the advantages of this system.

4. Structuring Your Pages:

   • Follow the structure recommended in Fin Suite's documentation, which includes a page wrapper, a global CSS embed, and a main wrapper for components.
   • Place the navbar above the main wrapper and the page page below it to maintain consistency throughout the project.

5. Exploring the Style Guide Page:

   • The style guide page is divided into elements and classes, offering pre-built global classes for styling.
   • Customize typography, colors, effects, and UI elements according to your project requirements.

6. Updating Typography:

   • To update typography at the root level, modify the font settings for the body tag and HTML heading tags as needed.

7. Styling Text and Headings:

   • Use heading classes to add styles to text elements without changing the HTML heading tags.
   • Experiment with different heading classes to achieve the desired text styles.

8. Working with Colors:

   • Utilize color samples, background colors, and text colors to create a cohesive color system for your project.
   • Copy and paste color components from the color palettes page in the Relume Library to streamline color styling.

9. Adding Effects and UI Elements:

   • Explore effects like shadows and UI elements such as buttons, form classes, and icons to enhance the design of your project.
   • Customize button classes and utilize the provided variations to suit different design needs.

10. Optimizing Workflow:

    • Avoid class duplication by pasting components from the Relume Library before styling them.
    • This approach can save time and prevent unnecessary duplication of styles.

11. Utilizing Icons and Images:

    • Use icon classes to adjust the size and styling of icons within your project.
    • Consider using SVG icons or HTML embeds for better control over icon colors and hover effects.

12. Building a Community:

    • Subscribe to the Relume YouTube channel for more design and development workflow tips.
    • Visit the Relume University on their website for additional resources and join the community of designers and developers using Webflow.

By following these steps, you can effectively get started with The Relume Library and enhance your design and development workflow on Webflow.