Interface Inventory

Define your interface components in a spreadsheet format (CSV) and generate starting (HTML, SCSS, JS etc.) files from there via terminal in OSX. Building an UI inventory helps you identify reusable components and think in modular terms.

How to use

To get started, just open inventory.csv in a CSV editor (Excel, Numbers, Google Spreadsheet etc.) and start writing. Each row is a single component. If no filename and filetype are defined the row won't be compiled (use that to group things).

Define following fields:

• Name: Actual component name
• Filename: html|kit|php|js|css|scss|less (you can define new filetypes by modifying create.py)
• Filetype: Separate different filetype extensions you want generated by usiong the pipe character | (e.g. html|scss|js)
• Description: If you want to write a more detailed description (where the component is used, for what purpose etc.)

Start the script

• Open Terminal app on OSX
• Navigate to inventory folder
• Write python create.py inventory.csv

Script will generate a “build” folder with placeholder files. Files will automatically be prefixed with an underscore _. If there are existing files in the build folder, they will be overwritten.

Inventory example

This is a sample interface inventory of the inventory.csv file. I use this as a starting point and modify depending on project requirements.

Name	Filename	Filetype	Description
— Pages
Home	home	kit	Home page
— Default
Layout	layout	scss	Layout defining styles
— Sections
Header	section-header	scss	Header defining styles
Footer	section-foooter	scss	Footer defining styles
Main	section-main	scss	Main defining styles
—Blocks
Blocks	block	scss	Block defining styles
Hero block	block-hero	`kit	scss`
— Components
Helpers	helper	`kit	scss`
Lists	list	`kit	scss`
Forms	form	`kit	scss`
Buttons	button	`kit	scss`
Icons	icon	`kit	scss`
Images	image	`kit	scss`
Typography	typography	`kit	scss`
Tables	table	`kit	scss`
Navigation	nav	`kit	scss`
Languages	nav-lang	`kit	scss`
Breadrcrumbs	nav-breadcrumbs	`kit	scss`
Pagination	nav-pagination	`kit	scss`
Messages	message	`kit	scss`
Modals	modal	`kit	scss`
Carousels	carousel	`kit	scss`
— Specific
Product item	product-item	`kit	scss`
Product listing	product-listing	`kit	scss`
Post	post	`kit	scss`
— Experimental
Experimental	experimental	scss	Testing

Note: I use CodeKit to generate kit files into html, but you can easily replace kit with html and the script wil generate html files.

Credits

Nikola Plejic for the Python script and Lucijan Blagonic for the initial concept, inventory and putting it all together :).