KnowKit Blog
Entry from 28.04.2021
We are Armin and Alex and we welcome you again this week to our Dev-Log #4. We'll bring you up to date on the latest developments at Knowkit - lets go!
"A month went by quickly. It didn't want to hang around." -Terry Pratchett
DevLog Meta
The focus in the Up2B Accelerator Program last week was Marketing. One question we asked the experts from Up2B was: How much can we present in our weekly DevLog post? As you have probably noticed, technically we don't go very deep, in the last posts, as we wanted to focus on product and user benefit.
The tip we got is: Write what the problem is, how we solved it and what the outcome is. Another tip was: Show results - include Links, Screenshots or Videos.
Now our questions to you is: What do you want to see in our weekly DevLog Posts? We'd love to hear your thoughts in the comments!
Design System
This week we continued working on the Design-System and the Pattern-Library. As already mentioned last week, the Design-System is our project were we develop, test and show-case the CSS and react components, which can later get imported in the corresponding applications.
In the first step we just write the CSS. We like to keep this step as simple as possible. For example: We don't use css-in-js because we want to use the styling later in simple HTML pages, like our blog or landing pages. To keep the files structured we use established methodologies like ITCSS and BEM.
MDX to showcase the CSS
To showcase the various elements, we use MDX.
In addition we use a Playground-Component as it is done in the Docz-Project. MDX is based on the (wonderful) rehype/remark stack, which allows us to include the following plugins in our project: remark-docz, rehype-slug and rehype-docz
Wrap CSS in react components
Next step is to wrap the CSS in react components and re-create the pages from the design. In this step we get a better feeling how the the components "feel" and how they fit together.
Last step is to export the build artefacts: CSS and React Components. Using Github Actions and Github Packages is really helpful to automate this process :)
At the moment we are in the process of replacing the old UI and integrate the new UI - more updates on this next week 🚀
Screenshots
That's it - see you next week for KnowKit DevLog #5!