Mapzen Styleguide makes it easy for us to create right-looking websites that work well across platforms and into the future. If you’re publishing Mapzen stuff, the guide is for you.

🔋 Batteries included:

• Basic page structure with standard linked CSS and Javascript resources.
• Sample UI components like navigation, social buttons, search boxes, and pagination that can be combined to make new kinds of pages.
• Complete sample pages like blog posts and developer documentation showing how all the pieces fit together.

To use the guide for Mapzen-looking web sites, visit https://mapzen.com/common/styleguide and follow the instructions to structure HTML and linked style and script resources.

Watch and contribute to development on the styleguide via issues here in Github and on Waffle.io.

To edit and test Styleguide, please work on a new branch in this repository and use Precog for preview and testing.

🚧 master branch is live 🚧

If you’d like to edit locally, Styleguide requires Node and uses Gulp to generate files in dist directory from sources in src/site. Build and test with these commands:

1. npm install
2. gulp build (or ./node_modules/.bin/gulp build if gulp not found)
3. npm start
4. Open http://localhost:3000 in a browser.

To add a new sub-section to the styleguide:

1. Add a new folder and index.html to the appropriate section under src/site/
2. Add a new @@include to the appropriate HTML file for the section you are working on in src/site/
3. Add a new <a> link to the index file in src/site/includes/side-nav.hmtl
4. Add a new .scss file for your sub-section in src/stylesheets/common
5. Add a link to your stylesheet in src/stylesheets/styleguide.scss so that gulp will bundle it on build

Maintainers are Ekta, Lou, Mike M, and Hanbyul.