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.
Style Guide and Component Library https://qpimodfhueiclzqysehs.c8r.pub
First clone the repo into a new project
git clone https://github.com/c8r/lab-portfolio-kit.git your-project
git clone git@github.com: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.
Accepts a uri for an image and an array of links
avatar:
links:
- href:
text:
title:
- href:
text:
title:
Each page has a title, subtitle, and text that can be inserted with front matter
title:
subtitle:
text:
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:
- title:
subtitle:
kicker:
text:
src:
href:
linkText:
cards:
- title:
subtitle:
kicker:
text:
src:
href:
tiles:
- title:
subtitle:
kicker:
text:
src:
href: