Jump to content

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


Pygmalion

Recommended Posts

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 in the attached message.

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 FIELDSETs 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 DIVs 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>

 

Untitled.png

Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...