First post on my new webpage!
This new webpage is built on:
The summary
Originally I was creating a custom hybrid between Bootstrap and tailwindcss using Sass, and then I realized that I preferred the hackability and opinionation of Bootstrap over the flexibility of tailwindcss.
The bulk of it
There was a lot of tinkering around that went into deciding how I wanted the project to work.
I want this website to be:
- Convenient to adjust
- Lean on the amount of tooling
- Lean to run (no
<script>tags) - Something that would be fun to work on
CSS frameworks
tailwindcss
tailwindcss provides convenient access for common CSS properties for quick prototyping. The goal is to build prototypes into a component class that can be used without large amounts of class names cluttering your HTML.
The downside of this kind of process is that it takes time.
- Time to decide how each element is positioned.
- Time to decide how each element looks.
- Time to decide how each component is structured in code.
It was clear to me that tailwindcss was not a tool that fits my wants or needs.
Custom main.scss
While it seems, and is, counter-intuitive to talk about wasting time when you decide make your own stylesheet from scratch, it is more fun to learn about a useful programming language that makes CSS less repetitive.
Since I didn't have much Sass knowledge to be able to customize Bootstrap at the time, I decided to use Sass to make a hybrid between tailwindcss and Bootstrap. Eventually I got burnt out because it still took the same amount of effort to implement the CSS as it would have to apply doezens of classes to elements with tailwindcss. But what I did learn was enough to understand how Bootstrap was implemented.
Bootstrap
Bootstrap provides sane defaults to build a webpage layout quick. The major downside is deciding how you want the HTML structured; a ton of the examples are heavily nested. The method I used to build the webpage was relying on the defaults Bootstrap provided to make sections of the website until I was happy with the semantics, structure, and appearance. Then using my own Sass file, I grabbed utilities that I needed from Bootstrap and customized them to my liking.
11ty
11ty is a static webpage generation tool which is extremely generous with what you can throw at it, as well as how the project is structured. I find that the tools provided without the plugins are enough to do what I wanted. This isn't my first time attempting to make a webpage using it, so I had some knowledge on how I wanted to set it up.
What I've learned
If you want to make a webpage as quick as possible: use opinionated libraries or frameworks that make basic decisions for you. Once you are happy with the way the webpage looks then adjust the properties to how you see fit, or build your own stylesheets based on your draft design mock-up.
Otherwise, if you mocked a design using a tool like Figma and specified a lot of the details for spacing and such, then using unopinionated frameworks or building the resources from scratch might be a better option from the start.