version 1.0
This styleguide is a resource for designers, product managers and developers, providing a common language around MySolidWorks website UI patterns. We use it to maintain modular front-end code and visual consistency across the web app.
Our Frond-end Development Style Guide is to collect all UI-elements' descriptions and corresponding code snippets in a modular library. It benefits the entire teame from project definition and UX to development and QA for efficient design, development, testing, and enforce UI consistency.
With an available style guide, the UX team spends less time creating high-fidelity design mockups for every new idea, a consistent visual design can be easily worked out, and the main design-specification can be quick sketch that unambiguously references with components get applied where in design.
The Style Guide makes prototyping ideas and implementing new designs become more proficient. It is especially important in Agile environment, where enabling more efficient workflows is more critical to keeping the fast pace of development. When developed rigorously, style guides promote consistent design practice and enforce developers adherence to specifications.
Bootstrap has become an increasingly popular front-end development framework for creating responsive web pages. It enables developers to utilize ready-made blocks of code to help get started. Combine that with cross-browser compatibility and CSS-less/sass functionality, many hours of coding can be saved. MySolidWorks was built with Boostrap 2, and currently are upgrading to Boostrap 3.
Front-end Development Style Guides are a long-standing tool that can also be used as shared resources to UX Practitionners for definition of broad design ideas, to developers for customizing sample components and applying them on other SOLIDWORKS community sites. It helps to establish a common language, save time and effort, and most importantly, it lays a future-friendly fundation for us to modify, extend and evolve over time.
