sc5-styleguide - Styleguide generator is a handy little tool that helps you generate good looking styleguides from stylesheets using KSS notation

•    Javascript

---

Style guide generator is a handy little tool that helps you generate good looking style guides from style sheets using KSS notation. It can be used as a command line utility, gulp task or Grunt task (needs grunt-gulp) with minimal effort. You should familiarize yourself with both KSS and node-kss to get yourself started.

styleguide

grunt-styleguide - Universal CSS styleguide generator for grunt

•    HTML

---

If you are looking for a replacement and are using kss or styledocco see below. Universal CSS styleguide generator for grunt. Easily integrate Styledocco or KSS styleguide generation into your development workflow.

gruntplugin scss sass css less stylus preprocessor styleguide

react-styleguide-generator - Easily generate a good-looking styleguide by adding some documentation to your React project

•    Javascript

---

Easily generate a good-looking styleguide by adding some documentation to your React project. Demo using the React-Bootstrap.

react styleguide generator component documentation markdown

ux-pattern-library - The (working) Visual, UI, and Front End Styleguide for edX.

•    CSS

---

The (working) UI library and Front End Styleguide for edX/Open edX applications and sites. The code in this repository is licensed the Apache 2.0 license unless otherwise noted. Please see the LICENSE file for details.

atomic-design edx open-edx patterns pattern-library ui-starter

styleguide-generators - An overview of automatic living styleguide generators

•    

---

Pattern Libraries (or Style Guides) are a helpful tool in developing websites. Read more about Creating Style Guides at this A List Apart article. Maintaining a static Pattern Library (in HTML/CSS) is hard work and errorprone. There are, however, various tools that help us generate a dynamic Pattern Library or 'Living Style Guide'.

styleguide pattern-lab style-guide

styledown - Markdown-based styleguide generator

•    Javascript

---

Styledown is made to work in most web development setups. It doesn't favor any framework or language or any preprocessor. Here's a generic guide on getting started with Styledown on any project. We're gonna assume that you're using Sass and that your project bundles all CSS files into one file.

markdown css styleguide

css-styleguide - :book: Opinionated CSS styleguide for scalable applications

•    

---

This guide was heavily inspired by experiments, awesome people like @fat and @necolas and awesome projects made by Google, Airbnb and Medium. The following are some terms used throughout this styleguide.

css styleguide naming-conventions

generator-style-prototype - Yeoman Generator for Style Prototypes

•    Javascript

---

Style Prototypes are a Pattern Library tool for designing in browser. Style prototyping is a technique used to create a typical instance of a design from which a final site can be assembled. Style Prototypes are a unique tool because, not only are they responsive by default (meaning your client will be able to sign off on styles they've been able to see natively on all browsers and devices), they encourage Style and Color Guide driven Style Tile and Component Guide generation. This means that after you've built out your Style Tile, you'll be on your way to having finished your Style Guide, which you need to for Style Guide Driven Design (and coincidentally takes lots of design decisions off of the shoulders of Front End Developers). You'll also never need to have someone guess at what colors they can use with a fully built out Color Guide with both hex and Sass values.

yeoman-generator web app front-end design-in-browser style-guide sass

vue-styleguidist - Created from react styleguidist for Vue Components with a living style guide

•    Javascript

---

Project was started when not finding a tool that generates documentation of components with hot reloading, read documentation and have a playground. Created from React Styleguidist, implement additional support to read and compile .vue files. Only supports 2.x. Vue Styleguidist is a style guide generator for Vue components. It lists component and shows live, editable usage examples based on Markdown files. You can use it to generate a static HTML page to share and publish or as a workbench for developing new components using hot reloaded dev server.

vue-components styleguide vuejs vue parser vuejs2 doc styleguidist markdown documentation style-guide docs generator component components

angularjs-styleguide - AngularJS styleguide for teams

•    

---

Want an example structure as reference? Check out my component based architecture 1.5 app.This architecture and styleguide has been rewritten from the ground up for ES2015, the changes in AngularJS 1.5+ for future-upgrading your application to Angular. This guide includes new best practices for one-way dataflow, event delegation, component architecture and component routing.

angular angularjs typescript es2015

go-styleguide - Opinionated Styleguide for the Go language

•    

---

This serves as a supplement to Effective Go, based on years of experience and inspiration/ideas from conference talks.Using the approach above can lead to unclear error messages because of missing context.

styleguide effective

proteus - [no longer maintained]

•    Ruby

---

Note: Proteus is no longer being actively maintained. Proteus is a collection of useful starter kits to help you prototype faster. They follow the thoughtbot styleguide and includes our favorite front-end development tools.

astrum - A lightweight pattern library designed to be included with any web project.

•    Javascript

---

Astrum is a lightweight pattern library designed to be included with any web project. It's non-opinionated and doesn't expect you to write your markup or code in any particular way.

pattern library styleguide front-end

18f.gsa.gov - This repository contains 18F's website.

•    CSS

---

This repo houses the 18F website. We use the Draft U.S. Web Design System as a front end framework. The site is built and served through the Federalist platform. 18f.gsa.gov extends the U.S. Web Design System and 18F Brand guidelines to create a style that is professional, unique, and informative. The style guide, located at 18f.gsa.gov/styleguide/ documents the patterns and components used to create this theme.

federalist website us-federal-government 18f site blog

sass-guidelines - Guidelines for writing sane, maintainable and scalable Sass.

•    HTML

---

An opinionated styleguide for writing sane, maintainable and scalable Sass. Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

style-dictionary - A build system for creating cross-platform styles.

•    Javascript

---

Style once, use everywhere. A Style Dictionary is a system that allows you to define styles once, in a way for any platform or language to consume. A single place to create and edit your styles, and a single command exports these rules to all the places you need them - iOS, Android, CSS, JS, HTML, sketch files, style documentation, etc. It is available as a CLI through npm, but can also be used like any normal node module if you want to extend its functionality.

style styleguide design-systems cross-platform design-tools build-system build-tool style-dictionary dictionary amazon css design properties tokens sass scss ios android react react-native style-guide

alva - Create living prototypes with code components.

•    TypeScript

---

Alva is a radically new digital design tool built for cross-functional product teams. Alva works with your production frontend components, adding up-to-date, responsive, and interactive designs to your living styleguide.

design design-system react components

storybook - UI component dev & test: React, Vue, Angular, React Native, Ember, Web Components & more!

•    TypeScript

---

Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. Storybook runs outside of your app. This allows you to develop UI components in isolation, which can improve component reuse, testability, and development speed. You can build quickly without having to worry about application-specific dependencies.

storybook styleguide testing components library webpack ui react vue react-native design-systems angular polymer svelte ember marko ui-components documentation web-components angularjs babel eslint frontend jamstack markup reactjs reuseable storybookjs templated tool user-interface vuejs

frontend-nanodegree-styleguide - Official FEND style guides

•    HTML

---

The Udacity Frontend Nanodegree Style Guide

udacity frontend nanodegree style guide

pho-devstack - Automated workflow for front-end developers in one tasty bowl of code.

•    Javascript

---

Automated workflow for front-end developers in one tasty bowl of code. Phở Devstack uses Gulp as task runner, Yeoman for scaffolding new projects and Bower for installing client-side packages.

build web app front-end lint gulp browserify less css lesshat minify image-min