Styles

This chapter gives recommendation on the strategies to make your website appealing visually... And how should one go about handling the visual along with the contents (the "form" and the "function")

Remember that you can begin your project purely from a content perspective. FillPouch does not demand that you should first think of styles and visual look and then talk about the content. Or the other way around. It is highly flexible.

Natural bifurcation as you progress
One thing is certain: As you keep working with FillPouch you would naturally bifurcate and get two kinds of fragments: One set would be for the "contents" you deposit and the other set would be dealing with the "looks". Both these fragments would be inserted correctly, by placing "pouch" Meta-instructions in appropriate files.

The point in time where you will take this decision about the CSS library to use, is left to you.

However, we recommend that once you take a decision on which CSS library you want to choose then stick to it! Changing the library half way would mean you getting entangled editing the CSS of individual HTML fragments. Some concepts from one CSS library may not be available in another one. For example; Bulma CSS has a concept of tiled content. Other CSS may not have that, so it would be difficult for you to change later.

In short; Mixing up multiple CSS libraries may end up confusing you!

Choosing Styles
You should choose whatever styling library that you can insert in the HTML Head section of all the generated HTML. You can also insert its corresponding Javascript helper into the Head section too.

Remember that the entire world of CSS libraries are all available for you! But that does not mean you should skitter around and pick things from several different CSS libraries.

Our Recommendation
We use Bulma CSS and strongly recommend that for its simplicity, and for the fact that it does not need any additional tooling. For example; Tailwind CSS -- though a great CSS library -- often needs some additional work to reduce the bulk by removing unused classes. Another great CSS library is PicoCSS. It accomplishes a lot with a very tiny amount of CSS classes.

The usual approach we recommend is to find templates on the Internet that you can legally copy-paste. Look for the ones that suits your taste. Why we recommend Bulma is because it has a nice collection of re-usable copy-paste samples. And it also does not bias you by also showing contents in its examples. There are a few others like Bulma too. Float-UI also does this. And we are sure, you may find a lot more.

Styling -- at the beginning of the project
Thinking first of CSS before the contents is ready is an approach that some take. Especially when you have dedicated front-end people. They may want to achieve a particular "user journey" (in case of a SaaS application front end) or convey certain concepts first before more complex concepts. Such an approach should at least have a placeholder for the contents so that later on when the content providers step in, they know what kind of contents goes where.

Styling -- as the project finalizes
Some people may want to first develop the contents, and then figure out what kind of logical structures are emerging for the contents. That would dictate the users' journeys. Then; in turn, that will dictate the kind of visual dressing up you need to do. This approach is also valid, and FillPouch allows this kind of working too.

If this be the case, then as you write the contents, you may get ideas on what kind of visual impact are you wanting to achieve. Maybe you want to pull out the same highlighted clever phrase in multiple locations. All those logical elements will be clarified, and then you can choose the CSS concepts you need to dress up your site. Then choose the CSS library accordingly.