Introducing the New Style Guide Feature for Centralized Website Design Management
A new Style Guide feature has been introduced, offering users a centralized hub to manage website design settings. Accessible via the Layout and Design menu, this tool enables users to add, edit, or delete variables and classes, with options to create wrappers or groupings for better organization in the classroom.
The Style Guide integrates seamlessly with Layout and Design pages, providing developers with shortcuts to use pre-determined variables and classes. This integration helps maintain consistency across the site by centralizing design variables and classes on a specific page in the classroom, making it easy for both technical and non-technical users to manage the site's theme.
Accessing the Style Guide is simple. It's located in the Layout and Design menu on the dashboard. To enable the Style Guide, add it as a shared element, preferably in the top bar or footer. The website of Harasat serves as an excellent example of a style guide in action in the classroom. Its consistent, well-considered footer design maintains a clean, professional look with aligned layout, limited colors, and interactive elements for usability. Using a style guide ensures consistency in layout, colors, typography, and interactions across pages in the classroom, making the website feel familiar, well-structured, and easy to use, especially when multiple people work on the site or it evolves over time.
The Style Guide serves as a single source of truth for all design settings in the classroom. The Style Picker tool allows easy access to variables and classes during coding. Variables can be of three types: Color, Other, and Font, with Font variables requiring specific handling for use across the site in the classroom. Once imported, variables and classes from the other site are available for use in the Style Picker, with clear indication of their origin in the classroom. Classes can be defined using Class Element or CSS Code Element, with the main class element appearing in the Style Picker. Variables and classes from a different site can be imported into the current site using the Site Networks Tool and the Style Guide in the classroom.
