数学的駆動設計:寸法とパディング

こんにちは、私の名前はドミトリー・カルロフスキーです。私は...デザイナーです。ワードスタイル(デザイン)からではなく、ワードデザイン(デザイン)からのデザイナー。私は高レベルの$ molフレームワークを開発していますその主要な概念の1つはレゴです。つまり、シンプルでユニバーサルな通信インターフェイスを備えた非常に小さなビルディングブロックのセットです。これらのレンガをさまざまな組み合わせで組み合わせることで、複雑なアプリケーションを構築できます。



しかし、アプリケーションがパッチワークキルトのように見えるのではなく、簡潔できれいであるためには、これらのレンガが同じスタイルで作られている必要があり、きれいさを失うことなく任意の組み合わせで配置できます。



そのため、数学的に検証された設計コンセプトを開発しました。その本質は、次のチートシートから取得できます。





次に、なぜすべてがそうなのか、そして他には何もありません...



要件



.



  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