[ctrl+alt+n]
Why patternplate
How to use the docs
Guides
Guide: Getting Started (CLI)
Guide: Getting Started (App)
Guide: Build a component
Guide: Write documentation
Guide: Create Virtual folders
Guide: Document with widgets
Guide: Convince with a cover
Advanced
Advanced: Deploy to GitHub
Advanced: Theming
Advanced: Build systems
Reference
Reference: CLI
Reference: Configuration
Reference: Demos
Reference: Documentation
Reference: Renderers
Reference: Widgets
Reference: Search
Reference: Static Files
Roadmap
GitHub
Join us on Gitter
Components
Component: Button
Component: Code
Component: Flag
Component: Headline
Component: Icon
Component: Info Pane
Component: Logo
Component: Main Header
Component: Markdown
Component: Search
Component: Tag
Component: Text
Component: Themes
Main Navigation
Search
Nice browser. Is it antique?
No, seriously - your browser is so old that some features of patternplate don't work as expected.
Don't worry - you can either continue with a restricted version or install an up-to-date browser.
We messed up.
Sorry, but your user experience might be affected.
- Try reloading the page
- Report the problem at github.com/patternplate/patternplate

Looking to set up patternplate as a dev project?

Give the CLI Getting Started Guide a go.

Get started with @patternplate/app

⏲ Time invest: 5 Minutes ––– 👩‍🎓 Level: Beginner

What to expect

patternplate bridges the gaps between engineering and design. While there is a command line interface, it also provides a macOS application to download and view patternplate projects.

We will …

  • … install @patternplate/app on your Mac

  • … use @patternplate/app to clone the Getting Started project

  • … start the Getting Started project via the app

@patternplate/app is a Technical Preview and might have bugs / unimplemented features. We are working hard to get the first stable version ready for delivery 🤞

During Alpha we build only macOS bundles, support for other platforms is planned.

You'll need

  • 🍎 A Mac with approximately 1GB of free disk space

1. Install @patternplate/app

  • Download @patternplate/app by clicking on this link

  • Click on Save File when asked if you want to download patternplate-1.0.0-alpha.dmg

  • Wait for your download to complete, then locate patternplate-1.0.0-alpha.dmg in your Downloads folder

  • Double click patternplate-1.0.0-alpha.dmg and wait for the image verification to complete

  • In the window that opens, drag the patternplate icon onto the Applications folder like this:

  • Locate patternplate in Applications and double-click on it

  • When asked if you want to open patternplate click Open

  • If everything worked the app greets you like this:

Congratulations! 🎉 You succesfully installed @patternplate/app! Let's put it to use

2. Clone your first project

Copy the following URL 

https://github.com/patternplate/getting-started.git

Paste it into the input field below the greeting and click on Add

The view changes to resemble the following screenshot:

Notice the spinning part in the card for patternplate/getting-started? This indicates the project is downloading and installing dependencies.

Wait for it to complete, then proceed:

3. Start the project

Double-click on the card for patternplate/getting-started. A new tab on the top left of the application window opens and the view changes to this:

That's it for this guide – you just cloned and started your very first patternplate project. 👍

Take aways

  • There is @patternplate/app, a GUI application for easier setup and viewing of patternplate projects
  • You can clone patternplate projects by providing a GIT url or open them from your file system

Up next