Discover what's included in Pine

Pine comes with a starter template, several components, plus grid and a few layout examples.

Folder structure #

Download and unzip the compressed folder, and you'll see this structure:

├── components/
└── examples/
└── grid/
└── layouts/

Components #

Components are pre-built structures that you can drop into your projects right away. We have included 10+ components, ranging from the common spacer or divider, to interactive ones such as hamburger menus or accordions.

Examples #

Pine comes with examples that show how easy it is to use the framework in order to build structures for common scenarios, like centering a single column with very little code or defining a custom stacking order for mobile-only.

Grid #

We have included grid examples that cover all common column combinations. Simply drop them in the starter template and start building your layouts.

Layouts #

The layouts folder contains the starter template file.

Next Up: Compatibility →

Current Version