Which CSS framework to use to modify existing dynamic HTML code?

1

I have programmed a dynamic web page using Flask . The result is practically pure HTML and in terms of use design and general layout I am very satisfied with the result. But it adapts very badly to different devices and in is really corny in terms of visual design , as you can see here:

Untitled
Untitled502×578 14 KB

So what I wanted is to add some designer’s touch and device adaptation, with as little code adaptation as possible. I might figure which CSS commands to use, but I have zero aesthetic sense . I have made extensive search in Internet and I figured out that maybe the solution would be to employ CSS framework . I have tested two currently (allegedly) most popular frameworks and here is what I concluded:

  1. Bootstrap . When I tried to implement it, the result was even worse than pure HTML . For example, lines around FIELDSET s are ugly, do not make full boxes etc.
  2. Bulma . This one does not even have FIELDSET and I just don’t know which kind of DIV s to employ instead to get something nice and meaningful.

I lost hours trying to get a good result, but this was all disappointing, probably worse than pure HTML .
What am I doing wrong? Should I give up CSS frameworks and use something else? Or maybe I should chose some other CSS framework, possibly one very well integrated with pure HTML and lightweight?

Please advise.

By the way, here is the code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/static/favicon.ico">
<title>Display Control</title>
</head>
<body>
<h1>Control Panel</h1>

<div><fieldset style="display:inline-block">
<legend>Power</legend>
<form method="POST">
  <button formaction="/pow/on">ON</button>
  <button disabled>AUTO</button>
  <button formaction="/pow/off">OFF</button>
</form>
</fieldset></div>

<div><fieldset style="display:inline-block">
<legend>Display</legend>
<textarea placeholder="" style="background-color:gray" cols="40" rows="4" readonly></textarea>
</fieldset></div>

<div><fieldset style="display:inline-block">
<legend>Messages</legend>
<form method="POST"> 
  <button disabled>Automatic</button>
  <button formaction="/mes/0">Quick</button>
  <button formaction="/mes/1">Lectures</button>
  <button formaction="/mes/2">Meeting</button>
  <button formaction="/mes/3">Exam</button>
</form>
</fieldset></div>

<div><fieldset style="display:inline-block">
<legend>Quick message</legend>
<form method="POST" action="/quick">
<table>
  <tr><td rowspan="4" style="border-right-style:solid;border-right-width: thin">Lines</td>
  <td><input type="text" size="40" maxlength="40" id="line0" name="line0" value=""></td></tr>  
  <tr>
  <td><input type="text" size="40" maxlength="40" id="line1" name="line1" value="Nazaj v 5 minutah."></td></tr>  
  <tr>
  <td><input type="text" size="40" maxlength="40" id="line2" name="line2" value="Back in 5 minutes."></td></tr>  
  <tr>
  <td><input type="text" size="40" maxlength="40" id="line3" name="line3" value=""></td></tr>  
  <tr><td colspan="2" style="text-align:center"><input type="submit" value="Update message"></td></tr>
</table>
</form>
</fieldset></div>

<div><fieldset style="display:inline-block">
<legend>Services</legend>
<form>
  <button formaction="/reset" formmethod="POST">Reset</button>
  <button formaction="/setup" formmethod="GET">Setup</button>
  <button formaction="/logout" formmethod="POST">Logout</button>
</form>
</fieldset></div>

<p>Time: 2019-11-15 22:48:49</p>

</body>
</html>
2

Hello and welcome to the forum!

You want to use a CSS Framework with minimal changes, which is hard, since they need a specific layout for the styles to apply.

Did You check Pure? I think this is the smallest CSS you may find. Other than that, You may find CSS themes online.

The biggest problem You may find using a CSS theme, is that responsiveness will not work with pure HTML, although if all the code Your web has is what’s shown, then responsiveness could be easy to implement.

Now, regarding the frameworks mentioned, both do style forms, but to make them look better You have to use different options. Both have options to change color and background-color (is-primary, has-text-primary, etc.) or to alter the text size (bulma: is-7, is-6, etc.). You need to modify the code to make it look better with a framework (like I said, they need a structure/layout).

I hope this helps You a little :slight_smile:,

Regards!

3

Thanks for the welcome and the reply. The example I sent is indeed the whole code of one web page. (Other web pages are a bit more complex but they use the same patterns.)

I will just rephrase what I understand from Your answer:

  1. If I want a solution that responds well to different devices, I have to use CSS frameworks - CSS themes simply won’t do it.
  2. The smallest CSS framework, and thus closest to pure HTML is Pure. With Pure it should be easy to implement device responsiveness to my code.

Did I get Your points right?

Best regards!

4

Bootstrap is the most popular one you can use for spinning up something really quick that responds well to all screen sizes.

How did you have your bootstrap code laid out on the html side?

5

Kindly go with bootstrap