1. State of the art & documentation¶
Research & Ideation¶
I have not a precise idea on what to do during the Fabricademy course, I'm mostly interested in discovering new techniques which will be triggers to ideas to develop. I do plan though for the open source hardware week to build a circular knitting machine.
References & Inspiration¶
Basket Club¶



Unstable Design Lab¶
Soft Connection Lab¶
Documentation workflow¶
Being a former graphic designer, what I like to change first are colors and fonts. It was not that obvious to have a custom font which is not from Google. There is a strange thing happening with paths… The fonts worked locally on my computer but not online… So I started a custom theme as documented here.
I “cheated” a little bit… I started from an existing theme that my partner is working on. I then started to play modifying it and discovering CSS new features like repeating-conic-gradient
. All html and css files are available in the vvvvv
folder of my gitlab folder.


Fonts¶
- DINdong from the super talented Clara Sambot. If you're French speaking, you can use this font to write in inclusive like: “les enseignant·es et les étudiant·es s’échangent leur savoir-faire”.
- Cutive Mono from Google Fonts
Background patterns¶
I discovered this very cool CSS for repeating backgrounds: repeating-conic-gradient
. You can find documentation about it and try it out on Mozilla's resource website.
On the repeating-linear-gradient
documentation page, you can see how to repeat your pattern on a surface.
I wanted to have changing patterns when changing pages without being too heavy on the browser side. So I used the random
template filter of the Jinja language that mkdocs uses. Here's what the code looks like (it has to be put in an html
page as it uses a syntax specific to Jinja:
<style type="text/css" media="all">
body {
background: repeating-conic-gradient(#DDD {{[71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82]|random}}deg 23%, white 0deg 25%);
background-size: 40px 40px;
}
</style>
Lightbox¶
I saw on mkdocs website here that you can easily add a lightbox plugin (when you click on an image, it enlarges it on top of the whole website).
figure & ficaption¶
I used the Markdown plugin yafg to easily write <figure>
and <figvaption>
.
The markdown syntax for an image is as usual:

becomes this html code:
<figure>
<img alt="Alt text" src="/path/to/image.png" title="This is the title of the image." />
<figcaption>This is the title of the image.</figcaption>
</figure>