Lab Portfolio Kit

What is this?

A UI kit for building portfolios with Lab and Iso. Contains components and templates that you can customize and extend. It's configuration based, so you can fill in your own content and make design tweaks without writing any code. For those that want to dive deeper, you still have granular control over the markup and styles. Will also hopefully serve as a set of useful patterns for using Lab and Iso together to design UI.

Includes Templates for

• Full Page Profile
• 404 page
• About page
• Project / Case Study
• Home page
• Photo page
• Image Gallery

Style Guide and Component Library https://qpimodfhueiclzqysehs.c8r.pub

Installation

First clone the repo into a new project

HTTPS

git clone https://github.com/c8r/lab-portfolio-kit.git your-project

SSH

git clone [email protected]:c8r/lab-portfolio-kit.git your-project

Open Lab and go to File > Open project...

The ui elements will now be loaded in Lab. Feel free to edit and tweak their designs.

Open Iso and navigate to the directory of your project. Open any of the .jsx files to edit or view the templates.

Configuration

Site Header

Accepts a uri for an image and an array of links

avatar: 
links: 
  - href: 
    text: 
    title: 
  - href: 
    text: 
    title: 

Page

Each page has a title, subtitle, and text that can be inserted with front matter

title: 
subtitle: 
text: 

Footer

The footer has a block of text, a copyright blurb, and a list of social links

footerText: string
copyright: string
facebook: url
twitter: username
producthunt: url
pinterest: url
snapchat:url
instagram: username
dribbble: username
behance: username
soundcloud: username
youtube: url
vimeo: username
github: username
npm: username
codepen: url
stackoverflow: url
etsy: url
kickstarter: url

Panels, Cards, and Tiles are made up: Title, Subtitle, Kicker, Text, and an Href. Panels also display a link text. Examples of their usage can be found in Index.jsx.

Panels

panels: 
  - title: 
    subtitle: 
    kicker: 
    text: 
    src: 
    href: 
    linkText: 

Cards

cards: 
  - title: 
    subtitle: 
    kicker: 
    text: 
    src: 
    href: 

Tiles

tiles: 
  - title: 
    subtitle: 
    kicker: 
    text: 
    src: 
    href: