posize

Posize is the flexible layout tool which implements the concept of resizing constraints.

There is also react version here

Description

All popular design tools have the concept of resizing constraints, such as Sketch, Figma, and AdobeXD. It's very useful to define the responsive behavior which describes how to position and resize an item across different resolutions.

pxCode, an online editor which help users to convert design files into responsive web code, widely uses posize to achieve responsiveness.

Posize Demo

Why Posize rather than CSS margin ?

Traditional CSS margin is useful but limited. CSS margin can't be proportional without using complicated calc syntax. And the vertical margin (margin-top and margin-bottom) can't use precent intuitively because the percentage is in terms of the parent width, not height.

Features

Supports proportional and fixed margin
Support both direction - vertical and horizontal
Support MediaQuery

Demo

Try the posize Playground or CodeSandbox

Installation

CDN

just add the script in your <head>

<script type="text/javascript" async defer src="https://cdn.jsdelivr.net/gh/px2code/posize/build/v1.00.3.js"></script>

Usage

Examples

<px-posize 
  x="176fr 546fr 558fr" 
  y="150px 379px 191fr">
  <div class="content">
    ...
  </div>
</px-posize>

posize with MediaQuery, max, xxxl, xxl, xl, lg, md, sm, xs

<px-posize
  x="20px 546fr 558fr"
  y="20px 379px 191fr"
  md-x="1fr minmax(400px,2fr) 1fr"
  md-y="150px 379px 1fr"
  xs-x="10px 1fr 10px"
  xs-y="150px 379px 1fr">
  <div class="content">
    ...
  </div>
</px-posize>

Settings

name	Type	Default value	Description
x	String \| Array	"0px 1fr 0px"	the parameters for left, width and right
y	String \| Array	"0px 1fr 0px"	the parameters for top, height and bottom
z-index	Number	0	set zIndex into track `div`

Syntax

The syntax of x and y is the same to CSS grid.

?px means pixel which is fixed value
?fr means "fraction" which means proportional to the sibling.
?% means "perentage" which means proportional to the parent.
max-content means largest maximal content contribution.
minmax(?px, ?fr) means a size range greater than or equal to min and less than or equal to max.
minmax(?px, max-content) means a size range greater than or equal to min and less than or equal to max-content.