Wireframes from markdown
A brief overview.
This is a first pass at generating responsive wireframes from simple markdown files. I love creating notes in markdown and creating an outline of content for a page in a text file is standard procedure. It is a simple matter to convert markdown to HTML so why not include some blocks to show basic page layout and have it be responsive.
With this short python script and CSS file, you can convert a folder of markdown files into HTML files with blocks or rows of blocks that are in a column on mobile.
2 Blocks
What does markdown look like?
It is just plain text with a few extra characters.
#### This is a headline.
This is some text with
a **bold** word.
- Here
- is a
- list.
What do I need to add to the markdown file to show the wireframe elements?
Add div elements with the classes you want in the form of HTML comments. They will be uncommented by the script. If the markdown inside the tag does not need to be converted to HTML, you can use an HTML tag directly.
Here is what the hero image box above looks like in the markdown file:
<!--div class="block center hatch"-->
<div class="sign">
HERO IMAGE
</div>
<!--/div-->
3 Blocks
Here is a row of three blocks. The markdown to create them is shown below.
### 3 Blocks
<!--div class="flex"-->
<!--div class="block center hatch"-->
<div class="sign">
FPO IMAGE
</div>
<!--/div-->
<!--div class="block center"-->
<button>Button</button>
<!--/div-->
<!--div class="block center dashed"-->
Block 3
<!--/div-->
<!--/div-->
Instructions
- Download the repository.
- Use the Terminal application to navigate into the downloaded folder.
- Edit the index.md file in a text editor and add any other markdown files you want.
- Run the script on the current folder by typing
python md2wire.py .in the terminal . - HTML files will be created next to the markdown files.
- Open the index.html file to view your work.
Examples
2nd paragraph. Italic, bold, and monospace. Itemized lists
look like:
- this one
- that one
- the other one
Note that --- not considering the asterisk --- the actual text content starts at 4-columns in.
Block quotes are written like so.
They can span multiple paragraphs, if you like.
Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all in chapters 12--14"). Three dots ... will be converted to an ellipsis. Unicode is supported. ☺ Here's a numbered list:
- first item
- second item
- third item
Note again how the actual text starts at 4 columns in (4 characters from the left side). Here's a code sample:
# Let me re-iterate ...
for i in 1 .. 10 { do-something(i) }
As you probably guessed, indented 4 spaces. By the way, instead of indenting the block, you can use delimited blocks, if you like:
define foobar() {
print "Welcome to flavor country!";
}
An h3 header
Now a nested list:
-
First, get these ingredients:
- carrots
- celery
- lentils
-
Boil some water.
-
Dump everything in the pot and follow this algorithm:
find wooden spoon uncover pot stir cover pot balance wooden spoon precariously on pot handle wait 10 minutes goto first step (or shut off burner when done)Do not bump wooden spoon or it will fall.
Notice again how text always lines up on 4-space indents (including that last line which continues item 3 above).
Here's a link to a website, to a local doc, and to a section heading in the current doc.
Tables can look like this:
| size | material | color |
|---|---|---|
| 9 | leather | brown |
| 10 | hemp canvas | natural |
| 11 | glass | transparent |
Table: Shoes, their sizes, and what they're made of
