Styleguide
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.
- 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.
Use
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.
MPZN
These are Javascript APIs without UI components under MPZN name space.
MPZN.trackevent
MPZN.trackevent
is a wrapper for customized Google Analytics event. You can initialize MPZN.trackevent
with your own Google Analytics value. Google Anlyatics value is going to be sent with the initialization of MPZN.trackevent
.
MPZN.trackevent(category, action, label, value)
Please look at Google Analytics page to know more about options.
MPZN.nav
MPZN.nav
is a read-only component dealing with user's log-in status on the navbar.
| Method | Return | Description |
|------------|-------------------|---------|-----------------------|
| reflectUserState(<String> userID, <String> userNickname, <String> userAvatarImage, [<Function> customLogoutCall])
|null
| Manipulate navigation bar state with passed user data. To show not-logged-in status, pass null
or empty string as parameters. Optionally provide a custom logout handler to override the default. |
Contribute
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.
To work with other Mapzen related-repo, please follow the steps in contribution guide. You can create an issue containing the check list with this link.
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:
npm install
gulp build
(or./node_modules/.bin/gulp build
if gulp not found)npm start
- Open http://localhost:3000 in a browser.
Organization
To add a new sub-section to the styleguide:
- Add a new folder and
index.html
to the appropriate section undersrc/site/
- Add a new
@@include
to the appropriate HTML file for the section you are working on insrc/site/
- Add a new
<a>
link to the index file insrc/site/includes/side-nav.hmtl
- Add a new
.scss
file for your sub-section insrc/stylesheets/common
- Add a link to your stylesheet in
src/stylesheets/styleguide.scss
so that gulp will bundle it on build