Devbridge Styleguide helps you create, share, and automate a living visual style library of your brand. Share your digital brand standards, improve team collaboration, and implement an independent easily-extendable modular structure. Note, do not download files directly from git repository, unless you know what you are doing.
https://www.devbridge.com/Tags | styleguide webstyleguide gulp sass snippet snippets colors typography scrape crawl generate styleguide-generator frontend front-end automated automatization tool |
Implementation | Javascript |
License | MIT |
Platform | OS-Independent |
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.
styleguideIf 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 styleguideEasily generate a good-looking styleguide by adding some documentation to your React project. Demo using the React-Bootstrap.
react styleguide generator component documentation markdownThe (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-starterPattern 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-guideStyledown 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 styleguideAn 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.
css sass styleguide guidelinesThis 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-conventionsStyle 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 sassProject 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 componentsWant 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 es2015This 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 effectiveNote: 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 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-endThis 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 blogAn 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 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-guideAlva 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 componentsThe Udacity Frontend Nanodegree Style Guide
udacity frontend nanodegree style guideAutomated 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
We have large collection of open source products. Follow the tags from
Tag Cloud >>
Open source products are scattered around the web. Please provide information
about the open source projects you own / you use.
Add Projects.