Jump to content
Pygmalion

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

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...