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.