🔬 A simple and fast Atomic Design boilerplate.
HTML CSS JavaScript
Latest commit 123d72f May 9, 2016 @afonsopacifer Merge pull request #3 from woliveiras/patch-1
Centralize logo
Permalink
Failed to load latest commit information.
_files First version Oct 18, 2015
docs Fix a couple typos and wording issues in the README Feb 5, 2016
public First version Oct 18, 2015
source First version Oct 18, 2015
.gitignore Basic files created Oct 18, 2015
CONTRIBUTING.md CONTRIBUTING.md created and README.md updated Oct 18, 2015
Gruntfile.js First version Oct 18, 2015
LICENSE.md Fix Typo Jan 15, 2016
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