Upload your .txt file and I'll build out the directory structure.

...or select an example

What is this for?

Anyone that has worked on a project of any real size will tell you how an organised filesystem is vital to the ongoing development and maintenance of that project.

Often, as we develop our software/web applications we start off with best intentions, trying to keep all the relevant parts of a project together. Javascript in one folder, CSS in another, possibly with a sub folder containing LESS files etc. This is, obviously, good practice and should be undertaken as a matter of course.

When I'm planning out a new project, application or refactor, I'll quite often look at the components I need and design the folder structure accordingly - normally in Sublime or TextMate - with ASCII characters. Once I'm happy, I'll generally right-click, New Folder, rename, right-click, New Folder, rename (and repeat); this is fine (if not a little laborious) for folders, but it's not easy to do with varying filetypes and - worse - is a super boring job.

Enter [Scaf]foldr

[Scaf]foldr was written to take one of my filesystem designs and create the filesystem for me. Simple as that. It's not fancy, it's not particularly clever, it just creates files and folders. But what it does do is save me time. And less time creating folder structures means more time writing software (or in the pub with @ryn_j).

So go ahead and try it. Upload your .txt file (see below for markup requirements) and I'll give you back a Zip file containing your structure.

If you need some guidance on creating your own filesystems, see the documentation below or download the examples.

What this is NOT

This project is not trying to compete with Yeoman or any other scaffolding tools. You don't need node installed, no package management tools, and no dependency resolution. It's simply for creating a folder structure. Similarly, it's not necessarily for developers/programmers; want to organise all your photos or videos? Fine! Just create yourself a txt file with your folder structure. See below for instructions.

[Scaf]foldr Markup Language [ScaML]

(Just kiddin' - I don't really call it that!)


It's really simple, just draw your structure as it would have looked in XTree Gold.

                |--index.html   [Home page content here]
                |   |--app.js   [Application JS File]
                |   |--jquery.js <http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js>
                |   |--imgs/
                |   |--print.css [Print Styles here]
                |   |--screen.css [Screen Styles here]


Directories and can be nested as deeply as you like.

Directory Contents

In order for the parser to keep a view of how deeply nested your files and folders are, and to make directory structures human readable, directory contents should be delimited by a pipe symbol "|".

In the example above, you can see that inside the website directory, we have a | followed by -- and then the file name index.html.

This is telling the parser "Inside the current folder (website) I have a file (because it has a file extension) called index.html."

Following down further, you will see that the next item is a directory, and - in turn - that directory contains a file called app.js. You will notice that this particular row:

            |   |--app.js   [Application JS File]

... has TWO pipes. This shows the reader/author/parser that this is a file within a folder, within a folder.

File Scaffolding + Comments

For certain file types, we provide templated scaffolding of the actual files within your structure. These are very simple boilerplate files which are output with a relevant comment style for their filetype (i.e. <!-- Your comment here --> for HTML etc).

To set the comment's content, simply include your comment in square brackets at the end of the file's row:

            |--index.html   [Home page content here]

... will generate an html file with the following structure:

            <!DOCTYPE html>
                    <link rel="styleheet" href="css/screen.css">
                    <link rel="styleheet" href="css/print.css" media="print">
                    <!-- Home page content here -->

External File Contents

If - like me - you prefer to keep control of your code (as opposed to using a CDN), it is possible to download and use the contents of external files or libraries in your scaffolded projects. To do so, simply include a link instead of a comment, in this format:

            |   |--jquery.js <http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js>

This will retrieve the contents of jQuery 1.11.0 (minified) from Google's CDN and store the contents in a file called jquery.js in your filesystem. This link could be one of your other projects or a public CDN, for example.


You can choose to use one of my [Scaf]foldr templates or write your own and upload it (Ajax drag-and-drop upload coming soon[ish]™). If you think you need a more complex structure, but my explanation isn't sufficiently explanatory, feel free to download the example templates and tweak them for your own needs.


Feel free to suggest improvements, features and such. In due time I'll make the BitBucket and Jira projects public, but until then hit me up on twitter (@seb_grant).

Who are you, anyway?

I'm Sebastian; if you're not going to buy me a beer, then get out of my office. Or I'll buy you one, whatever really.

I'm kind of a full-stack web and software developer. I've been around the block a bit but currently settled building Grails software with EngageSciences.

Look me up on twitter (@seb_grant) or on BitBucket. I don't really open my source much, 'cause I barely ever build anything of any use to anyone else (outside of the day job!), but if you ask me nicely and don't hassle me with support requests, I may publish more.

So... how about that beer?