Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

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
  • 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 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 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.


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


Define your interface components in a spreadsheet format (CSV) and generate starting (HTML, SCSS, JS etc.) files from there via terminal in OSX.







No releases published


No packages published