Mathematical Driven Design: Dimensions and Padding

Hello, my name is Dmitry Karlovsky and I am ... a designer. Designer from the word design (design), not from the word style (design). I am developing a high level $ mol framework . One of the main concepts of which is Lego. That is, it is a set of very small building blocks with a simple and universal communication interface. By combining these bricks in different combinations, you can build applications of any complexity.



But in order for the application not to look like a patchwork quilt, but to be laconic and neat, it is necessary that these bricks are made in the same style, and they can be arranged in any combination without losing neatness.



Therefore, we have developed a mathematically verified design concept, the essence of which can be captured from the following cheat sheet:





Next, I will tell you why everything is so, and nothing else ...



Requirements



.



  1. . , .
  2. . , .
  3. . , , .
  4. . , .
  5. . .




, .



  1. . , 2 .
  2. . , , .
  3. . , .
  4. . ( ) , , .
  5. . , 6 , 40 css .




  1. . , . , .
  2. . , , ( ), — . .
  3. . , . widow.devicePixelRatio. , "".




1rem, 16px. / . , . , . — 1rem, .



1rem. . , . 1rem, . 2rem, , .



, 2 , , . , . .





, . 1.5rem.





0.5rem . 8 , 2 4, , , , .





. , . , . , . , , , , , .



, . 1.5rem . , , 1-2 .





- , 0.5rem, .



, (, line-height: 1.5), , 0.5rem.





. . . , — .



, (, ).



, , . 1.5rem 1rem, , .5rem .







, . /, . — . :



  1. , .
  2. .
  3. .


— , , . , .



0.5rem. : 0.25rem, 0.5rem, 0.75rem, 1rem.



, 1.5rem. 0.5rem . 0.25rem . , , 0.25rem: 0.75rem 0.5rem ( 0.75rem).





. . , , , , . . . , .



, 0.75rem, . ( , ) 1.5rem.







1em . 1.5rem . 16 — . , — , . , , 0.25rem , .



, . , . , , , .





, . . . , , . - - — , - - . $mol . !




All Articles