1. State of the art, project management and documentation

Objectives

• Learn the process and tools used to document course work
• Acquire the necessary skills to publish projects, documentation and share the results of each assignment

Student checklist

• Build a documentation website describing you and your motivation for the textile-academy, including your previous work
• Upload the documentation to your project page on class.textile-academy.org
• Add references and research based on the topic of your interest
• Learn how to upload images, videos, references and how to use Markdown and Gitlab
• Learn about the fab lab processes, booking system, usage, machine demos, tools and safety rules
• Customize your website and document how you did it (extra credit)

Some Inspirations

Special Projects Studio

Automatic Machine Knitting of 3D Meshes

Amanda Ghassaei

Nervous System

Artistic toys by Blight Design

Sensory Maps

A brief introduction about me and my work is here

Research

• Material for MKDocs - Documentation
• p5.js

Building the website

I was already familiar with Git, Git lab and creating webpages using gitlab. The material theme of MK docs which runs on markdown is also something I'm used to doing ever since Fabacademy.

Jekyll vs MK Docs Material

My primary dilemma was whether to change the given template of material for MKDocs. I thought of using a Jekyll theme but after a short chat with Cecilia on Mattermost I reassessed my options and decided to focus my efforts on content rather than the theme.

Weaving Creative using P5.js

I wanted to learn something new and decided on using my time to learn p5.js to create a cover for the website that can show the movement of the loom. I want it to be an experiment for the user to change the colours and weaves in real time giving the person a feel of weaving a piece of clothing. It should be a piece connecting the weaving and coding with the of notion of sentience.
I have worked on processing before and started learning p5.js through Daniel Shiffman's tutorials on YouTube.

Customising the theme

I want the front page to be clear of content to later add the loom creative, so I created a separate “About” menu on top and added pages under it. For this I created a subdirectory called About under Docs in my git project and added 2 new files called about.md and theme.md. This created 2 new pages-about and theme under the menu about. I added an image on the front page as a placeholder.

I deleted the content on index.md and added a placeholder image of a loom that I added to the images subdirectory under docs.

I also deleted all the content on the index page.

Next I changed the header to white by changing the primary colour as white in the mkdocs.yml file.

I also changed the text font to Ubuntu from Roboto. After checking the MKDocs documentation I decided to add the navigation tabs so it is possible to view the top level sections as rendered under the menu tab.

I also changed the site_name, site_description and site_author in mkdocs.yml.

Here the change is evident:

I also changed the favicon by replacing it with another image of yarn in the yellow background.

The yellow yarn favicon is popping up against other website icons.

Now I started to document it by changing the content in about.md

I again changed all the colours and the nav icon to reflect my theme as given in the page colour palette.

Changing the header line

I wanted to change the colour of the line under the header, so added the following code to extra.css

.header {
  background-color: [#ffffff];
  border-bottom: 3px solid [#BE9852];
  }

But there was no change.

Then I figured out there is no class named header and it is md-headerinstead (ie from <header class="md-header">). I renamed the css class to .md-header and it worked.

.md-header {
  background-color: [#ffffff];
  border-bottom: 3px solid [#BE9852];
  }

It worked. But I was wrong in assuming the black line was underneath the header. It is under menu navigation bar.

I tried this but did not work

md-tabs {
  border-bottom: 3px solid [#BE9852];
}

Then I tried this but this also did not work

@media screen and (min-width: 76.25em) {
    [data-md-color-primary="white"] .md-tabs {
        border-bottom: .05rem solid rgba(0,0,0,.07);
   }
}

Then Julian Gallimore helped and explained to me the mistake I made, ie the order was wrong.

Because of the way CSS works, order matters! So my .md-tabs line is lower in the list that the above code, in CSS eyes.

This screenshot shows that the custom CSS is put below the "themes" border bottom and it needs to be changed.

The order was changed and the golden line is ready.