A simple and fast boilerplate that assists the development of Atomic Design Systems.
- Post by Brad Frost.
- Presentation by Brad Frost.
- Book by Brad Frost.
A simple and fast boilerplate that assists the development of Atomic Design Systems.
- Create and organize your atoms, molecules, organisms, templates and pages.
- Generate an Atomic Style guide.
- Build your Vanilla CSS UI framework based on your Atomic System.
View a demo :)
- Installation
- Edit an existing component
- [Edit the component markup and style](docs/EDIT-AN-EXISTING-COMPONENT.m#edit-the-component-markup and-style)
- Edit the component states
- Edit the component notes
- Edit the component name
- Reorder the components
- Create a component
- Build your Atomic Style guide
- Build your CSS UI framework
- Grunt tasks list
- Folders structure
In the /public folder, we use the normalize.css as a reset through a CDN. Stay attend to it, so that the components are not different in their final application.
Integrating a Semantic Grid when creating your Organisms and Templates can be a good idea! As the microscope uses Stylus as a preprocessor, we suggest the Flex Grid Framework for the functionality :)
If you found a bug, have any questions or want to contribute. Go to issues, follow these recommendations and help us :)
- Thanks to Brad Frost for creating this incredible methodology.
- Project inspired by pattern lab.