Define your interface components in a spreadsheet format (CSV) and generate starting (HTML, SCSS, JS etc.) files from there via terminal in OSX.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
LICENSE
README.markdown
create.py
inventory.csv

README.markdown

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 :).