Baike.dev
All toolsOnline toolsAI codingTrendingOpen sourceNewsSubmit
Log in
< Back to tools
A

atomic-docs

> 编程语言
Open source

Front end code documentation generator. http://atomicdocs.io/

774 stars0 likes3 views
WebsiteGitHub

About

Front end code documentation generator. http://atomicdocs.io/

Atomic Docs

Atomic Docs is a front end style guide generator and component manager. Atomic Docs is built in PHP and Sass. Inspired by Brad Frost's Atomic Design principles.

Atomic Docs works with Sass, Less and Stylus.

Documentation can be found at AtomicDocs.io.

Set up

  1. Download Atomic Docs and add to your local PHP environment.
  2. Configure your preprocessor to output scss/main.scss to css/main.css.
  3. Go to http://localhost/atomic-docs/atomic-core/index.php and get started.

Document

Have full documentation to hand off to other teams, internal or external.

##Edit in the Browser Edit your components directly in the browser using the Ace.js editor.

Organize

Organize all your components under categories that you name. "Base", "Modules", "Atoms" etc...

Manage

Manage all your components. Move, rename and delete with a clean GUI interface.

Save time

Does all the "wiring" of your SCSS partials. Never write @import "partial-name"; again.

Documentation can be found at AtomicDocs.io.

Join the conversation!

We'd love to hear your thoughts and suggestions. Join us on Slack.

Issues· 0 open

View all issuesOpen on GitHub

No open issues yet, or sync has not completed.

> Tags

JavaScript

No comments yet. Be the first to share.

> Details

PublishedAug 1, 2026
UpdatedSep 17, 2026
Category编程语言
PricingOpen source

> Related tools

T
TypeScript
JavaScript 的超集,为前端与全栈提供静态类型
P
Python
通用编程语言,广泛用于 Web、数据与 AI
G
Go
Google 推出的简洁高效系统语言