Are there any well-maintained Constraint Layout for the Web?

user_13792515 0
Viewed 1227

Context

I recently used CSS to do the layout of a modern website and I was appalled at how things that ought to be simple (such as centering) require hacks & tricks instead of intuitive and legible code. It is unfortunate for a technology so widely used, all the more since CSS had 25 years to improve.

I browsed for alternatives and found that Constraint Layouts (i.e. layout done by specifying equation-like constraints that components have to satisfy) are common in mobile development, but could only find Layx (http://www.layx.org/) for the Web: a promising but incomplete and unmaintained constraint layout engine.

Questions

  1. Are there any well-maintained Constraint Layout for the Web ?
  2. What are the drawbacks of Constraint Layouts & what would it take for them to become mainstream ?

About Layx

layout user-interface css html
2 Answers
user_65152120

layman (authored by me) would work for you.

Just include the file layman.js in the head section and use custom tags on your html elements to specify simple constraint relations between them. For example: a simple login interface in layman can be found here.
Here is the code for that:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Easy Login</title>

    <style>
        body {
            background-color: #444E5D;
        }
        div#div1 {
            background-color: #4E5765;
            border-radius: 8px;
        }
        span {
            color: wheat;
            font-weight: bold;
            font-size: 1.5em;
        }
        input[type="email"], input[type="password"] {
            padding: 12px;
        }
        input[type="button"] {
            font-weight: bold;
            background-color: #4EA95F;
            border: none;
            border-radius: 6px;
        }
        input[type="button"]:hover {
            cursor: pointer;
            background-color: #2AA95F;
        }
        input[type="button"]:active {
            cursor: pointer;
            background-color: #2A765F;
        }
        a {
            color: white;
            text-decoration: none;
        }
        a:hover {
            color: chartreuse;
            text-decoration: underline;
        }
        a:visited {
            color: lightgray;
            text-decoration: underline;
        }
    </style>
    <script src="layman.js"></script>
</head>

<body data-guide-color="#fff">

<div id="div1" data-const="w: 30%, h:width, ms:0px, mt:0px, cx: parent, cy: parent">
    <span id="p1"
          data-const="w: wrap_content, h:wrap_content, cx: parent, tt: parent, mt: 24px">
        LOGIN
    </span>
    <img id="login-icon" src="img.png" data-const="w:96px, h:width, tb:p1, bt: fullname, cx: parent">
    <input id="fullname" type="email" placeholder="Enter your email address..."
           data-const="w:76%, h: wrap_content, cx: parent, cy: parent">
    <input id="pwd" type="password" placeholder="Please input password..."
           data-const="w:fullname, h: fullname, cx: parent, tb: fullname, mt: 12px">
    <input id="btn" type="button" tabindex="1" value="PROCEED"
           data-const="w:0.75*fullname, h: fullname, cx: parent, tb: pwd, mt: 18px">
    <a href="https://www.linkedin.com" id="link"
       data-const="w: wrap_content, h:wrap_content, cx: parent, tb: btn, mt: 12px">
        Forgot password?
    </a>
</div>
</body>
</html>

Enjoy!

user_18454040
Related