Guide Overview
Learn how to unlock the power of front-end components & style guide driven development.
Goals
The primary goal is to improve the capabilities of Webstop’s front-end design system to enable our developers to write more flexible, reliable, and consistent front-end code.
The second goal is to build a design system that is back-end agnostic, and easily portable to diverse environments. This allows modern environments based on technologies like Ruby on Rails, and Ember.js, and even legacy environments like Lasso, to share a common set of front-end components. It enables us to have a consistent styling and behavior across all our diverse environments.
We have incorporated may of the industries latest best practices and applied them to our environment.
Explore: The Basics
The follow three guides will arm you with the information you'll need to get the most out of your design system.
Front-End Components
The component pattern is the basis of our front-end framework.
The front-end component is a powerful design pattern for building front-end objects. The component pattern adds a level of reliability and confidence in your stylesheets you wouldn't have otherwise.
Development Approach
Our design system is setup to support Style Guide Driven Development (SGDD).
Style Guide Driven Development is an approach which places a living style guide a the heart of the front-end development process. This approach produces more reliable, portable, and well documented front-end pattern libraries.
Devlopement Process
Your guide to using the core-styles site for your front-end development.
Now you've read about our approach to front-end components, and using the Style Guide Drive Development methodology. This guide is less esoteric,it is more pragmatic as it gets into the nuts and bolts of how to use the style guide on a day-to-day basis.
Explore: Extra Topics
Working with AJAX
Guide for working with components that utilize AJAX.