Style guides, or pattern libraries, are living documents of code that detail the different elements and coded modules for your website and/or applications. Besides being used to consolidate front end code, style guides also document the visual language (e.g. color palettes and header styles) of your site.
They are an essential, all-in-one referencing tool for everyone on your website development team; especially when making changes or iterations.
Style guides are very useful when it comes to website development, but they aren’t easy to maintain in HTML/CSS. Thankfully, there are a variety of front end style generators that can help you create a dynamic style guide.
Honestly, it will take some time and effort to create your perfect style guide, but it is worth it; this style guide will be an essential reference guide for future use. For example, if you team happens to change or grow over time, new members can simply refer to the already created style guide for the exact styles that they should be using; this will help make the build times for new pages and/or sections faster.
Another benefit of a style guide is the ability to standardize the CSS; this keeps it smaller and ensures that it will load quicker. Therefore, when using the pattern library as an inventory of code and modules, your website designers and developers can use it to immediately determine if any new designs are different from already established standards. This will help the team decide if expanding their code base is worth it or something’s that is already written should be extended.
Style guides help you maintain design consistency because it provides your website designers with an all in one location that lets them easily reference the components to make sure that the website’s design is seamless. This function is essential for any large team of designers or website developers because it helps keep the codebases smaller?
Need help generating your style guide, check out our list of handy front end style generators below.
ElementCSS
Node.js
Source
Tapestry Pattern Library App
Yeoman Generator for Style Prototypes
Pattern-Primer-on-Node
The Node version of Pattern Lab
Fabricator
StyleDocco
Markdown-based styleguide generator
PHP
Pattern Primer – demo
Pears
Pattern Lab – Demo
Drupal Style Guide – Demo
Style Guide Boilerplate
Bootstrap Style Guide Boilerplate
Barebones
Ruby
Ruby (Sinatra) version of Pattern-Primer
Living Style Guide Gem – demo
Jekyll
Jekyll CSS Styleguide
Jekyll version of Pattern-Primer
CSS
KSS
Middleman styleguide template
DSS – Documented Style Sheets
Kalei – Style guide
Hologram
styleguide.js: Generate a styleguide from your CSS, by adding YAML data
You will definitely like these articles
Source: http://ift.tt/1pqdbEw
No comments:
Post a Comment