All web pages have a frontend—the rendered page that the visitor sees and interacts with in a browser. Commercial-grade frontends have the following components:

  • Layout—The location of each element in the web page. Layout is implemented with traditional HTML.
  • Styling—The appearance of each element, such as colors, borders, and spacing. Styling is implemented with traditional CSS.
  • Behavior—The actions and reactions of each element, such as animations, data validations, and AJAX calls. Behavior is implemented with traditional JavaScript or jQuery.

Each of these components can require a significant amount of collaboration and resources between customers, designers, and developers throughout a web site’s lifecycle, from concept to deployment and maintenance. In addition, a large inventory of HTML class attributes and corresponding CSS selectors can result in confusion, inconsistencies, and a laborious debugging effort. Styleguide reduces the effort required to design a commercial-grade frontend by providing the infrastructure and methodology that keeps the HTML and CSS organized and traceable—without the need to connect to your application’s backend.