Can i just apply css to existing html file?

Beginners
1

Hi…

I am new to Pinegrow and I am not an expert in CSS. I only google for CSS solutions whenever I want to adjust my website/CMS.

However, now I have an existing HTML file (complete with CSS and JS) that I need to make it looks better. Currently it has no styling. It’s a questionnaire.

My question is, can I just apply Bootstrap or Tailwind CSS to this file to make it looks better?

2

Hi @dzulfriday,

No that’s asking for trouble, because Bootstrap etc. comes with predefined classes in the HTML and CSS. Your best option is to start with a Bootstrap 5 template provided with/in Pinegrow (there are even multi page templates!) and transfer your content from the old website to the new one. That way you learn the structure of the Bootstrap 5 HTML and create a up to date website that’s future proof. Here a 3 column example in Bootstrap 5 :

<section class="mysection">

<div class="container">
<div class="row">

<div class="col-md-4">
</div>

<div class="col-md-4">
</div>

<div class="col-md-4">
</div>

</div><!--closing row-->
</div><!--closing container-->

</div><!--closing section-->

Regards,

David

3

A css framework like Milligram will give you some styling without the need to add classes.

4

@SureWeb

Milligram will give you some styling without the need to add classes

From the Milligram website:

“Milligram has some functional classes to improve the performance and productivity everyday”.

Not true! Works the same as any other CSS framework (only very minimalistic!) and is not part of Pinegrow and Pinegrow doesn’t offer templates for it.

5

Unless you want to avail of the grid in Milligram you don’t need to use classes with it. It has a handfull of utility classes, some button classes, and some classes to inline forms. These are all optional the rest is styled on the elements.
Milligram is the closest to a classless framework but yet still looks appealing imo.

6

The fact that you need less classes in Miligram (the properties of the HTML tags are defined in the CSS) makes no difference! The question of the OP was:

Can i just apply css to existing html file?
I am new to Pinegrow and I am not an expert in CSS. I only google for CSS solutions whenever I want to adjust my website/CMS.

My question is, can I just apply Bootstrap or Tailwind CSS to this file to make it looks better?

And my answer was that it’s better to build a excising site from the bottom and transfer the content using Bootstrap, because all you need for that is available in Pinegrow. Miligram is not going to do anything without knowledge of HTML and CSS or you get (at best) a uniform look like all the Bootstrap websites that look the same, because most users don’t understand how to style their own stuff. But looking at the Miligram CSS I doubt that anything sensible comes out if you add it to a existing website!

Bootstrap comes with tons of components that you can add to your pages and style in Pinegrow.

7

Hi @AllMediaLab,
I appreciate your advocacy of Pinegrow and help with user problems in the forum. Try to remember that for some questions there might be no “correct” answer, only opinions. Your opinion is that the OP should switch to a more powerful framework that primarily uses classes to add styling. This will require a lot of knowledge of the framework and possible re-write of the HTML. @SureWeb was of the opinion that simply adding the Milligram CSS framework might be enough. This wouldn’t require much alteration of code or require a lot of additional knowledge acquisition by @dzulfriday. This might work, it might not. But it is worth a try.
Cheers,
Bob

8

@RobM

Adding any CSS framework to a ready made website makes no sense and is no opinion, but a fact!

Regards,

David

My question is, can I just apply Bootstrap or Tailwind CSS to this file to make it looks better?

The answer is no and not with Milligram as well it makes no sense. Only when you start at the beginning!

9

Hi @dzulfriday — If you have an HTML file that already includes CSS and JS, your best approach is to edit the existing CSS. You can modify it in PG by selecting the element you want to change and editing the CSS that’s currently applied in the Style tab. In any case, you’ll need to know CSS well enough to make the appropriate changes. To switch over to BS or Tailwind, you’re better off recreating the page from scratch. I hope this helps a bit.

1 Like