Skip to content

afonsopacifer/microscope

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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