A Guide to
Origami-TailwindCSS
origami-tailwindcss is a template NextJS project to learn about the ancient art of origami, the project leverages tailwind CSS for styling along with TypeScript to make it more readable and easier to maintain.
Tailwind CSS is the embodiment of "utility CSS", it has benefits of smaller build and abstracting CSS attributes to classname one can easily chain together directly in the HTML, it sets out to change the very way developers approach frontend to replace traditional "semantic CSS".
However, is there a downside to a total shift to "utility CSS"? Aleksandr Hovhannisyan did a deep dive into reasons why he's not quite convinced. This template project is an attempt to remedy the "readability" by marrying it with static typing.
TLDR: Using tailwindCSS, sometimes it's difficult to understand what a set of CSS attributes represent, especially as project grows. origami-tailwindcss not only teaches you about origami, but also serves as a starting template for anyone hoping to give NextJS and tailwindCSS a try, with Typescript to allow more readability and code reusability.
To read more about the best practices this template enforces.
NOTICE:
The template is currently undergoing initial development, therefore is not yet ready-for-use, if there are any suggestions/questions, please feel free to reach out!
Tailwind CSS is the embodiment of "utility CSS", it has benefits of smaller build and abstracting CSS attributes to classname one can easily chain together directly in the HTML, it sets out to change the very way developers approach frontend to replace traditional "semantic CSS".
However, is there a downside to a total shift to "utility CSS"? Aleksandr Hovhannisyan did a deep dive into reasons why he's not quite convinced. This template project is an attempt to remedy the "readability" by marrying it with static typing.
TLDR: Using tailwindCSS, sometimes it's difficult to understand what a set of CSS attributes represent, especially as project grows. origami-tailwindcss not only teaches you about origami, but also serves as a starting template for anyone hoping to give NextJS and tailwindCSS a try, with Typescript to allow more readability and code reusability.
To read more about the best practices this template enforces.
NOTICE:
The template is currently undergoing initial development, therefore is not yet ready-for-use, if there are any suggestions/questions, please feel free to reach out!
3 Types of Origami:
Tessellation - repeating molecules, think of a pattern.
Pop-up - a special paper cut-out model that become 3D when folded.
Kinetic Origami - dynamic models that when moved in a certain way, mutate in shape.