🔬 A simple and fast Atomic Design boilerplate.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
_files
docs
public
source
.gitignore
CONTRIBUTING.md
Gruntfile.js
LICENSE.md
README.md
config.json
package.json

README.md

Microscope

A simple and fast boilerplate that assists the development of Atomic Design Systems.

Table of Contents

About atomic design

About the microscope

microscope view

What is it?

A simple and fast boilerplate that assists the development of Atomic Design Systems.

What does this do?

  • 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.

How to do?

  • Jade as the HTML template engine.
  • Preprocess the CSS with Stylus.
  • Build everything with GruntJS.

Demo

View a demo :)

Documentation

Tips

CSS Reset

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.

Semantic Grid

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 :)

Contributing

If you found a bug, have any questions or want to contribute. Go to issues, follow these recommendations and help us :)

Credits

License

MIT License © Afonso Pacifer